Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM

Example provided by Juliana Williams and Andreas Neumann

This tutorial introduces how one can manipulate SVG documents using ECMAScript (Javascript) and DOM (Document Object Model). The tutorial is meant to give beginners an easy start, it is not intended to be a complete reference. It does not deal with all of the available methods. For more information see the resources below.

The DOM is a language-neutral API (Application Program Interface) that allows any programming language to access, manipulate, create, and delete elements and the document tree. DOM manipulations work the same way in all W3C/XML documents and are not SVG specific. If you know how to manipulate HTML documents using ECMAScript and the DOM, it will be easy for you to manipulate SVG documents. ECMAScript is the most popular scripting language in web browsers and SVG Viewers, hence we use it for our tutorials.

The following code shows a very simple SVG document containing only a rectangle and a text element.