Animating SVG – Making the Right Uses of SMIL and DOM Scripting

A basic understanding of DOM scripting (tree structure, accessing and updating nodes, loop constructs) and/or a basic knowledge of SVG would be a plus, but not required. For a few years now, illustrated by Macromedia Flash’s success, vector graphics have been embraced by designers on the web. Besides scalability and crispness, vector graphics gained popularity thanks to a higher level of interactivity and smooth animation capabilities.

Today, SVG, a W3C-approved XML vector graphics format, brings a new dimension to web-oriented vector graphics with a heap of features, some derivated from vector graphics’ very nature, some from its XML nature. SVG components can be animated, and such tasks can be accomplished by an SVG developer in two distinct ways by two inherited XML technologies: the DOM (Document Object Model) and SMIL (Synchronized Multimedia Integration Language). It is interesting to note that these two technologies do not serve the same purpose, and can be used in different situations or together.

The recent SMIL 2.0 specification boasts an animation module included in SVG. SMIL Animation animates SVG in a declarative manner, defining tags such as <animate /> or <set /> aimed at updating SVG attributes on a given timeline. Being XML-based, SMIL Animation allows for a smooth semantic integration with SVG, this has the benefit of preserving a solid document structure for post-processing and human readability. SMIL Animation is time-based, with an independent timeline for each animated attribute, and its syntax allows for some basic interactivity and timeline relativity.

Another way to animate SVG is to repeatedly alter its DOM during a given period of time. This technique does not offer the XML advantages (semantics, structure, readability) of SMIL Animation. Also, it is very much different since it implies a frame-based approach. Still, DOM scripting offers an exhaustive list of interactivity features, allowing event bubbling, mouse position capturing, animation pause/play, zooming, etc. Another benefit is the possibility to adopt a more programmatic approach in order to complete complex animations defined by updated variables and such.

This paper aims at providing developers an example-rich presentation of the subtleties of SMIL Animation and DOM scripting to help making the right decisions when creating rich, animated and interactive SVG compositions.