SVG Example
SVG is written in XML.
SVG Example
The following example is an example of a simple SVG file. SVG files must be
saved with an .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 (only for SVG-enabled
browsers)
(To view the SVG source, open the example and right-click in the example
window. Select "View Source".)
Code explanation:
The first line contains the XML declaration. Notice the standalone attribute!
This attribute specifies whether the SVG
file "stands alone", or contains a reference to an external file.
standalone="no" means that the SVG document has a reference to an external
file - in this
case, the DTD.
The second and the third line refer to the external SVG DTD. The DTD is located
at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides
at the W3C and it contains all allowable SVG elements.
The SVG code begins with the <svg> element, which consists of the
opening <svg> tag and the closing </svg> tag. This is the root element.
The width and height attributes set the width and height of the SVG document.
The version attribute defines the SVG version to be used and the xmlns attribute
defines the SVG namespace.
The SVG <circle> element is used to create a circle. The cx and cy attributes
define the x and y coordinates of the center of the circle. If cx and cy are
omitted, the circle's center is set to (0, 0). The r attribute defines the
radius of the circle.
The stroke and stroke-width attributes
control how the outline of a shape appears. We set the outline of the circle to
a 2px wide, black "border".
The fill
attribute refers to the color inside a shape. We set the fill color to
red.
The closing </svg> tag closes the root SVG element and the document.
Note: All opening tags must have closing tags!
| 
