Published on 2003-03-01 by John Collins. Please follow me on Twitter for more:
Note: In order to view the examples used in this tutorial, you will need to have the Adobe SVG Viewer 3.0 installed.
SVG (Scalable Vector Graphics) is an XML application designed by the World Wide Web Consortium for the creation of vector graphics. The current specification, version 1.0, is not supported by any browser, hence the need for the Adobe plugin, but with the weight of the W3C behind it, SVG is likely to become a fully-fledged standard in the not to distant future with native browser support.
In this basic introduction to the format, I will show you how to set up an SVG document, how to draw some basic shapes, how to apply CSS to your vector creations, and finally how to embed an SVG document in a HTML file.
Every SVG document begins with the SVG root element, svg. This element has many different attributes, the most commonly used being the width and height attributes for setting the dimensions of the canvas. If no width and height is specified, the x and y axis are thought to be infinite.
Below is an example of an SVG document that draws a circle, notice the circle attributes: r for radius; cx for the x-coordinate of the centre of the circle; and cy for the y-coordinate of the centre.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="150" cy="150" r="100" fill="red"/> </svg>
Now, using the same document syntax as the previous example, here are some further examples of the various shapes that SVG supports:
x and y coordinates are for the upper left corner of the rectangle.
<rect width="50" height="200" x="125" y="50" fill="green"/>
For the ellipse, we have a radius for the x-axis (rx), and one for the y-axis (ry).
<ellipse cx="150" cy="150" rx="130" ry="50" fill="blue"/>
For the line, we simply supply the coordinates for each end point, (x1,y1) and (x2,y2).
<line x1="150" y1="150" x2="130" y2="50"/>
At this stage you might be forgiven for thinking that everything in SVG is coloured black, so next I will show you how CSS can be applied to liven things up a little.
As SVG is under the guidance of the W3C and it is an XML technology, it is fully compatible with CSS. To demonstrate this, we will go back to our ellipse example before and add some colour and a border with the following modified line:
<ellipse cx="150" cy="150" rx="130" ry="50" style="fill:#AFBCC7; stroke:#646464; stroke-width:3px;"/>
The attribute 'fill' refers to the background colour, and 'stroke' refers to the border width and colour. There are many more CSS formatting methods that work with SVG, it is worth experimenting with those that you know.
To embed an SVG document in an HTML page, we use HTML's embed tag as the next example shows:
<html> <head> <title>Example Six: Embedding SVG</title> </head> <body> <embed width="300" height="300" src="ex5.svg" align="left" pluginspage="http://www.adobe.com/svg/viewer/install/"> </body> </html>
Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2003, but is left here for archival purposes. Thankfully most modern browsers now support SVG natively, and the Adobe SVG plugin is no longer required or supported.