Tutorial - Declarative Animation

The SVG Specification includes animation elements enabling easy time-based animation of SVG elements. With declarative SVG animation, an SVG creator can develop everything from simple color transitions to animated filter effects, motion animations involving scale and rotation, motion animations along paths, and even animations using keySplines attributes that allow for a variety of sophisticated effects such as ease in and ease out. This lesson briefly discusses a few of these animation elements, but for more detail, refer to the SVG Specification.

Color animation
Beginning with some simple animated color effects, the <animateColor> element specifically animates color properties of an SVG element.

In the example above, the animation element that animates the color transitions sits inside the <path> element for the "gradient_star." As with other SVG attribute definitions, a URI reference can specify the target element for animation. However, if no reference is provided, the target by default is the immediate parent element.

<animateColor attributeName="fill"
 attributeType="CSS" values="red;blue;yellow;green;red"
 dur="10s" repeatCount="indefinite"/>

The attributeName attribute identifies the attribute or property to be animated. The attributeType attribute can be one of "CSS" (a CSS property defined as animatable by the SVG specification), "XML" (an animatable XML attribute, also defined in the spec), or "auto" (the default setting).

Now that the animation element knows what to animate (the fill property of "gradient_star"), it needs to know how. Property and attribute values can be defined by the following attributes:

In our example, the fill property is animated through the color values red, blue, yellow, green, and back to red.

Finally, the attributes dur and repeatCount control the timing of the animation. The total duration of the animation is defined by dur, and in this case is 10 seconds. The number of interpolations of the animation is defined by the repeatCount attribute. By specifying the repeatCount value as "indefinite," the animation loops indefinitely.

The text element in this SVG also contains a similar animation that targets the element's opacity property.

Motion paths
The <animateMotion> element allows for simple animations of basic rotate, scale, translate, and skew transformations.

By including path data in the <animateMotion> element, SVG elements can also be animated along paths. The rotate attribute controls the rotation of the SVG element as it moves along the specified path. The rotate value can be an angle representing an angle relative to the X-axis of the current user coordinate system can be given. Otherwise, "auto" will rotate the animated object over time by the direction of the motion path, or "auto-reflect" will rotate the object the direction of the motion path plus 180 degrees. In the example above, the text on the vertical figure eight is animated with a rotate value of "-45," while the text on the horizontal figure eight is animated with a rotate value of "auto."

Controlling motion
The default interpolation between values in an animation is simply linear. The calcMode attribute controls the interpolation and timing of values with the following settings:

discrete
The animation jumps from one value to the next without interpolation.

paced
Similar to "linear," but specifically for values that define a linear numeric range.

spline
Interpolates values according to a time function defined by a cubic Bezier spline.

KeySplines
Using the "spline" mode, a variety of sophisticated effects are possible with minimal definition. For instance, by controlling the x and y positions of an element over time, an object's path can be controlled according to a coordinate's rate of change.

With the "spline" mode, the animation element must also include the keySplines attribute. The keySplines define the cubic Bezier control points that control the interval pacing for the animation. Such control allows smooth transitions in pace (such as "ease in" and "ease out"), which can be important in motion animations.

In the above example, each circle is given the same start and end values for "cx" and "cy." They differ only in their keySpline definitions for the values for "cy.

The diagram below shows how acceleration and deceleration of an animation at beginning and end times can be controlled by the Bezier control points. Notice how the acceleration and deceleration of the circles along the y-axis in the example above correspond to the Bezier curve defined by the Bezier control points.

Be sure to take a look at other declarative animation examples in the demos and examples area of this site.

Though the animation features built into the SVG Specification are relatively broad and cover many general aspects of animation, the SVG DOM and the ability to script animations through JavaScript allow for a variety of other kinds of animation.