SVG’s own animation comes from SMIL (the Synchronized Multimedia Integration Language).
An animation element is a child of the element it changes, or points to it with
href. Browsers play SMIL, including in an SVG shown as an image, with no
script. Other renderers often draw only the first frame. CSS animations and transitions
are the other way to animate SVG. The explorer’s Code tab lists every animation with its
target, attribute and timing.
Elements
| Element | Specific attributes | Notes |
|---|---|---|
animate | attributeName, from, to, by, values, calcMode, keyTimes, keySplines | Changes one attribute or property. Not every attribute can be animated; those that cannot are marked so in the specification. |
set | attributeName, to | Switches an attribute to to for the time it is active. Works on non-numeric values such as visibility. |
animateMotion | path, keyPoints, rotate, origin (1.1) | Moves the element along a path given by path or by an mpath child, or from values pairs. rotate is an angle, auto or auto-reverse. |
mpath | href / xlink:href | Names the path element an animateMotion follows. |
animateTransform | type: translate, scale, rotate, skewX, skewY | Animates transform (or gradientTransform, patternTransform). attributeName is transform. |
animateColor | as animate | SVG 1.1, deprecated; animate works for colours. Removed from SVG 2. |
discard | begin | SVG 2 and SVG Tiny 1.2: removes the target from the document at the time. |
All of them take the timing attributes and the conditional processing and core attributes; the value and timing attributes are on the animation attributes page.
How values combine
- With
values, the animation goes through the list, spread evenly or atkeyTimes;from,toandbyare ignored. - With
fromandto, it goes between them; with onlyto, from the underlying value toto; withby, from the underlying (orfrom) value by that amount. calcMode:linear(default;discretefor non-numeric values),paced(constant speed),spline(keySplinesshape the speed between keys).animateMotiondefaults topaced.- When it ends, the attribute goes back to its normal value unless
fill="freeze"holds the last value. additive="sum"adds to the underlying value;accumulate="sum"makes each repeat build on the last.- When several animations act on one attribute, the one that started last wins, unless they are additive.
Not described
This page is partial.
- Reference: the SMIL timing model (active duration, restart and fill rules, priority between animations) is summarised, not described in full, and was written without the SMIL text open. Which attributes can be animated is not listed.
- Viewer: lists each animation and checks the ids in
beginandend. It does not parse begin or end values or clock values, checkkeyTimesorkeySplinescounts, or play anything except through the browser in the Picture.