SVG animation

src: i.stack.imgur.com

Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format, is possible through various means:

• Scripting: ECMAScript is a primary means of creating animations and interactive user interfaces within SVG.
• Styling: Since 2008, the development of CSS Animations as a feature in WebKit has made possible stylesheet-driven implicit animation of SVG files from within the Document Object Model (DOM).
• SMIL: Synchronized Multimedia Integration Language, a recommended means of animating SVG-based hypermedia, supported by the Amaya (2003) Opera (2006), Mozilla Firefox (2011), Google Chrome (2016) and Safari (2017) web browsers, and any browser that aims to pass the Acid3 web standards test of 2008 (i.e. before the test's "simplification" in 2011) as this requires SMIL support for tests 75 and 76.

Libraries have also been written as a shim to give current SVG-enabled browsers SMIL support. This method is also known as SVG+Time.

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.

Video SVG animation

History

SVG animation elements were developed in collaboration with the W3C Synchronized Multimedia Working Group, developers of the Synchronized Multimedia Integration Language, the first version of which was published in 1999. SVG 1.0 became a W3C Recommendation on 4 September 2001. Certain web browsers added support for SVG animation during the 2000s, notably Amaya as early as 2003, but SVG animation was only supported by widely-used browsers beginning in the 2010s, notably by Firefox 4 (2011). Internet Explorer and its successor Microsoft Edge as of 2018 have not added support.

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.

Maps SVG animation

Examples

The following code snippets demonstrate three techniques to create animated SVG on compatible browsers. The relevant parts are in bold green.

SVG animation using SMIL

SVG animation using CSS

SVG animation using ECMAScript

src: i.ytimg.com

SMIL attributes to identify the target attribute

The following are the animation attribute which identify the target attribute for the given target element whose value changes over time.

attributeName = "<attributeName>"

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.

attributeType = "CSS | XML | auto"

Specifies the namespace in which the target attribute and its associated values are defined.

• CSS

This specifies that the value of 'attributeName' is the name of a CSS property defined as animatable in this specification.

• XML

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.

• auto

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.

Note: MediaWiki automatically generates static, non-animated thumbnails of SVG images. Viewing the actual .svg image from each respective description page will show its animation in a compatible browser.

src: blog.teamtreehouse.com

Libraries

There are several JavaScript libraries for working with SVG animation. An advantage to the use of such libraries is that these libraries often solve incompatibility issues in browsers through abstraction. Examples of libraries include:

• GSAP (Greensock Animation Platform)
• Raphaël
• Snap.svg
• svg.js
• Velocity.js

src: enlivenem.com

See also

• Flash animation
• CSS Animations
• D3.js

src: i.ytimg.com

References

src: i.ytimg.com

External links

• SVG 1.1 Specification - Animation
• SVG Animation and other SVG Tutorials
• SMIL animations embedded in SVG - Chapter from SVG Primer (W3C)
• SVG Animation Examples

Source of article : Wikipedia