Tip: Bring Scalable Vector Graphics to life with built-in animation elements

Create and combine a range of animation effects

Scalable Vector Graphics (SVG) is an XML-based language for drawing two-dimensional graphics. Sound dull? Far from it. SVG has many exciting features available to it such as transformations, alpha masks, filter effects, and animation. This tip provides working examples to show you how to apply the five flavours of SVG animations to your SVG documents.

Share:

Brian Venn (vennb@uk.ibm.com), Software Tester, IBM Business Integration, Hursley Park

Photo of Brian John VennBrian Venn joined IBM in October 2000, following 3 years at British Aerospace Defence Systems. He graduated from Southampton University with a degree in Astrophysics, and is certified in DB2 and software testing. He is currently working in test at Hursley Park. This is his third developerWorks article, and he continues to get better looking with each article he writes. You can reach Brian at vennb@uk.ibm.com.



18 June 2003

Also available in Japanese

Scalable Vector Graphics (SVG) animation uses Synchronized Multimedia Integration Language Level 2 (SMIL -- pronounced "smile"), an HTML-like language that was developed to enable simple authoring of interactive audiovisual presentations. In SMIL the start and end values of a property are specified, along with a duration. These are passed to a viewing program of some sort, such as RealPlayer, which handles the animation.

This tip will be helpful if you already have a basic understanding of SVG. The developerWorks tutorial "Introduction to Scalable Vector Graphics" is an excellent place to start .

Note: To view SVG documents in this tip, you need an SVG viewer which can be found (along with a .zip file that includes all associated files) in Resources.

A word of caution

SVG viewers are getting better all the time, but are still somewhat in their infancy. Although they work well as specified and the animations described here are smoothly rendered to a point, if you try to, for example, re-create the animated film "Toy Story" in SVG animation, the output will be slow and jerky. So don't try to do too much.

Five flavours of animation

SVG has five built-in animation types:

  • animate
  • animateMotion
  • animateTransform
  • animateColor
  • set

animate

I'll start with the appropriately named animate:

In Listing 1, I have a drawn a circle centered at x=250,y=250. The animate property works by changing a named property from one value to another over a declared amount of time. Here, the radius of the circle will change from 1 to 50 over 5 seconds. repeatCount sets how many times the animation is to be repeated, and can be any numeric value greater than 0, including "indefinite". Click to see this animation.

Note: To view SVG documents, you need an SVG viewer, which can be found (along with a .zip file that includes all associated code files) in Resources.

Listing 1. Animating a circle
<svg>
  <circle cx="250" cy="250" r="1" >
    <animate attributeName="r" from="1" to="50" dur="5s" 
                  repeatCount="indefinite" />
  </circle>
</svg>

Any property of an SVG object can be changed in this manner. For example, if I change the animate line to read:

<animate attributeName="cx" from="1" to="250" dur="5s"
          repeatCount="indefinite" />

then the circle slides in from the left to the right.

You can combine multiple animate elements on a single SVG object to produce a particular effect. In Listing 2, the circle's x and y coordinates and its radius are all animated simultaneously.

Listing 2. Animating multiple properties
<svg>
  <circle cx="250" cy="250" r="1" >
    <animate attributeName="r" from="1" to="50" dur="5s" 
              repeatCount="indefinite" />
    <animate attributeName="cx" from="1" to="250" dur="5s" 
              repeatCount="indefinite" />
    <animate attributeName="cy" from="1" to="250" dur="5s" 
              repeatCount="indefinite" />
  </circle>
</svg>

This time the circle slides in from the top left to the bottom right, and grows as its does so. Click to see this.

You can animate more than the simple elements like size and shape. Take the following example:

Listing 3. Animating a gradient
<svg>
  <defs>
    <radialGradient id="blueradial">
      <stop offset="0" style="stop-color:white;"/>
      <stop offset="100%" style="stop-color:blue;">
        <animate attributeName="offset" from="1%" to="100%" dur="5s" 
                  repeatCount="indefinite"/>
      </stop>
    </radialGradient>
    </defs>

    <circle cx="250" cy="250" r="200" style = "fill: url(#blueradial);"/>
</svg>

In Listing 3 the blue gradient's stop offset property grows during the 5 seconds, causing the white gradient to grow outwards and produce an explosion effect. Click to see this.


animateMotion

With the animateMotion element, you can move any SVG element over a specified path.

Listing 4. Motion path example
<svg>
  <!-- Draw the path -->
  <path d="M50,125 C 200,25 250,525, 400, 125" style="fill: none; 
            stroke:black;"/>
  <rect width="25" height="25" style="fill: cyan; stroke: red;" >
  <!-- Move the rectangle along the path. -->
    <animateMotion path="M50,125 C 200,25 250,525, 400, 125" dur="6s" 
              fill="freeze"/>
  </rect>
</svg>

In Listing 4 the exact path that the rectangle is to follow is drawn first so that you can see where it will go. The rectangle is then drawn and moved through the path. At the end of the animateMotion element is the fill="freeze" property; this property is available to all animate elements and instructs the SVG viewer that when the animation has finished, the element is to be frozen in its final position. Click to see this animation.

When it's viewed, the orientation of the square doesn't change as it moves through the path. The top left-hand corner of the rectangle follows the path, since that is where the rectangle's width and height are drawn from.

It is possible to tilt the X-axis of the object as it moves through its path by adding the rotate="auto" attribute to the animateMotion element. Click to see this. You can also set the the rotate element to a specific value, so if you wanted the SVG element to be rotated 45 degrees throughout its motion path, you would use rotate="45".

