17 Animation

17.1 Introduction

The Web is a dynamic medium and that SVG needs to support the ability to change vector graphics over time. SVG documents can be animated in the following ways:

• Using the SVG DOM. The SVG DOM conforms to key aspects of Document Object Model (DOM) Level 1 Specification and Document Object Model (DOM) Level 2 Specification. Every attribute and style sheet setting is accessible to scripting, and SVG offers a set of additional DOM interfaces to support efficient animation via scripting. As a result, virtually any kind of animation can be achieved, including motion paths, color changes over time, and transparency effects. The timer facilities in scripting languages such as ECMAScript can be used to start up and control the animations. (See example below.)
• SVG documents can be components within SMIL (Synchronized Multimedia Integration Language) documents.
• (ED NOTE: Additional SVG animation facilities are still under discussion. For example, it is expected that future versions of SMIL) will be modularized and that components of it could be used in conjunction with SVG to achieve animation effects.)

17.2 Animation Example Using the SVG DOM

The following example shows a simple animation:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG June 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990625.dtd">
<svg width="4in" height="3in" 
     fit-box-to-viewport="0 0 400 300"
     onload="StartAnimation()" >

  <defs>
    <script><![CDATA[
      var timer_increment = 50.
      var max_time = 10000
      var text_element
      StartAnimation() {
        text_element = document.getElementById("TextElement");
        ShowAndGrowElement(0);
      }
      ShowAndGrowElement(timevalue) {
        timevalue = timevalue + timer_increment
        if (timevalue > max_time)
          timevalue = timevalue - floor(timevalue/max_time) * max_time

        // Scale the text string gradually until it is 20 times larger
        scalefactor = (timevalue * 20.) / max_time
        text_element.SetAttribute("transform", "scale(" + scalefactor + ")")

        // Make the string more opaque
        opacityfactor = timevalue / max_time
        text_element.getStyle().setProperty("opacity", "opacity:" + opacityfactor, "")

        // Call ShowAndGrowElement again <timer_increment> milliseconds later.
        setTimeout("ShowAndGrowElement(" + timer_increment + ")")
      }
    ]]></script>
  </defs>

  <g transform="translate(50,300)" style="fill:red; font-size:10">
    <text id="TextElement">SVG</text>
  </g>
</svg>

Download this example

The above SVG file contains a single graphics element, a text string that says "SVG". The animation loops continuously. The text string starts out small and transparent and grows to be large and opaque. Here is an explanation of how this example works:

• The <svg> element's width and height attributes indicate that the document should take up a rectangle of size 4inches by 3inches. The fit-box-to-viewport attribute indicates that the initial coordinate system should have (0,0) at its top left and (400,300) at its bottom right. (Thus, 1 inch equals 100 user units.) The onload="StartAnimation()" attribute indicates that when the document has been fully loaded and processed, then invoke ECMAScript function StartAnimation().
• The <script> element defines the ECMAScript which makes the animation happen. The StartAnimation() function is only called once to give a value to global variable text_element and to make the initial call to ShowAndGrowElement(). ShowAndGrowElement() is called every 50 milliseconds and resets the transform and style attributes on the text element to new values each time it is called. At the end of ShowAndGrowElement, the function tells the ECMAScript engine to call itself again after 50 more milliseconds.
• The <g> element shifts the coordinate system so that the origin is shifted toward the lower-left of the viewing area. It also defines the fill color and font-size to use when drawing the text string.
• The <text> element contains the text string and is the element whose attributes get changed during the animation.