SVG examples

Simple SVG example

A simple SVG graphic example:

Here is the SVG file (SVG file saving and SVG extension):

SVG code analysis:

The first line contains the XML declaration. Please note the standalone attribute! This property specifies whether this SVG file is "stand-alone", or contains references to external files.

standalone="no" means that the SVG document will reference an external file - in this case, a DTD file.

The second and third lines refer to this external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". This DTD is located at W3C and contains all allowed SVG elements.

SVG code starts with the <svg> element, including the opening tag <svg> and the closing tag </svg>. This is the root element. The width and height properties set the width and height of this SVG document. The version attribute defines the SVG version used, and the xmlns attribute defines the SVG namespace.

SVG's <circle> is used to create a circle. The cx and cy properties define the x and y coordinates of the center of the circle. If these two properties are omitted, the dot will be set to (0, 0). The r attribute defines the radius of the circle.

The stroke and stroke-width properties control how the shape's outline is displayed. We set the circle's outline to 2px wide, with a black border.

fill property sets the color within the shape. We set the fill color to red.

The closing tag closes the SVG element and the document itself.

Note: All open tags must have closing tags!