Designing SVG Web Graphics

Basic Attributes of an Animation

To define an animation, you need to know what is to be animated, when the animation will begin, what is the starting value of the attribute to be animated, and what is the presentation value of that attribute at the end of the animation.

The attribute to be animated is specified by the value of the attributeName attribute. For example, if the fill attribute will be animated, you expect to see

attributeName="fill" 

as an attribute on the animation element.

The timing of the beginning of an animation is determined by the value of the begin attribute. For example, if the animation will begin six seconds after the page loaded, you see this line in the code:

begin="6s" 

SVG animations can be chained. If the animation ...