SVG: Animation

SVG can be animated by:

• CSS animation.
• SVG animation. (aka SVG SMIL. (SMIL means Synchronized Multimedia Integration Language) SMIL is a generic spec for XML based animation. In SVG, SMIL basically means some SVG tags designed for animation)
• web animation → DOM API that allows JavaScript to directly set CSS animation and CSS transform, without manipulating CSS.
• JavaScript → using JavaScript in general. example: create a timed loop to draw, move, hide, delete, etc elements.

As of 2017-12:

• CSS Animation is supported by all browsers.
• SVG Animation is supported by Google Chrome, Firefox, Safari, but not Edge and Internet Explorer.
• Web Animation basic features supported by Google Chrome, Firefox, but not Safari, Edge, Internet Explorer.

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.

• CSS: 2D Transform
• CSS: Transition
• CSS: Animation

Web Animation

Web Animation

SVG Animation

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

Here is 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: Animation

animateMotion Tag

animateTransform Tag