SVG animation

Last updated

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

Contents

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

Because SVG supports Portable Network Graphics (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" [10] ) within the World Wide Web Consortium ("W3C") published the first recommended version of the specification known as "SMIL 1.0". [11] [12] 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". [13] 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. [14] [15] 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

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

SVG animation using SMIL.svg 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="100%"height="100%"viewBox="-4 -4 8 8"><title>SVGanimationusingSMIL</title><circlecx="0"cy="1"r="2"stroke="red"fill="none"><animateTransformattributeName="transform"attributeType="XML"type="rotate"from="0"to="360"begin="0s"dur="1s"repeatCount="indefinite"/></circle></svg>

SVG animation using CSS

SVG animation using CSS.svg 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="100%"height="100%"viewBox="-4 -4 8 8"><title>SVGanimationusingCSS</title><styletype="text/css">@keyframesrot_kf{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } .rot{animation:rot_kf1slinearinfinite;} </style><circleclass="rot"cx="0"cy="1"r="2"stroke="blue"fill="none"/></svg>

SVG animation using ECMAScript

A traffic light, animated using SVG animation and Javascript. Ampel.svg
A traffic light, animated using SVG animation and Javascript.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="100%"height="100%"viewBox="-4 -4 8 8"onload="rotate(evt)"><title>SVGanimationusingECMAScript</title><scripttype="text/ecmascript">functionrotate(evt){ varobject=evt.target.ownerDocument.getElementById('rot'); setInterval(function(){ varnow=newDate(); varmilliseconds=now.getTime()%1000; vardegrees=milliseconds*0.36;//360degreesin1000ms object.setAttribute('transform','rotate('+degrees+')'); },20); } </script><circleid="rot"cx="0"cy="1"r="2"stroke="green"fill="none"/></svg>

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:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="100%"height="100%"viewBox="-4 -4 8 8"onload="init()"><title>SVGanimationusingrequestAnimationFrame()</title><script>varobject; functioninit(){ object=document.getElementById('rot');window.requestAnimationFrame(rotate); } functionrotate(timestamp){ varmilliseconds=timestamp%1000; vardegrees=milliseconds*0.36;//360degreesin1000ms object.setAttribute('transform','rotate('+degrees+')'); window.requestAnimationFrame(rotate); } </script><circleid="rot"cx="0"cy="1"r="2"stroke="green"fill="none"/></svg>

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 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.

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

Related Research Articles

A document type definition (DTD) is a specification file that contains set of markup declarations that define a document type for an SGML-family markup language. The DTD specification file can be used to validate documents.

SVG is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

<span class="mw-page-title-main">Synchronized Multimedia Integration Language</span> XML-based markup language for multimedia presentations

Synchronized Multimedia Integration Language ) is a World Wide Web Consortium recommended Extensible Markup Language (XML) markup language to describe multimedia presentations. It defines markup for timing, layout, animations, visual transitions, and media embedding, among other things. SMIL allows presenting media items such as text, images, video, audio, links to other SMIL presentations, and files from multiple web servers. SMIL markup is written in XML, and has similarities to HTML.

Mathematical Markup Language (MathML) is a mathematical markup language, an application of XML for describing mathematical notations and capturing both its structure and content, and is one of a number of mathematical markup languages. Its aim is to natively integrate mathematical formulae into World Wide Web pages and other documents. It is part of HTML5 and standardised by ISO/IEC since 2015.

X3D is a set of royalty-free ISO/IEC standards for declaratively representing 3D computer graphics. X3D includes multiple graphics file formats, programming-language API definitions, and run-time specifications for both delivery and integration of interactive network-capable 3D data. X3D version 4.0 has been approved by Web3D Consortium, and is under final review by ISO/IEC as a revised International Standard (IS).

XHTML Basic is an XML-based structured markup language primarily designed for simple user agents, often found in mobile devices such as mobile phones, PDAs, pagers, and set-top boxes..

XML Linking Language, or XLink, is an XML markup language and W3C specification that provides methods for creating internal and external links within XML documents, and associating metadata with those links.

<span class="mw-page-title-main">W3C Markup Validation Service</span> Validator service by the World Wide Web Consortium

The Markup Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check pre-HTML5 HTML and XHTML documents for well-formed markup against a document type definition. Markup validation is an important step towards ensuring the technical quality of web pages. However, it is not a complete measure of web standards conformance. Though W3C validation is important for browser compatibility and site usability, it has not been confirmed what effect it has on search engine optimization.

Speech Recognition Grammar Specification (SRGS) is a W3C standard for how speech recognition grammars are specified. A speech recognition grammar is a set of word patterns, and tells a speech recognition system what to expect a human to say. For instance, if you call an auto-attendant application, it will prompt you for the name of a person. It will then start up a speech recognizer, giving it a speech recognition grammar. This grammar contains the names of the people in the auto attendant's directory and a collection of sentence patterns that are the typical responses from callers to the prompt.

In computing, quirks mode is an approach used by web browsers to maintain backward compatibility with web pages designed for old web browsers, instead of strictly complying with web standards in standards mode. This behavior has since been codified, so what was previously standards mode is now referred to as simply no quirks mode.

In computer science and web development, XML Events is a W3C standard for handling events that occur in an XML document. These events are typically caused by users interacting with the web page using a device, such as a web browser on a personal computer or mobile phone.

Semantic Interpretation for Speech Recognition (SISR) defines the syntax and semantics of annotations to grammar rules in the Speech Recognition Grammar Specification (SRGS). Since 5 April 2007, it is a World Wide Web Consortium recommendation.

XML documents typically refer to external entities, for example the public and/or system ID for the Document Type Definition. These external relationships are expressed using URIs, typically as URLs.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages which mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

In computing, Facelets is an open-source Web template system under the Apache license and the default view handler technology for Jakarta Server Faces. The language requires valid input XML documents to work. Facelets supports all of the JSF UI components and focuses completely on building the JSF component tree, reflecting the view for a JSF application.

<span class="mw-page-title-main">EPUB</span> E-book file format

EPUB is an e-book file format that uses the ".epub" file extension. The term is short for electronic publication and is sometimes styled ePub. EPUB is supported by many e-readers, and compatible software is available for most smartphones, tablets, and computers. EPUB is a technical standard published by the International Digital Publishing Forum (IDPF). It became an official standard of the IDPF in September 2007, superseding the older Open eBook (OEB) standard.

XHTML+RDFa is an extended version of the XHTML markup language for supporting RDF through a collection of attributes and processing rules in the form of well-formed XML documents. XHTML+RDFa is one of the techniques used to develop Semantic Web content by embedding rich semantic markup. Version 1.1 of the language is a superset of XHTML 1.1, integrating the attributes according to RDFa Core 1.1. In other words, it is an RDFa support through XHTML Modularization.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

Multimodal Architecture and Interfaces is an open standard developed by the World Wide Web Consortium since 2005. It was published as a Recommendation of the W3C on October 25, 2012. The document is a technical report specifying a multimodal system architecture and its generic interfaces to facilitate integration and multimodal interaction management in a computer system. It has been developed by the W3C's Multimodal Interaction Working Group.

A document type declaration, or DOCTYPE, is an instruction that associates a particular XML or SGML document with a document type definition (DTD). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

References

  1. ↑ "Scalable Vector Graphics (SVG) 1.1 Specification". World Wide Web Consortium. January 2003 – April 2009. Archived from the original on 27 August 2006. Retrieved 4 February 2010.
  2. ↑ Festa, Paul (9 January 2003). "W3C releases scripting standard, caveat". CNet. Archived from the original on 17 May 2011. Retrieved 24 February 2010.
  3. ↑ Bulterman, D.C.A.; Lloyd Rutledge (November 2008). SMIL 3.0: Interactive Multimedia for the Web, Mobile Devices and Daisy Talking Books. X.media.publishing (2nd ed.). New York: Springer. p. 508. ISBN   9783540785460. Archived from the original on 2022-04-24. Retrieved 2022-04-24.
  4. ↑ SMIL 3.0. Archived from the original on 2022-04-24. Retrieved 2022-04-24.
  5. ↑ "SVG Animation support in Amaya". World Wide Web Consortium. 15 April 2003. Archived from the original on 11 September 2009. Retrieved 4 February 2010.
  6. ↑ McCathieNevile, Charles (31 October 2006). "Animating Your SVG". Opera Developer Community. Opera Software. Archived from the original on 7 March 2010. Retrieved 24 February 2010.
  7. ↑ "SVG animation with SMIL". 29 March 2011. Archived from the original on 30 April 2011. Retrieved 29 March 2011.
  8. ↑ "When can I use SVG SMIL animation?". Archived from the original on 2011-03-22. Retrieved 2011-03-29.
  9. ↑ Dahlström, Erik (August 2008). "Tricks of javascript, SVG and SMIL". Opera Software at "SVG Open" website. Archived from the original on 6 April 2009. Retrieved 24 February 2010.
  10. ↑ "W3C Synchronized Multimedia Home page". www.w3.org. Archived from the original on 2022-04-17. Retrieved 2022-03-20.
  11. ↑ Hoschka, Philipp, ed. (1998-06-15). "Synchronized Multimedia Integration Language (SMIL) 1.0 Specification". W3C. SYMM Working Group. Archived from the original on 2021-03-30. Retrieved 2021-04-09.
  12. ↑ Khudairi, Sally; Jacobs, Ian; Mitchell, Ned; Lloyd, Andrew; Matsubara, Yumiko (1998-06-15). "Press Release: W3C Issues SMIL as a W3C Recommendation". W3C. W3C. Archived from the original on 2020-02-08. Retrieved 2021-04-09.
  13. ↑ Schmitz, Patrick; Yu, Jin; Santangeli, Peter (1998-09-18). "Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Extending SMIL into the Web Browser". World Wide Web Consortium (w3.org). Archived from the original on 2022-01-20. Retrieved 2022-03-20.
  14. ↑ "Synchronized Multimedia Integration Language (SMIL 2.0)". www.w3.org. 7 August 2001. Archived from the original on 2022-03-26. Retrieved 2022-03-20.
  15. ↑ Schmitz, Patrick; Cohen, Aaron (4 September 2001). "SMIL Animation". www.w3.org. Archived from the original on 2022-06-14. Retrieved 2022-03-20.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.