In Listing 4, the motion path that the square follows is included twice. You can avoid this duplication by using the mpath element, as follows:

Listing 5. mpath example
<svg>
  <path id="smoothCurve" d="M50,125 C 200,25 250,525, 400, 125" 
            style="fill: none; stroke:black;"/>
  <rect width="25" height="25" style="fill: cyan; stroke: red;" >
    <animateMotion dur="6s" fill="freeze" rotate="auto">
      <mpath xlink:href="#smoothCurve"/>
    </animateMotion> 
  </rect>
</svg>

Listing 5 produces the exact same output, but is more efficient. mpath is also useful when you want to animate multiple elements over the same motion path.

Viewing SVG content

To view the source code for an SVG document, right-click on the SVG document and select View Source.


animateTransform

SVG includes five types of transforms that can be performed:

  • translate
  • scale
  • rotate
  • skewX
  • skewY

Animate these using animateTransform.

Listing 6 . animateTransform example
<svg>
  <text x="5" y="15" style="font-size: 8pt;">animateTransform example
    <animateTransform attributeName="transform" type="scale" from="1" 
              to="5" begin="1" dur="4s" fill="freeze"/>
  </text> 
</svg>

This time you are animating a text element. The scale property increases from 1 to 5, so the text ends up being five times bigger. Click to see this.

Also note the use of the begin attribute. This tells the SVG viewer when to begin the animation.

You can also combine multiple transformation animations in the same element. Listing 7 includes both the scale and rotate transformations.

Listing 7. Animating multiple transforms
<svg> 
  <text x="50" y="50" style="font-size: 8pt;">animateTransform Example
    <animateTransform attributeName="transform" type="scale" from="1" 
              to="5" begin="0" dur="4s" fill="freeze" additive="sum"/>
    <animateTransform attributeName="transform" type="rotate" from="0"  
              to="30" begin="0" dur="4s" fill="freeze" additive="sum"/>
  </text> 
</svg>

Click to see this. When combining multiple transformations into a single element, you must set the additive attribute to sum as shown in Listing 7; otherwise, the last transformation listed overrides any previous transformations. If it had been left out of Listing 7, only the rotate transformation would have been performed.


animateColor

animateColor changes colors from one value to another.

Listing 8. animateColor example
<svg>
  <circle cx="250" cy="250" r="200" style="fill:red; stroke:blue; 
            stroke-width:5">
    <animateColor attributeName="fill" from="red" to="green" dur="5s" 
              fill="freeze"/>
  </circle>
</svg>

Click to see this. Any combination of the various ways of setting the colors can be used. For example, you could replace red with ##ff0000 and green with rgb(0,255,0) and the result would be the same.

It's also possible to combine multiple color changes to achieve a color cycle effect. In Listing 9, the circle's color changes through the spectrum from red to indigo (click to see this):

Listing 9 : Color cycling
<svg>
  <circle cx="250" cy="250" r="200" >
    <animateColor attributeName="fill" from="rgb(100%,0%,0%)" 
              to="orange" begin="0s" dur="5s"/>
    <animateColor attributeName="fill" from="orange" to="yellow" 
              begin="prev.end" dur="5s"/>
    <animateColor attributeName="fill" from="yellow" to="#00FFFF" 
              begin="prev.end" dur="5s"/>
    <animateColor attributeName="fill" from="#00FFFF" to="blue" 
              begin="prev.end" dur="5s" />
    <animateColor attributeName="fill" from="blue" to="indigo" 
              begin="prev.end" dur="5s" fill="freeze" />
  </circle>
</svg>

Note the various ways in which the colors are set. With the multiple color changes, the color transformations need to be scripted so that they move through the spectrum in the correct order. To achieve this effect, use the begin="prev.end" attribute. This instructs the viewer to start the next animation when the previous animation has ended. It can be used with any animation element when scripting multiple animations on the same object.


set

The set animation type sets a property or attribute to a value without performing the change over time. Instead, the value is immediately set to the value given. In Listing 10, after 3 seconds the circles radius is set to 50 for 3 seconds. When the 3 seconds is up, the radius returns to it original value. Click to see this.

Listing 10. set example
<svg>
  <circle id="circleSetExample" cx="250" cy="250" r="200"/>
  <set id="animIdforSet" xlink:href="#circleSetExample" 
            attributeName="r" to ="50" begin="3s" dur="3s" />
</svg>

In this example (Listing 10), the set animation element is contained separately from the circle element; instead, the set animation is linked to the circle through the xlink:href attribute. Which way you choose to do this is a matter of personal preference, although this method does allow you to keep all your animation elements together.


Bringing it all together

All of the elements described can be combined to produce various effects. Here are three animations that use a variety of the animation effects described in this article.

  • Sunset (5K) -- The sun sets behind the horizon as clouds slowly drift past. As the sun sets, the sky darkens and the moon and stars appear. The sun and cloud movements are achieved by using animate on the x and y coordinates. As the sun sinks over the horizon, animateColor is used to change the sky's color, and the moon and the stars fade in by animating their opacity.
  • Rainbow (4K) -- The spinning effect is achieved by animating the stroke-width and stroke-dashoffset of each color in the rainbow.
  • Matrix (8K) -- The vertical scrolling effect is created by moving a series of rectangles across the text with different timing properties and varying the opacity.

Of special note are the file sizes of these animations, the largest being a tiny 8K in size. Examine the source code for these to see how they were scripted.


Download

DescriptionNameSize
Code samplex-tipsvganim.zip---

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into XML on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML
ArticleID=12286
ArticleTitle=Tip: Bring Scalable Vector Graphics to life with built-in animation elements
publish-date=06182003