SVG Technical Investigation

Scalable Vector Graphics are just beginning to be available on the web. This page explains what they are and how to create them. If you have the plugin loaded, you will see the examples below.

Overview

The web was originally designed with technical documents in mind, and most technical documents involve diagrams of one kind or another. Up until now we've been forced to use bitmap images to represent pictures on the web. These are fine for photographs and the like, but they have a few drawbacks:

These drawbacks can be overcome by using pictures stored as a series of vectors. These can be concisely described, scale well, print well and can be modified easily. Many drawing packages work using vectors and store their diagrams in vector format, but these formats are proprietary and varied.

For a while, the World Wide Web Consortium has been writing up a standard for scalable vector graphics on the web, using a text format with XML syntax. Plugins are now becoming available for some browsers to view these files, and SVG is set to become more and more popular as time goes on. Firefox now includes SVG rendering in its basic set of abilities. For IE7 you'll still need to use a plugin.

How to Use Them

SVG diagrams can be embedded into HTML, or referred out to separate files, like images currently are. They are written in text format, in XML, and so should be editable using any text editor.

The svg file itself is text. It has a header to say that it is XML and to identify its document type definition, then it has the drawing insructions, surrounded by <svg> and </svg>.

Drawing Shapes

You can draw rectangles, circles, ellipses, lines and polygons using SVG. These are added as XML elements, with positions and sizes as attributes and colours and shading as styles (using CSS). The coordinate system is determined by the <svg> element, which can have a viewBox attribute specifying the left, top, right and bottom coordinates. Here is a blue box inside such a viewBox:

<svg viewBox="0 0 100 100">
<rect x="20" y="20" width="60" height="60" style="fill:blue;stroke:yellow;"/>
</svg>

Other shapes can be drawn as well, with styles giving colour, rounded edges, transparency and so on. Polygons (called paths) are drawn using a sequence of commands, including M for move to, L for draw line and Z to finish:

<svg viewBox="0 0 100 100">
<path d="M 10 10 L 50 30 L 90 10 L 50 80 z" 
 style="fill:red;stroke:yellow;stroke-width:5;"/>
</svg>

<svg viewBox="0 0 100 100">
<text style="fill:red;" y="20" x="10">some text</text>
</svg>

Effects

A powerful set of effects can be applied to the graphics in SVG. Among the most simple are gradient fills. A fill can be defined as going from one colour to another.

<svg viewBox="0 0 100 100">
<defs>
    <linearGradient id="change" y1="0" y2="100">
	<stop offset="0" style="stop-color:yellow"/>
	<stop offset="1" style="stop-color:blue"/>
    </linearGradient>
</defs>

<path d="M 10 10 L 50 30 L 90 10 L 50 80 z" 
 style="fill:url(#change);stroke:yellow;stroke-width:5;"/>
</svg>

Much more can be done with SVG. Various filters can be added to images, bitmap images can be included, text can be made to follow curved paths, fonts can be embedded, graphics can be animated using javascript and objects can have anchors out to other web pages. To see some of these, visit the sites below. For the rest, just wait and see how the web develops.

Finally, here's an example from the Firefox samples page of what is possible in SVG:

Technical Investigations - SVG

Overview

How to Use Them

Drawing Shapes

Effects

More

Links