Appendix E: Animating SVG Documents

SVG supports the ability to change vector graphics over time, to create animated effects. SVG content can be animated in the following ways:

• Using SVG's animation elements [svg-animation]. SVG document fragments can describe time-based modifications to the document's elements. Using the various animation elements, authors can define motion paths, or interpolate the element's attributes and style properties. These effects can be chained together or triggered in response to other events in the document.
• Using CSS Animations [css3-animations]. This CSS module defines a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
• Using CSS Transitions [css3-transitions]. This CSS module defines properties to specify that changes to values of CSS properties occur progressively over a specified duration.
• Using the SVG DOM. The SVG DOM is defined as an extension of the DOM4 specification [dom]. Every attribute and style sheet setting is accessible to scripting, and SVG offers a set of additional DOM interfaces to support efficient animation via scripting. Ideally, user agents that support scripting will also implement the animation frames APIs defined in HTML [HTML].
• Using the Web Animations API [web-animations-1]. This DOM API provides a scripted interface to trigger user-agent optimized animations of style properties and attributes, without the need for authors to calculate values for individual frames.

SVG does not mandate support for any of these animation methods. However, user agents that do support them are expected to support them for SVG documents and SVG fragments in other documents. User agents that support declarative or scripted animation are required to conform to the restrictions based on processing mode as defined in the Conformance chapter, and to the special requirements for animations in use-element shadow trees.