SVG is suddenly an important web technology. Let's take a look at using SVG with nothing but code.
SVG is suddenly an important web technology - arguably more important that the new HTML5 Canvas. Modern browsers now fully support it and Microsoft has chosen it for vector graphics in WinRT apps. SVG was designed for non-programmers and it can be added to web pages using nothing but static tags. However there isn't much information about using SVG from code - this is where this article comes in.

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:

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.

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.