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.

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)

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. ViewBox Unit Size
  10. Coordinate Transformation
  11. Text Element
  12. Font Size
  13. Structure Elements
  14. Scripting SVG
  15. SVG Clock
  16. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials