Before you read on make sure that you know how SVG works with tags - see Getting started with SVG for HTML5

Let's take a look at using SVG with nothing but code, i.e. JavaScript.

Adding an SVG object

The first thing you need, if a web page is going to show vector graphics, is an SVG object. This is usually added using the tag:

<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="300" 
 height="300">
</svg>

This adds an SVG object to the DOM and you can add an id attribute so that you can retrieve it using the usual getElementById method:

<svg id="mysvg" 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="300" height="300">
</svg>
var svg=document.getElementById("mysvg");

Once you have the SVG object you can add other SVG graphics object to it using AppendChild in the usual way.

But, we promised SVG with no tags, so let's use code to create the SVG object. This is slightly more complicated than you might think because the SVG markup is XML including namespaces.

Notice that the SVG tag has two namespaces defined. To create an SVG object in code you need to use the XML DOM method createElementNS and specify the namespace as the first parameter:

var NS="http://www.w3.org/2000/svg";
var svg=document.createElementNS(NS,"svg");

Now we have an SVG object but we need to set its size:

svg.width=300;
 svg.height=500;

Finally add it to the HTML DOM in the usual way:

document.body.appendChild(svg);

You can put all of this into a function and package the creation of the SVG object. For example:

var SVG=function(h,w){
 var NS="http://www.w3.org/2000/svg";
 var svg=document.createElementNS(NS,"svg");
 svg.width=w;
 svg.height=h;
 return svg;
}

Now you can add an SVG object to the page using:

var svg=SVG(200,500);
document.body.appendChild(svg);

Add a rectangle

Now you have an SVG object, you can make use of it in a fairly standard way - create a graphics object, customise it and add to the SVG object. For the sake of a simple example, let's add a rectangle object - the methods are the same for any shape object.

You can do this using the standard XML DOM manipulation functions. For example to create a rectangle object you have to use the createElementNS method again:

var SVGObj=document.createElementNS(NS,"rect");

Once you have the shape object you can manipulate it using the standard attribute methods. For example:

SVGObj.setAttribute("height",h);

or

SVGObj.setAttributeNS(null,"height",50);

However, the SVG object maintains its own DOM and this exposes methods and properties directly on the object. The access is a little more complicated because it is a little more sophisticated. For example, to set the height you use:

SVGObj.height.baseVal.value=h;

The reason for baseVal is that the height property can be animated and there is an animVal that can be read to discover what the current animation value is. The final value part returns the raw value. You can also use valueAsString to get a string value and in a specified unit.

Some attributes are set through the Style property, for example:

SVGObj.style.fill="blue";

General rule for attributes

The general rules are that for a presentation attribute you use

style.attribute

and for a length you use

attribute.baseVal.value

If the attribute is an object in its own right then you simply refer to it and use the above rules for its attributes.

For a list you would use

list.baseVal.getItem(i)

It can be difficult to find good and easy to understand documentation so often a little trial and error is required.

A rectangle function

Putting all of this together we can now write a single function that returns a rectangle object of a given size and fill:

var rect=function(h,w,fill){
 var NS="http://www.w3.org/2000/svg";
 var SVGObj= document.createElementNS(NS,"rect");
 SVGObj.width.baseVal.value=w;
 SVGObj.height.baseVal.value=h;
 SVGObj.setAttribute("height",h);
 SVGObj.style.fill=fill;
 return SVGObj;
}

Direct animation

Now that we have a rectangle function we can add it to the SVG object to display it:

var r= rect(100,100,"blue");
svg.appendChild(r);

But where does it appear? The rectangle object has x and y properties that set its position but, as we haven't set either, it appears at (0,0).

As SVG is an object-oriented persistent vector drawing system, we can set the position of the rectangle after it has been added to the display, for example:

r.x.baseVal.value=10;
r.y.baseVal.value=20;

You are probably well ahead of me on the next step. As we can modify the position after the object has been added, it is trivial to animate it directly, i.e. without the use of the SVG animation facilities.

For example:

for(i=0;i<100;i++){
 r.x.baseVal.value+=1;
 r.y.baseVal.value+=1;
}

moves the rectangle 100 units diagonally. In most cases you won't be able to see this because it is too fast.

A better way is to use a timer to do the update.

For example we first create an animation function:

var animate=function(obj){
 obj.x.baseVal.value+=1;
 obj.y.baseVal.value+=1;
}

and then use it in a setInterval call:

setInterval("animate(r)",100);

The result is that the rectangle moves slowly down the diagonal.

You may ask, why bother when there is a full SVG animation facility? The answer is that under program control the animation can be much more sophisticated.

Where next?

Now that you have seen how to create and work with the SVG and simple graphics objects, the rest is just more of the same. If you want to make things browser-independent then you might like to try one of the standard SVG libraries such as Raphaël.

More information

Getting started with SVG for HTML5