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 (imagine roller-coaster), or change a path over time (imagine a moving snake).

CSS animation is the least powerful. It basically means, using the transform attribute to move or apply geometric transformation to an 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

[see 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.

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

Reference

Animation – SVG 1.1 (Second Edition)

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Patreon me $5. Ask me question on patreon