SVG animation
| Scalable Vector Graphics | |
|---|---|
Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format, is possible through various means:
Because SVG supports PNG and JPEG raster images, it can be used to animate such images as an alternative to APNG and Multiple-image Network Graphics.
SVG animation elements were developed in collaboration with the W3C Synchronized Multimedia Working Group, developers of the Synchronized Multimedia Integration Language. The SYMM Working Group, in collaboration with the SVG Working Group, has authored the SMIL Animation specification, which represents a general-purpose XML animation feature set. SVG incorporates the animation features defined in the SMIL Animation specification and provides some SVG specific extensions.
The following code snippets demonstrate three techniques to create animated SVG on compatible browsers. The relevant parts are in bold green.
The following are the animation attribute which identify the target attribute for the given target element whose value changes over time.
Specifies the name of the target attribute. An XMLNS prefix may be used to indicate the XML namespace for the attribute. The prefix will be interpreted in the scope of the current animation element.
Specifies the namespace in which the target attribute and its associated values are defined.
This specifies that the value of ‘attributeName’ is the name of a CSS property defined as animatable in this specification.
This specifies that the value of ‘attributeName’ is the name of an XML attribute defined in the default XML namespace for the target element. The attribute must be defined as animatable in this specification.
The default value is 'auto'. The implementation should match the ‘attribute Name’ to an attribute for the target element. The implementation must first search through the list of CSS properties for a matching property name, and if none is found, search the default XML namespace for the element.
...
Wikipedia