Animating your SVG

This article shows how to quickly create basic SVG animations even with no previous experience with SVG. Who needs a graphical editor, anyway?

( Read the article )

Great introductory article about SVG animations. I like the wording and I like it takes small and easy steps into the process of animating SVG, ending with something complex enough. I didn't know most of these things. Definitely a worthwile tutorial.

But this site is beta, so there are a few tiny problems .

We can also make the animation do a few different things. We can tell it when to start, how long go go for, or when to end with the begin, dur and end attributes.

I think you mean "how long to go for". Typo found in chapter "Taking stock (1)".

In the same chapter, the informational note (with a light blue background) contains the following:

There is also a <dfn>property</dfn> called fill, which can be expressed either as an attribute in XML, or as a CSS property in a style attribute or even an external CSS stylesheet. It describes the colour (or pattern) that is used to fill a painted SVG element, and its default value is black.

As you see, the DFN tag is visible (the angle brackets have been transformed into HTML entities).

Same DFN tag problem in "Trickier transformations", first paragraph after the informational note:

We can do this because transform is <dfn>implied</dfn>, in other words there is a default value defined in the specification so it is as if the attribute exists already.

The "Trickier transformations" chapter contains example ex-b03.svg. This does not work properly in Opera 9.02 build 434 for Linux (in Ubuntu 6.06). Problem: the triangle disappears when it should start to "morph" into the shape of a rectangle. After a few seconds, the rectangle shows up, suddenly, while the transitions of scaling and color are being applied.

Well done article, Charles. I'm digging that funky clock...