An Example of SVG

SVG is written using XML.

SVG Examples

The following example is a simple SVG file example. SVG files must be saved with the .svg extension:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

View Example (for browsers that support SVG only)

(To view the SVG source code, open this example, then right-click in the window. Select 'View Source Code'.)

Code Explanation:

The first line contains the XML declaration. Note the standalone attribute! This attribute specifies whether this SVG file is 'standalone' or contains references to external files.

standalone="no" means that the SVG document will reference an external file - here, it is the 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'. The 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 attributes can set the width and height of this SVG document. The version attribute can define the SVG version used, and the xmlns attribute can define the SVG namespace.

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

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

The fill attribute sets the color inside the shape. We set the fill color to red.

The closing tag is used to close the SVG element and the document itself.

Note:All opening tags must have corresponding closing tags!