Animation (SMIL in SVG)

By mbystedt on Feb 27, 2014, 8:12:37 PM

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)

<rect id="ani1" x="10" y="10" width="80" height="55" rx="10" ry="10" fill="blue" >
  <set begin="click" attributeName="fill" to="yellow" />
</rect>

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")

See Animation Attributes for the attributes to use with these elements. For the complete picture on how all the attributes work, check out the SMIL standard page (external).

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.

<set begin="click" attributeName="fill" to="yellow" />

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.

The SMIL standard (external) has the complete description of each attribute but my animation attributes appendix is a good quick reference.

Example 2. Click to begin. (Download)

<rect id="pulser" x="40" y="25" width="120" height="50" rx="10" ry="10" fill="blue" stroke="black" filter="url(#closeDropShadow)" >
   <animate begin="mouseover" end="mouseout;click" dur="2s" repeatCount="indefinite" attributeName="fill" from="blue" values="lightblue; blue; lightblue" fill="freeze" />
   <animate begin="click" dur="1.0s" repeatCount="5" attributeName="fill" values="red; peachpuff; lightgoldenrodyellow; plum; white; red" fill="freeze" />
   <animate begin="click+4.5s" dur="2.0s" attributeName="y" calcMode="linear" values="0; 1; 2; 4; 8; 16; 32; 64; 128; 256;" additive="sum" fill="freeze"  />
   <set begin="click+6.4s" attributeName="opacity" to="0" fill="freeze"  />
   <set begin="click+12.0s" attributeName="fill" to="blue" />
   <set begin="click+12.0s" attributeName="opacity" to="1" />
</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)

<animateMotion  begin="startButton.click" dur="10s" repeatCount="1" rotate="auto" fill="freeze" >
   <mpath xlink:href="#myAniPath" />
</animateMotion>

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. See: Coloring

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)

<animateTransform begin="startButton.click" attributeName="transform" 
  type="translate" from="10,10" to="140,180" dur="5s" additive="sum"
  fill="freeze" xlink:href="#snow" />
 
<animateTransform begin="startButton.click" attributeName="transform" 
  type="rotate" from="0" to="270" dur="5s" additive="sum"
  fill="freeze" xlink:href="#snow" />

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)

<rect id="ani3" x="210" y="10" width="80" height="55" rx="10" ry="10" fill="blue" >
  <set begin="ani1.click+2.0s" attributeName="fill" to="yellow" />
</rect>

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.