SVG Animation - Animating SVG Documents - Print and Web Publishing SVG Viewer

Animating SVG Documents

The easiest way to animate something in SVG is using SMIL. This is yet another standard from W3C that SVG uses. SMIL (pronouced 'smile') stands for Synchronized Multimedia Integration Language. It is a highly adaptable animation langauge which is extended and adapted for SVG. SMIL is very convient but it constrains you to how it wants to work.

SMIL Animation

A SMIL animation element in SVG associates event(s) with a change or series of changes to an attribute of the SVG object they are linked to. The next example shows the animation element mouse events rectangles which change color when event occurs to it.

Example 1. Mouse events triggering animation. (Download)

Code 1. Code extract from example 1

The 'begin' attribute is a semi-colan seperated list of events (or times) to start the animation at. To start or end on a event on an object other than the direct parent element the id of the source of the event must be added. (Example: begin="object.click")

Animation Element - set

This is a short-hand version of the 'animate' element which always has an animation duration of 0s. Any duration given to this tag will be ignored and the 'to' value applied immediately when a begin event is triggered.

Example of the 'set' animation element.

Animation Element - animate

This is the main animation element. All animation but motion on a path and animated transforms can be done with this element. By default, the start value (initial or 'from' attribute) and end value ('to' or 'values' attribute) is linearly interpolated between.

Example 2. Click to begin. (Download)

</rect>

Code 2. Examples of the 'animate' animation element.

Animation Element - animateMotion

This element is an addition to the SMIL standard to allow you to animate an object along a path.

Example 3. Click the green box to animate on the path. (Download)

Code 3. Example of the 'animateMotion' animation element.

Animation Element - animateColor

This element is included for compatibility with the SMIL standard. It is identical to the 'animate' element except that the 'to', 'from' and 'by' attributes must be colors.

Animation Element - animateTransform

Since the other animation elements only animate a single attribute, a different way to animate transformations is required. To animate a transformation you use the animateTransform element which adds a 'type' attribute so that you can specify what type of transformation you are animating.

Note: You still need to specify the 'attributeName' attribute with this element or no animation occurs.

Example 4. Click the green box to animate the snowflake. (Download)

Code 4. Example of the 'animateTransform' animation element.

The above example uses the attribute 'additive' with the value 'sum' so the second animation doesn't replace the first. The default value of 'replace' would result in the 2nd animation overwriting changes made to the 'transform' attribute by the 1rst animation.

Offset Timing

Example 5. Offset timing from an event.(Download)

Code 5. Example of offset timing.

Javascript Animation

The second way to animate in SVG is using the built in scripting language, ECMAScript (Javascript), and doing the animation by using a timer and directly changing the values. The animated 3D cube works by computing new values for the polygons each time the timer fires.

Article Series

This article is part 1 of a 2 part series. Other articles in this series are shown below:

SVG Animation - Animating SVG Documents
SVG Animation - Animation Attributes

WiFiReview.com - your guide to the wireless world