Note: In order to view the examples used in this tutorial, you will need to have the Adobe SVG Viewer 3.0 installed.

In a previous article on SVG (Scalable Vector Graphics), I showed how easy it was to create simple shapes in SVG. SVG is not just about creating static graphics, however, it is also a powerful animation tool. In this introduction to animating SVG, I will demonstrate just how easy it is to animate SVG graphics, with the minimum amount of code required.

With SVG, transformations refer to the attributes of SVG elements that may be transformed, for example its size, position, rotation and so on. These transformations can be animated, where an initial starting value, an ending value and a duration for the transformation effect are supplied.

In this article I will discuss three such transformations: Rotate, Linear Motion and Scale.

Rotating an element

Rotating an element requires us to choose the rotation point for the animation, that is the x and y coordinates for the point around which the element will be rotated, and then to specify the start rotation angle and the end rotation angle.

The duration of the animation must also be supplied; in this example it will take five seconds to complete a full rotation, and the use of the keyword indefinite here as the repeat count implies that the animation will loop indefinitely:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="rotateSquare">
    <rect fill="#AFBCC7" stroke="#646464" stroke-width="5px" x="100px" y="100px"
     width="100px" height="100px">
    <animateTransform
        attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0,150,150" to="360,150,150"
        begin="0s" dur="5s"
        repeatCount="indefinite"/>
    </rect>
</g>
</svg>

Example One: animated rotation

This code begins by setting up a container element g and assigning it the id rotateSquare, which is not required but it may prove to be useful later on to give each graphic element an id. A rect element is created with its usual attributes set: fill colour, stroke colour, size and position coordinates and so on.

The animateTransform tag is then used to set the transform animation properties for the rectangle element. The type of transform is that of rotate, and the from and to attributes are used to specify that the element will rotate from an angle of 0 degrees to 360 degrees. The other two parameters in the from and to attributes, namely the two 150,150 values, represent the coordinates for the rotation point for the animation as discussed previously. Begin is set to zero seconds, i.e. when the page loads, and the animation duration is set to five seconds for a full rotation. Finally, the repeat count is set to repeat indefinitely.

Moving an element along a linear path.

Linear path animation is almost always the easiest form of animation, in that you only need to specify a beginning and end point and move the element between the two points over a specified period of time. SVG is no different from most other implementations of linear path animation, as the code below demonstrates:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="moveSquare">
    <rect fill="#AFBCC7" stroke="#646464" stroke-width="5px"
     x="0px" y="0px" width="100px" height="100px">
    <animateMotion
        from="0,0" to="100,100"
        dur="4s" fill="freeze"/>
    </rect>
</g>
</svg>

As with the first example, we begin by creating a graphic container element and giving this container a unique id. Once more a rectangle element is created with some optional style attributes, and its starting x and y coordinated are set to 0,0 (the top-left corner, or origin).

Unlike the first example where animateTransform was used, we now use the animateMotion tag to specify the beginning and end points of the animation, along with setting the duration of the animation to 4s. The fill attribute is then set to freeze so that the last frame of the animation is retained on screen after the animation is finished, rather than restoring the first frame.

Example two: linear path animation

Scaling an element

The code for the scaling example is almost identical to that of the rotation example, the main differences being that the animateTransform type is now scale rather than rotate, and an infinite loop is not used.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="scaleSquare" transform="translate(100,100)">
    <rect fill="#AFBCC7" stroke="#646464" stroke-width="5px" x="0px" y="0px" 
    width="100px" height="100px">
        <animateTransform
            attributeType="XML"
            attributeName="transform"
            type="scale"
            from="0" to="1"
            dur="5s"
            fill="freeze"/>
    </rect>
</g>
</svg>

Example three: scaling an element

The translate(100,100) code is used to set the x and y coordinates for the element to this position. The from and to values in this case are scale factors in relation to the original size of the element to be rescaled, where 1 is equal to 100% of the original size.

Conclusion

As the previous examples show, animating elements in SVG is achievable with very few lines of code. The animation techniques presented here serve only as an introduction; in reality there are far more advanced effects to be achieved, including the use of some quite powerful visual filters. I intend to write further tutorials on this subject in the coming months, for now, enjoy experimenting with SVG!

---

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2003, but is left here for archival purposes. The Adobe SVG Viewer is now retired and no longer required, as the demos above should now work natively in most modern browsers.