SVG: Animation

By Xah Lee. Date: . Last updated: .

SVG can be animated by:

As of 2017-12:

SVG animation is the most powerful. Because, it supports moving a shape thru a path (like a roller-coaster), or change a path over time (like a moving snake).

CSS animation is the least powerful. It basically means, using the transform attribute to move or apply geometric transformation to a element. Geometric transformation is very limited, it is basically just means scaling, shear, rotate, translate. [see CSS: 2D Transform]

Web Animation “API” (which is part of DOM) allows JavaScript to directly manipulate element's geometry, but basically similar to what CSS animation provides.

All of the above, are declarative style. That is, you specify shape and position and timing, and browser generates the (efficient) code for every frame, and result is smooth animation.

Using JavaScript to write loop and timing to create animation, is the worst way, because that involves tedious code, and is least smooth, and most CPU intensive.

Hovever, using JavaScript in general for animation is also the most powerful, that other animation tech cannot do. For example, simulation of fluid dynamics, wind direction vector field over time, etc.

CSS Animation

To learn CSS animation, you need to learn all of the following topics.

Web Animation

Web Animation

SVG Animation

Here's a example of SVG animation. Click on the red square.

Here's the code.

<svg>
<rect id="s67180" x="0" y="50" width="50" height="50" style="fill:red" />

<animate xlink:href="#s67180"
 attributeName="x"
 from="0"
 to="100"
 dur="2s"
 begin="click"
 fill="freeze" />

</svg>

The code means, change the attribute value of given shape element id, from 0 to 100, duration 2 second, click to begin. And when animation ended, show the last frame (The fill="freeze").

SVG Tags for Animation

SVG provides the following tags to do animation.

animate
change a attribute value over time.
animateMotion
move a element along a path.
animateTransform
change the value of attribute transform. (basically means, rotate, move, scale, shear.)
set
a convenient shorthand for animate, which is useful for assigning animation values to non-numeric attributes and properties, such as the visibility property

Note: there's also animateColor, but is deprecated. Just use animate


2017-12-14 the following is work in progress.

animate Tag

SVG: animate tag

animateMotion Tag

animateTransform Tag

JS in Depth
XAH  BUY NOW

SVG tutorial

Canvas Intro