SMIL animations embedded in SVG

Since its first public release in 1997 (6), SMIL or Synchronized Media Integration Language, has seen a relatively slow adoption rate, in part because of the widespread use of the proprietary methods used within Flash animation from Macromedia. Apple had introduced support for it in QuickTime in January of 2000 and in June of that year, Microsoft introduced some support for it in Internet Explorer 5.5 (through what Microsoft calls “TIME”), but it was not until September 2001 that it became a W3C recommendation. This suggests that the close integration of SMIL within SVG together with the web support offered through the Adobe SVG plugin for Microsoft Internet Explorer may have encouraged interest in SMIL from avenues other than the traditional multimedia interests. While SMIL is being put to use for complex multimedia projects involving story-boarding, and integration of audio and video clips, much of this is outside the focus of this paper. From the vantage point of those interested in two-dimensional vector graphics, SMIL allows simple attributes of objects (HTML or SVG) to be changed smoothly over specified value ranges and durations, with much of the complexity of programming being handled by SMIL itself. 

Animation is typically carried out in web pages either using Flash or by using the JavaScript window method setTimeout() to repeatedly reinvoke (seemingly recursively) an update of the screen in which attribute has changed: typically the file displayed in an image tag or the x and y coordinates of an absolutely positioned <div> tag. In the latter case, in every refresh of the screen (happening every dT units of time) we move the <div> dX pixels horizontally and dY pixels vertically. The author of such an animation must guess the screen refresh rate of a typical visitor’s client software and then adjust dT, dX, and dY accordingly so that dX and dyY are kept as small as possible subject to the constraint that the browser can do all it needs to in dT units of time. That is, considerable guesswork in needed on the part of the author as to what will produce a smooth animation. Also setting up multiple independent animations running in parallel has been rather notorious for it difficulty. In contrast, SMIL lets the browser handle all these decisions.

As of September 2005, the Opera browser (version 8.02) and Internet Explorer (6+, with Adobe plugin) support SMIL with SVG. Mozilla/Firefox 1.5 does not yet, though developments seem to be moving swiftly in that environment.

The simplest application of SMIL to SVG is through taking a particular numerical attribute of an SVG object, like the s-radius of an ellipse and varying that over some specified period of time.

SVG code illustration
<ellipse cx="100" cy="75" rx="100" ry="50" stroke="black" style="fill:none">
<animate attributeName="rx" dur="2s" from="20" to="100" repeatCount="indefinite"/>
changing the radius of an ellipse

In the example above, the x-radius of the ellipse in which the <animate> tag is enclosed will vary from 20 to 100 over a 2 second period, revert to the start value (rx=”100”), and then repeat this process indefinitely. The result is an oval that grows gradually in the horizontal direction for two seconds. The oval then appears to snap back to its narrow form to begin gradual growth again.

Often times we may wish an animation to oscillate (e.g., 12345-432-12345) rather than to repeat (12345-12345); and we may wish to concurrently modify more than one attribute of an object. SMIL allows both of these as shown in the following example:

SVG code illustration
<ellipse cx="150" cy="75" rx="100" ry="50" stroke="red" style="fill:none">
<animate attributeName="rx" dur="4s" values="10; 150; 10" 
keyTimes="0; .5; 1" repeatCount="indefinite"/>
<animate attributeName="ry" dur="7s" values="80; 10; 80" 
changing both radii of an ellipse

Here, we have chosen to manipulate both the vertical and horizontal radii of the ellipse, but with different periodicity, such that the two oscillations will resume synchrony every 4x7=28 seconds.

Instead of using simple “from” and “to” attributes of the <animate> tag, we’ve chosen “keyTimes” which in this case allow the animation to oscillate from rx=10 to rx=150 and back to rx=10 over a period of 4 seconds, with the arrival at rx=150 happening exactly 50% of the way through the 4 second interval. Notice that the use of the keyTimes attribute in this example is actually unneeded, since the duration is divided into equal intervals. The animation of the "ry" attribute is done without the use of the keyTimes attribute as an example.