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'sanimation 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.
UsingCSS Animations [css-animations-1]. 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.
UsingCSS Transitions [css-transitions-1]. This CSS module defines properties to specify that changes to values of CSS properties occur progressively over a specified duration.
Using theSVG 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 theanimation frames APIs defined in HTML [HTML].
Using theWeb 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 documentsand SVG fragments in other documents.User agents that support declarative or scripted animation are required to conformto the restrictions based onprocessing modeas defined in theConformance chapter,and to the special requirements foranimations in use-element shadow trees.