SVG examples

Simple SVG examples

A simple SVG graphic example:

Here is the SVG file (saved with the extension SVG SVG file):

SVG code analysis:

The first line contains the XML declaration. Note that the standalone property! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file.

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

The second and third line references the external SVG DTD. The DTD is located in "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD is located W3C, containing all allowable SVG elements.

SVG code <svg> element start, including turning <svg> tag and the closing tag </ svg>. This is the root element. width and height attributes can set the width and height of this SVG document. version attribute defines the SVG version used, xmlns attribute defines the SVG namespace.

The SVG <circle> is used to create a circle. cx and cy attributes define the center of the circle x and y coordinates. If you ignore these two properties, then the dot is set to (0, 0). r attribute defines the radius of the circle.

stroke and stroke-width attribute controls how the outline of the shape. We outline of the circle is set to 2px wide, black borders.

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

Closing tag closes the root SVG element and the document itself.

Note: All opening tags must have closing tags!