Digging Animation

In order to view the SVG examples you will need Adobe's SVG viewer installed -- ED.

Introduction

The Web has been constantly evolving since it appeared about a decade ago. The days of plain text web sites are largely gone now and, among other things, vector graphics have become an increasingly common part of web pages. SWF, better known as the format used by Macromedia Flash, has become the medium of choice for the publication of high-octane all-singing, all-dancing presentations. However, SWF has its limitations, dynamic publishing being a big one. If you are reading this column, then you have probably already heard a little bit about the emerging XML vector graphics format called SVG. Today we will start our foray into the neat world of SVG animation.

Animation is a core feature of SVG. It is a large part of SVG's specification and is based on SMIL Animation. In fact, if you know about SMIL animation already then this article ought to be a doodle or a nice little bit of review. You might want to have the SVG Animation spec chapter handy before we start. My mission in this article is to show you how to recreate one of those nifty gravity animation effects that people gaze at for hours. SVG will certainly not make this kind of animation any more useful than its implementation in Flash, but it is certainly very instructive to create. For a little taste of what we're going to create, have a look at Niklas Gustavsson's original SWF animation, although we're going to add a few enhancements. Grab your favorite text editor and we will be off!

Creating the Graphics

Niklas was kind enough to provide the actual source to his animation on his site, which is going to help us a lot in creating a similar animation in SVG. I downloaded the source, opened it in Macromedia Flash 5, selected one of the little cubes, and copied it onto the clipboard. Then I picked up my favorite SVG-enabled tool, Adobe Illustrator 10, created a new document and pasted the cube right in. This is a good point to start working with SVG, so I asked Illustrator to save the document as SVG. Here's what we've got to work with

<?xml version="1.0" encoding="iso-8859-1"?>



<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">



<svg width="665px" height="250px" viewBox="0 0 665 250" 

     xml:space="preserve">



  <g id="cube" style="stroke: #000000; stroke-width: 0.5; 

                      stroke-linejoin: bevel">

    <path style="fill: #333333;" d="M0.112,26.271l25.032,

                      12.485V25.164L0.112,12.68V26.271z"/>

    <path style="fill: #666666" d="M25.144,38.756l25.033-

                      12.485H50.12V12.708L25.144,25.164V38.756z"/>

    <path style="fill: #cccccc" d="M50.12,12.708l0.057-

                      0.028L25.144,0.224L0.112,12.68l25.032,

                      12.484L50.12,12.708z"/>

  </g>



</svg>

[View this code as SVG]

Now what we're going to do is to take this little cube's group (enclosed in the <g> element) and transform it into an SVG symbol that we will be able to re-use as we please. This is quite simple really, just switch the group to a symbol and add it as a definition. We then place the cube to the center of the composition and add the background gray rectangle so it looks a little more like Niklas's layout. Also, we give this composition a title. Now our code looks like what appears just below. From now on we will take this as a given and never print the doctype and definitions:

<svg width="665px" height="250px" viewBox="0 0 665 250" 

     xml:space="preserve">



  <title>SVG Animation - Cube Demonstration</title>



  <defs>

    <symbol id="cube" style="stroke: #000000; stroke-width: 0.5; 

                             stroke-linejoin: bevel">

      <path style="fill: #333333;" d="M0.112,26.271l25.032,

                        12.485V25.164L0.112,12.68V26.271z"/>

      <path style="fill: #666666" d="M25.144,38.756l25.033-

                        12.485H50.12V12.708L25.144,25.164V38.756z"/>

      <path style="fill: #cccccc" d="M50.12,12.708l0.057-

                        0.028L25.144,0.224L0.112,12.68l25.032,

                        12.484L50.12,12.708z"/>

    </symbol>

  </defs>



  <rect width="100%" height="100%" 

        style="fill: #999999; stroke: none;" />



  <use xlink:href="#cube" transform="translate(307.5, 105.75)" />



</svg>

[View this code as SVG]

Starting Up Gently (And Linearly)

Now that we have the graphics ready, it is time to start with a little animation. I must warn you though: however hard you thought it would be, it will be easier! The first thing I want to show you is how to make a linear animation of the cube going up and down, up and down (and so on). We placed our symbol in the graphic using the "transform" attribute, which, although moving the symbol in the image, left the symbol's "y" coordinate attribute at its default value of "0". So if we want the animation of our object to be an offset animation, we will just change the "y" attribute for the offset and leave the "transform" alone for the original positioning:

<use xlink:href="#cube" transform="translate(307.5, 105.75)">

  <animate attributeName="y" dur="2s" 

           values="0; -45; 0; 16; 0; -7; 0; 3; 0; -2; 0; 1; 0" />

</use>

[View this code as SVG]

This is a start. What we've done here is to add an "animation" element as a child to our "use" element and set a few of its attributes which dictate its behavior. The "attributeName" attribute allows us to target which of our "use" element's attributes is going to be animated. This highlights one of the main features of SVG animation: it is property-based. This means that each of an SVG element's properties (that is, XML attributes or CSS properties) have their own, unique and independent animation environment by default. This allows for several neat things, the main one being that an element can have properties animated with different loop durations, loop count or whatever. This helps a great deal when trying to create random-looking declarative animation. If you're familiar with the Flash tool, you'll know that you need movie clips to achieve that kind of behavior, which is fairly advanced. SVG animation keeps it simple. Also, SVG animation allows us to actually create relationships for the synchronization of different animations so that time independence isn't the only way forward (more on that later).

Going back to the animation we just wrote, note that we also specified the duration of the animation. The "dur" attribute sets the duration, and here we specified that our animation lasts "2s", two seconds. This is another highlight of SVG animation: it is time-based. Once again, if you have any experience with Flash, you will have noticed that it is a frame-based tool, the timeline being graded in frame units. This means that one has to set up a particular frame rate when publishing SWF animation.

Comments or questions about this article? Let us know by using the forum.

Post your comments

Adobe LiveMotion (another SWF tool) offers a time-based timeline, but it still has to generate frame-based animation when exporting SWF. I believe being time-based is an SVG advantage, as it allows us to define animations evolving in a realistic unit system (time) and leaves the actual frame-rate decision to the SVG player that will probably try to make most of your CPU to render nice and smooth animations. As we go through building this example, you may realize that SVG's animation rendering model is quite different from SWF's. An SWF authoring tool will have all the frames computed at export time while SVG animation leaves much of the computation work to the SVG player. This often leads to smaller file sizes and higher computation needs from the device. Then again, animation frame computation may not be the most demanding phase of animation, as actual drawing is probably the most demanding.

But I digress. We've almost forgotten about this semicolon-separated list of mysterious values in the "values" attribute. Well, this is quite simply the list of values that will be assigned to our "attributeName", much like keyframes in Flash. By default, an SVG player will compute a linear interpolation between each value, thereby creating the animation. It will also have those value changes happen one after the other at a regular interval equal to the duration of the animation divided by the amount of values in the list minus one.

[1] [2] Next