We have seen how the <defs> and <style> elements can contain definitions that can later be referenced multiple times for various elements. Similarly, the <use> element can also define an SVG element or object that can then be referenced for multiple instantiations in an SVG document.

One feature of SVG is that it supports the W3C DOM standard. This means that, using a language such as JavaScript, you can manipulate the contents of an SVG document on the fly. In the browser, each distinct part of the SVG document becomes a "node" in a "tree." Using JavaScript, you can modify a node, remove it, change its position in the tree, or simply add new nodes. This is a key concept to developing dynamic SVG documents. Consider this simplified SVG document:

<svg>
<rect id="box" x="0" y="0" width="145" height="70" style="fill:none"/>
<g id="contents">
<circle cx="10" cy="10" r="50" style="fill:red"/>
<text x="23" y="45">ABC!</text>
</g>
</svg>

The document tree for this is shown here, with each blue dot representing one node in the tree. Some nodes, such as those for the <g> and <text> tags, contain child nodes, while others don't.

We've already seen some examples of accessing nodes in this document tree using JavaScript. In particular we've used the root SVG object's getElementById() method to retrieve the node object for a named element. We've also used briefly the XML Core DOM method getFirstChild() to retrieve the text node of a <text> element.

In this tutorial, we examine other methods to move nodes around and to insert new nodes in the tree. In the example below, try clicking on the layered objects (sitting on top of the "pedestal") to send each object to the back of the group — that is, the object is moved higher in the document tree, and therefore behind the others.

In the image below, click your mouse on the layered elements set on top of the "pedestal":

When you click on an object in the image, its SVG element triggers an onclick event that calls the arrange_me() JavaScript function, for example:

<use id="zbigx" xlink:href="#bigx_def" onclick="arrange_me(evt)"/>

Inside the arrange_me() JavaScript function, once we have retreived the object's node (the event's target), and its container group (the object's parent node), we can move the object to the back of the group in two steps:

1. We remove the object from the document tree using the removeChild() method of the object's parent node:

groupnode.removeChild (target);

2. We re-insert the object into the document tree as the first child of the parent node, using the insertBefore() and getFirstChild() methods of the object's parent node:

groupnode.insertBefore (target, groupnode.getFirstChild());

Using similar concepts, you can move an object to the front, behind or in front of a specific object, or to another group entirely.

Now let's examine one way to add new elements to the SVG document. In the same example above, try clicking on any of the black icons at the bottom of the image. This creates a new copy of that icon randomly placed within the room -- that is, the icon object is duplicated and added to the document tree.

Here, when you click on one of the icons, its SVG element triggers an onclick event that calls the clone_me() JavaScript function, for example:

<use id="sun" xlink:href="#sun_def" onclick="clone_me(evt)">

Inside the clone_me() JavaScript function, once we have retreived the object's node (the event's target), we can duplicate the object and add the duplicate to the SVG document in several steps:

1. We "clone" the object using the cloneNode() method of the object's node:

var newnode = target.cloneNode(false);

2. The cloned node can be manipulated like any other SVG element. We can change its attributes and its style properties, for example:

newnode.setAttribute ('x', x);
newnode.setAttribute ('y', y);
newnode.getStyle().setProperty ('fill', fill);

3. Finally, we retrieve the node object for the "contents" group using the getElementById() method, and we add the cloned object to this group using the appendNode() method of the group's node:

var contents = svgdoc.getElementById ('contents');
newnode = contents.appendChild (newnode);

Of course, we are not restricted to duplicating existing objects. You can also create a new Node object from scratch and insert it into the document tree using any of the available methods.

Workflow: Internationalization