SVG animation
{{Short description|Open XML-based standard vector graphics format}}{{Multiple issues|
{{update|date=February 2010}}
{{tone|date=August 2014}}
}}
{{SVGSeries}}
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{{Cite web|url=http://www.w3.org/TR/SVG11/animate.html#Animation.classExample|title=Scalable Vector Graphics (SVG) 1.1 Specification|date=January 2003 – April 2009|access-date=4 February 2010|publisher=World Wide Web Consortium|archive-date=27 August 2006|archive-url=https://web.archive.org/web/20060827230920/http://www.w3.org/TR/SVG11/animate.html#Animation.classExample|url-status=live}}{{cite web|url=http://news.cnet.com/2100-1023-979976.html|title=W3C releases scripting standard, caveat|last=Festa|first=Paul|date=9 January 2003|publisher=CNet|access-date=24 February 2010|archive-date=17 May 2011|archive-url=https://web.archive.org/web/20110517151500/http://news.cnet.com/2100-1023-979976.html|url-status=live}}{{cite book
|last=Bulterman
|first=D.C.A.
|url=https://openlibrary.org/works/OL15498417W/SMIL_3.0
|title=SMIL 3.0: Interactive Multimedia for the Web, Mobile Devices and Daisy Talking Books
|author2=Lloyd Rutledge
|date=November 2008
|publisher=Springer
|isbn=9783540785460
|edition=2nd
|series=X.media.publishing
|location=New York
|author-link=Dick Bulterman
|pages=508
|access-date=2022-04-24
|archive-date=2022-04-24
|archive-url=https://web.archive.org/web/20220424215906/https://openlibrary.org/works/OL15498417W/SMIL_3.0
|url-status=live
}}{{Cite book |url=https://link.springer.com/book/9783540785460 |title=SMIL 3.0 |author=Dick Bulterman |author-link=Dick Bulterman |language=en |access-date=2022-04-24 |archive-date=2022-04-24 |archive-url=https://web.archive.org/web/20220424215909/https://link.springer.com/book/9783540785460 |url-status=live }} of animating SVG-based hypermedia, supported by the Amaya (2003){{cite web|publisher=World Wide Web Consortium|title=SVG Animation support in Amaya|date=15 April 2003|url=http://www.w3.org/2003/03/amayasvganim.html|access-date=4 February 2010|archive-date=11 September 2009|archive-url=https://web.archive.org/web/20090911023554/http://www.w3.org/2003/03/amayasvganim.html|url-status=live}} Opera (2006),{{cite web|last=McCathieNevile |first=Charles |title=Animating Your SVG |publisher=Opera Software |date=31 October 2006 |url=http://dev.opera.com/articles/view/animating-your-svg/ |access-date=24 February 2010 |work=Opera Developer Community |url-status=dead |archive-url=https://web.archive.org/web/20100307035302/http://dev.opera.com/articles/view/animating-your-svg/ |archive-date=7 March 2010 }} Mozilla Firefox (2011),{{cite web|title=SVG animation with SMIL|date=29 March 2011|url=https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL|access-date=29 March 2011|archive-date=30 April 2011|archive-url=https://web.archive.org/web/20110430052327/https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL|url-status=live}} Google Chrome (2016) and Safari (2017) web browsers,{{cite web|title=When can I use SVG SMIL animation?|url=http://caniuse.com/svg-smil|access-date=2011-03-29|archive-date=2011-03-22|archive-url=https://web.archive.org/web/20110322131511/http://caniuse.com/svg-smil|url-status=live}} 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.{{cite web |last=Dahlström |first=Erik |date=August 2008 |title=Tricks of javascript, SVG and SMIL |url=http://svgopen.org/2008/presentations/70-Tricks_of_Javascript_and_declarative_animation/index.html |archive-url=https://web.archive.org/web/20090406034811/http://svgopen.org/2008/presentations/70-Tricks_of_Javascript_and_declarative_animation/index.html |archive-date=6 April 2009 |access-date=24 February 2010 |publisher=Opera Software at "SVG Open" website}} This method is also known as SVG+Time.{{citation needed|date=March 2009}}
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 (MNG).
History
SVG animation elements were developed in collaboration with the working group that published several versions of Synchronized Multimedia Integration Language (SMIL). The SYMM Working Group (in collaboration with the SVG Working Group) developed 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.
In June 1998, the "Synchronized Multimedia Working Group" (known as "SYMM"{{Cite web |title=W3C Synchronized Multimedia Home page |url=https://www.w3.org/AudioVideo/Overview.html |access-date=2022-03-20 |website=www.w3.org |archive-date=2022-04-17 |archive-url=https://web.archive.org/web/20220417170357/http://www.w3.org/AudioVideo/Overview.html |url-status=live }}) within the World Wide Web Consortium ("W3C") published the first recommended version of the specification known as "SMIL 1.0".{{Cite web |date=1998-06-15 |title=Synchronized Multimedia Integration Language (SMIL) 1.0 Specification |url=https://www.w3.org/TR/1998/REC-smil-19980615/ |access-date=2021-04-09 |website=W3C |publisher=SYMM Working Group |collaboration=SYMM Working Group |editor-first1=Philipp |editor-last1=Hoschka |archive-date=2021-03-30 |archive-url=https://web.archive.org/web/20210330151125/http://www.w3.org/TR/1998/REC-smil-19980615/ |url-status=live }}{{Cite web |author-last1=Khudairi |author-first1=Sally |date=1998-06-15 |title=Press Release: W3C Issues SMIL as a W3C Recommendation |url=https://www.w3.org/Press/1998/SMIL-REC |access-date=2021-04-09 |website=W3C |author-first2=Ian |author-last2=Jacobs |author-first3=Ned |author-last3=Mitchell |author-first4=Andrew |author-last4=Lloyd |author-first5=Yumiko |author-last5=Matsubara |archive-date=2020-02-08 |archive-url=https://web.archive.org/web/20200208090122/http://www.w3.org/Press/1998/SMIL-REC |url-status=live }} Shortly after the 1998 publication of SMIL 1.0, a group of companies led by Microsoft published "Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Extending SMIL into the Web Browser".{{Cite web |last1=Schmitz |first1=Patrick |last2=Yu |first2=Jin |last3=Santangeli |first3=Peter |date=1998-09-18 |title=Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Extending SMIL into the Web Browser. |url=https://www.w3.org/TR/NOTE-HTMLplusTIME.html |access-date=2022-03-20 |website=World Wide Web Consortium (w3.org) |archive-date=2022-01-20 |archive-url=https://web.archive.org/web/20220120212956/http://www.w3.org/TR/NOTE-HTMLplusTIME.html |url-status=live }} For the next two years, the lead author of HTML+TIME (Patrick Schmitz) worked with the SYMM working group, while also working with the SVG working group. Shortly after the publication of SMIL 2.0, Schmitz and co-author Aaron Cohen (from Intel) published SMIL Animation on 4 September 2001.{{Cite web |date=7 August 2001 |title=Synchronized Multimedia Integration Language (SMIL 2.0) |url=https://www.w3.org/TR/2001/REC-smil20-20010807/ |access-date=2022-03-20 |website=www.w3.org |archive-date=2022-03-26 |archive-url=https://web.archive.org/web/20220326021452/https://www.w3.org/TR/2001/REC-smil20-20010807/ |url-status=live }}{{Cite web |last1=Schmitz |first1=Patrick |last2=Cohen |first2=Aaron |date=4 September 2001 |title=SMIL Animation |url=https://www.w3.org/TR/smil-animation/Overview.html |access-date=2022-03-20 |website=www.w3.org |archive-date=2022-06-14 |archive-url=https://web.archive.org/web/20220614100941/https://www.w3.org/TR/smil-animation/Overview.html |url-status=live }} SVG 1.0 also became a W3C Recommendation on 4 September 2001.
Certain web browsers added support for SVG animation during the 2000s, including 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 supports ECMAScript animation, and its successor Microsoft Edge supports ECMAScript and CSS animations as of version 42.17134.
Examples
{{original research|section|date=May 2019}}
The following code snippets demonstrate three techniques to create animated SVG images on compatible browsers. The relevant parts are highlighted in yellow. Click the images' thumbnails to see their animated versions.
=SVG animation using SMIL=
{{float right clear none|
File:SVG_animation_using_SMIL.svg|200px
default [//upload.wikimedia.org/wikipedia/commons/b/b9/SVG_animation_using_SMIL.svg]
}}
attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite"/>
=SVG animation using CSS=
{{float right clear none|
File:SVG_animation_using_CSS.svg|200px
default [//upload.wikimedia.org/wikipedia/commons/8/87/SVG_animation_using_CSS.svg]
}}
cx="0" cy="1" r="2" stroke="blue" fill="none"/>
=SVG animation using ECMAScript=
cx="0" cy="1" r="2" stroke="green" fill="none"/> Though the example above works, it is not the optimal implementation; the animation is limited to 50 frames per second (FPS). Using requestAnimationFrame provides better performance and can reach 60 FPS:
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 = " 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 specifies that the value of ‘attributeName’ is the name of a CSS property defined as animatable in this specification. XML 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.
circulatory_system_SMIL.svg|link={{filepath:circulatory_system_SMIL.svg}}|SMIL animation demonstrating change in transformation (scale) and CSS attributes (opacity and dash offset)
toy_train_SMIL.svg|link={{filepath:toy_train_SMIL.svg}}|SMIL animation demonstrating motion along a path and simulation of 3D
morphing_SMIL.svg|link={{filepath:morphing_SMIL.svg}}|SMIL animation demonstrating morphing of shapes (paths)
Penang_Island_textured_model_CSS3_animation.svg|link={{filepath:Penang_Island_textured_model_CSS3_animation.svg}}|CSS3 animation demonstrating changes in transformation (rotation, scale and translation) and simulation of 3D
The MediaWiki wiki software 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.
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 Raphaël and Velocity.js
See also
{{Commons category|Animated SVG files}}
References
{{Reflist|30em}}
{{Animation}}
{{W3C Standards}}
{{vector graphics markup languages}}
{{DEFAULTSORT:Svg Animation}}