Click here to Skip to main content
Click here to Skip to main content

Animation Mechanics in SVG: An Introduction

, 6 Sep 2003
Rate this:
Please Sign up or sign in to vote.
This article is the first in a series on various aspects of SVG.
<!-- Add the rest of your HTML here -->

Note: this isn't an overly technical article and is more of a detailed introduction into the power of SVG and it's animation capabilities than anything else.

To get started with SVG, you'll first need to download this from Adobe.


The easiest way to think of SVG is as a text (XML) - based Flash, but there's a lot more to it than that. SVG has been a W3C specification since September 4 2001 and it has started to get a lot of backing from the industry (viz: Corel, Adobe, Microsoft and well as a bunch of OSD applications) lately.

Currently, you'll need a plugin for your browser to view SVG files. When MS IE will natively support this standard is anyone's guess...

There are a couple of ways to package SVG files, with the primary ways being as a standalone file or embedded inside an HTML file using the <EMBED> tag. With SVG you can draw primitive shapes like circles, rectanges and lines as well as create complex animations based on time or triggered by events.

SVG primitives:

So, what elements are we going to be using in this article and what do they look like?


<circle cx="100" cy="100" r="25" fill="black" stroke="black" />


<rectangle x="100" y="100" width="50" height="50" fill="black" stroke="black" stroke-width="1"/>

SVG doesn't have a square element per se, but the <rectangle> is more than sufficient.


<text x="100" y="100" font-size="20pt">The Code Project</text>


<line x1="100" y1="100" x2="200" y2="100" />

The "1" and "2" type attributes are the start and end points.

Mapping out the animation:

Instead of doing some boring animation to show what SVG can do, we'll construct a fairly detailed interactive demo for Code Project.

With this in mind, let's review some of the ways that animation can work within SVG.

How animation works:

Here's a quick demo to get this section started.

Given the rectangle example, this SVG will initially render a small rectangle that will get larger and larger.

<rect x="100" y="100" width="50" height="50" fill="black" stroke="black" 
  <animate attributeName="width" attributeType="XML" begin="0s" dur="4s" 
     fill="freeze" from="50" to="250" />
  <animate attributeName="height" attributeType="XML" begin="0s" dur="4s" 
     fill="freeze" from="50" to="250" />

If you have a look through the code, you'll see how simple it really is.

The main thing to note is that the animation is declarative. It can take quite a lot of getting used to, but by nesting an <animate/> element inside a shape element you can start to create more and more complex animations without writing any code.

The last point here, is that the animations are accumulative. Further on, we'll see some examples of this.

As I said earlier on, animations can be started based on two things: time and events.  Here are some of the main events that you'll come across most often:

  • click
  • mouseover
  • mouseout
  • mousemove
  • begin (an important event of animation elements)
  • load (actual rendering of the element)

While the first four should be immediately obvious to most programmers, the last two probably require a brief explanation...

"begin" signifies that an animation has started. This can be useful when you need to string together various animations as only one animation needs to fire the "begin" event and the rest can be listening for that. A chain reaction of soughts.
Here's what I mean:

<rect x="100" y="100" width="50" height="50" fill="black" stroke="black" 
             stroke-width="1" id="rect1">
    <animate attributeName="width" attributeType="XML" begin="4s" dur="4s" 
       fill="freeze" from="50" to="250" restart="whenNotActive" 
       id="firstAnimation" />
    <animate attributeName="height" attributeType="XML" 
       begin="firstAnimation.begin" dur="4s"
       fill="freeze" from="50" to="250" restart="whenNotActive" />

"load" signifies that an element has been rendered onto the canvas. What actually seems to happen here, is the event fires when the element has been loaded into a memory-resident buffer and not necessarily when the actual paint has occured. If you test this by showing an alert box for this event, you'll see that the element has not yet appeared. Perhaps something to watch out for?

The two primary entities that can raise these begin and load events are: the various shape and animation elements respectively. With the animate elements typically being child elements of shapes.

We can modify the previous animation example to start based on a mouse over event, like this:

<rect x="100" y="100" width="50" height="50" fill="black" stroke="black" 
  stroke-width="1" id="rect1">
    <animate attributeName="width" attributeType="XML" 
        begin="rect1.mouseover" dur="4s" 
        fill="freeze" from="50" to="250" restart="whenNotActive" />
    <animate attributeName="height" attributeType="XML" 
        begin="rect1.mouseover" dur="4s" 
        fill="freeze" from="50" to="250" restart="whenNotActive" />

