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)
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]
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.
To learn CSS animation, you need to learn all of the following topics.
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
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
Note: there's also
animateColor, but is deprecated. Just use
2017-12-14 the following is work in progress.
SVG: animate tag
Animation – SVG 1.1 (Second Edition)
- SVG Basics
- Path Elliptical Arc
- Circle Arc
- Specifying Styles
- Shape Styles
- ViewBox Unit Size
- Coordinate Transformation
- Text Element
- Font Size
- Structure Elements
- Scripting SVG
- SVG Clock
If you have a question, put $5 at patreon and message me.