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.
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.