I've included a new attribute of the rectangle shape called "restart". All this does is stop the animation from restarting is if it still busy with the initial animation. Try and remove this and you'll see the animation go into a loop as the mouse over continually fires.

One of the massively useful features of SVG's animation events is that you can start an animation based on more than one event firing. For instance, we could have changed the begin attributes of the animation elements to:


Now, the "begin" attribute of this rectangle is listening for two events. I've changed the mouseover to a mouseout to better differentiate between the two examples.

You'll see a number of these more advanced software engineering features within the SVG spec.

To wrap up this intro article, here's an SVG file that demos some of the animation capabilities of SVG.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
South Africa South Africa
* Visual C# MVP 2004, 2005 - South Africa
* SADeveloper.NET User Group co-founder and lead 2003, 2004, 2005
MSN : simon_stewart AT
Email : simon AT
Skype: brokenkeyboards
CEO of Broken Keyboards Software

Founder of these startups:

Browse This For Me

Monitor My URL

My full CV can be download here in PDF format.

Comments and Discussions

GeneralAwesome... PinmemberRhodesie18-Sep-03 21:51 
GeneralRe: Awesome... PinmemberSimonS19-Sep-03 9:11 
GeneralStep by step, please Pinmemberdcbrower9-Sep-03 4:03 
GeneralRe: Step by step, please PinmemberSimonS9-Sep-03 4:41 
GeneralRe: Step by step, please Pinmemberdcbrower9-Sep-03 5:30 
GeneralRe: Step by step, please PinmemberPhilippe Lhoste7-Jul-04 0:25 
Note 1: The HTML step is necessary only if you want to mix HTML data with SVG images. If you make comformant SVG files (see below), you can just drop them on the browser (assuming it has an SVG viewer plug-in).
Note 2: <embed> is Netscape only tag, it is not an official HTML tag. I believe old NS browsers (4.*) don't understand <object> tag, that's why embed is still necessary. Since IE understands <embed>, it is probably the only needed code, but the official way of putting SVG images into HTLM is to use <object>. To cope with both kinds of browser, the recommended way (in the SVG FAQ) is to use both:
<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" /><noembed>This is an SVG image, go fetch an SVG viewer if you see this text instead of the image...</noembed>
If the object isn't understood, the code between the start and end tags is ran, that is the <embed> command. You can also provide text if the embed isn't understood/runnable.
Note 3: Maybe your simple <svg> tag works, but I believe that to be fully comformant, one should include XML declarations. Here is my template file, where I paste small SVG snippets:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
  PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "" >
  <title><!-- title --></title>
    <!-- description -->
  <!-- content -->
title and desc are optionals. Title is displayed in the browser title bar (if SVG file is used raw), desc is actually a comment that can be used by the SVG parser (eg. to be read aloud by a speaking browser, for the visually impaired, or displayed on user request, etc.).
Philippe Lhoste (Paris -- France)
Professional programmer and amateur artist

GeneralSVG currently available in IE Pinmemberworldspawn7-Sep-03 17:30 
GeneralRe: SVG currently available in IE PinmemberSimonS7-Sep-03 21:37 
GeneralRe: SVG currently available in IE Pinmemberworldspawn7-Sep-03 21:43 
GeneralRe: SVG currently available in IE PinmemberSimonS9-Sep-03 1:09 
QuestionWant more? PinmemberSimonS6-Jan-03 2:05 
AnswerRe: Want more? PinmemberNorm Almond11-Jan-03 2:01 
GeneralRe: Want more? PinmemberSimonS28-Jan-03 23:34 
GeneralRe: Want more? PinmemberrobinAhood18-Mar-03 20:12 
GeneralRe: Want more? Pinmemberdog_spawn7-Sep-03 6:28 
GeneralRe: Want more? PinmemberSimonS7-Sep-03 21:39 
AnswerRe: Want more? PinmemberMegan Forbes21-Jan-03 4:59 
GeneralRe: Want more? PinmemberSimonS21-Jan-03 22:02 
Answerrequest Pinmemberadjetor29-Jun-03 23:21 
GeneralRe: request PinmemberSimonS30-Jun-03 9:00 
GeneralSuggestion PinmemberChristian Graus18-Dec-02 22:40 
GeneralRe: Suggestion PinmemberSimonS18-Dec-02 22:47 
GeneralRe: Suggestion PinmemberChristian Graus18-Dec-02 22:48 
GeneralRe: Suggestion PinmemberSimonS18-Dec-02 22:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150327.1 | Last Updated 7 Sep 2003
Article Copyright 2002 by SimonS
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid