Let us dive straight in with a simple example. Take a look at the following code.
<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg>
Copy the code and paste it in a file, demo1.svg. Then open the file in a browser. It will render as shown in the following screenshot. (Firefox users: click here)
The rendering process involves the following:
- We start with the
<svg>
root element:- A doctype declaration as known from (X)HTML should be left off because DTD based SVG validation leads to more problems than it solves.
- Before SVG 2, to identify the version of the SVG for other types of validation the
version
andbaseProfile
attributes should always be used instead. Bothversion
andbaseProfile
attributes are deprecated in SVG 2. - As an XML dialect, SVG must always bind the namespaces correctly (in the xmlns attribute). See the Namespaces Crash Course page for more info.
- The background is set to red by drawing a rectangle
<rect>
that covers the complete image area. - A green circle
<circle>
with a radius of 80px is drawn atop the center of the red rectangle (center of circle offset 150px to the right, and 100px downward from the top left corner). - The text "SVG" is drawn. The interior of each letter is filled in with white. The text is positioned by setting an anchor where we want the midpoint to be: in this case, the midpoint should correspond to the center of the green circle. Fine adjustments can be made to the font size and vertical position to ensure the final result is aesthetically pleasing.