SVG animation

Short description: Open XML-based standard vector graphics format

This article has multiple issues. Please help improve it or discuss these issues on the talk page. (Learn how and when to remove these template messages)

This article needs to be updated. Please update this article to reflect recent events or newly available information. (February 2010)

|

(Learn how and when to remove this template message)

Scalable Vector Graphics

* sXBL
* SVG Working Group
* SVG filter effects
* Precision Graphics Markup Language
* Vector Markup Language
* XHTML+MathML+SVG
* SVG animation
* Comparison of layout engines (SVG)

* v
* t
* e

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[1][2][3][4] of animating SVG-based hypermedia, supported by the Amaya (2003)[5] Opera (2006),[6] Mozilla Firefox (2011),[7] Google Chrome (2016) and Safari (2017) web browsers,[8] 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.[9] 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 (MNG).

## Contents

* 1 History
* 2 Examples
* 2.1 SVG animation using SMIL
* 2.2 SVG animation using CSS
* 2.3 SVG animation using ECMAScript
* 3 SMIL attributes to identify the target attribute
* 4 Libraries
* 5 See also
* 6 References

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

This section possibly contains original research. Please improve it by verifying the claims made and adding inline citations. Statements consisting only of original research should be removed. (May 2019) (Learn how and when to remove this template message)

|

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

See file SVG animation using SMIL.svg.

Template:Float right clear none

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="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>SVG animation using SMIL</title>
<circle cx="0" cy="1" r="2" stroke="red" fill="none">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
dur="1s"
repeatCount="indefinite"/>
</circle>
</svg>

### SVG animation using CSS

See file SVG animation using CSS.svg.

Template:Float right clear none

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="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>SVG animation using CSS</title>
<style>
@keyframes rot_kf {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }

.rot { animation: rot_kf 1s linear infinite; }
</style>
<circle class="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.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="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>SVG animation using ECMAScript</title>
<script>
function rotate(evt) {
const object = evt.target.ownerDocument.getElementById('rot');
setInterval(() => {
const now          = new Date();
const milliseconds = now.getTime() % 1000;
const degrees      = milliseconds * 0.36; // 360 degrees in 1000 ms
object.setAttribute('transform', `rotate(${degrees})`);
}, 20);

</script>
<circle id="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:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="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>SVG animation using requestAnimationFrame()</title>
<script>
let object;

function init() {
object = document.getElementById('rot');
window.requestAnimationFrame(rotate);

function rotate(timestamp) {
const milliseconds = timestamp % 1000;
const degrees      = milliseconds * 0.36; // 360 degrees in 1000 ms
object.setAttribute('transform', `rotate(${degrees})`);
window.requestAnimationFrame(rotate);

</script>
<circle id="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

* CSS animations
* D3.js
* Flash animation
* GIF animation

## References

1. ↑ "Scalable Vector Graphics (SVG) 1.1 Specification". World Wide Web Consortium. January 2003 – April 2009. http://www.w3.org/TR/SVG11/animate.html#Animation.classExample.
2. ↑ Festa, Paul (9 January 2003). "W3C releases scripting standard, caveat". CNet. http://news.cnet.com/2100-1023-979976.html.
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. pp. 508. ISBN 9783540785460. https://openlibrary.org/works/OL15498417W/SMIL_3.0. Retrieved 2022-04-24.
4. ↑ Dick Bulterman (in en). SMIL 3.0. https://link.springer.com/book/9783540785460. Retrieved 2022-04-24.
5. ↑ "SVG Animation support in Amaya". World Wide Web Consortium. 15 April 2003. http://www.w3.org/2003/03/amayasvganim.html.
6. ↑ McCathieNevile, Charles (31 October 2006). "Animating Your SVG". Opera Developer Community. Opera Software. http://dev.opera.com/articles/view/animating-your-svg/.
7. ↑ "SVG animation with SMIL". 29 March 2011. https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL.
8. ↑ "When can I use SVG SMIL animation?". http://caniuse.com/svg-smil.
9. ↑ Dahlström, Erik (August 2008). "Tricks of javascript, SVG and SMIL". Opera Software at "SVG Open" website. http://svgopen.org/2008/presentations/70-Tricks_of_Javascript_and_declarative_animation/index.html.
10. ↑ "W3C Synchronized Multimedia Home page". https://www.w3.org/AudioVideo/Overview.html.
11. ↑ "Synchronized Multimedia Integration Language (SMIL) 1.0 Specification". SYMM Working Group. 1998-06-15. https://www.w3.org/TR/1998/REC-smil-19980615/.
12. ↑ "Press Release: W3C Issues SMIL as a W3C Recommendation". 1998-06-15. https://www.w3.org/Press/1998/SMIL-REC.
13. ↑ Schmitz, Patrick; Yu, Jin; Santangeli, Peter (1998-09-18). "Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Extending SMIL into the Web Browser.". https://www.w3.org/TR/NOTE-HTMLplusTIME.html.
14. ↑ "Synchronized Multimedia Integration Language (SMIL 2.0)". 7 August 2001. https://www.w3.org/TR/2001/REC-smil20-20010807/.
15. ↑ Schmitz, Patrick; Cohen, Aaron (4 September 2001). "SMIL Animation". https://www.w3.org/TR/smil-animation/Overview.html.

* v
* t
* e

Animation topics

By country|

* Algeria
* Bangladesh
* Bhutan
* China
* Croatia
* Czech Republic
* Egypt
* Estonia
* India
* Japan
* Kenya
* Korea
* Malaysia
* Mexico
* Pakistan
* Philippines
* Poland
* Portugal
* Romania
* South Africa
* Spain
* Taiwan
* Thailand
* United States
* Vietnam
* Zimbabwe

History|

* Azerbaijan
* Bangladesh
* Brazil
* Canada
* China
* France
* Hungary
* Iran
* Japan
* Korea
* Russia
* United Kingdom
* United States

Industry|

* Animator
* List
* Animation department
* Animation director
* Story artist
* Animation studios
* List
* Animation database
* Art pipeline
* Biologist simulators
* Animation film festivals
* international
* regional
* Highest-grossing films (Openings weekends)
* Outsourcing
* International Animation Day

Works|

* Films
* Based on cartoons
* Computer-animated
* Feature-length
* Lost or unfinished
* Package
* Short
* Short series
* Stop-motion
* Series
* Direct-to-video
* Internet
* Television

Techniques|

| Traditional|

* Limited animation
* Masking
* Rotoscoping
* Exposure sheet

|

Stop motion|

* Barrier grid
* Clay
* clay painting, strata-cut
* Cutout (silhouette)
* Graphic
* Model
* go motion
* Object
* Pixilation
* Puppetoon

Computer
(history, timeline)|

| 2D|

* Flash
* PowerPoint
* SVG
* CSS
* Multi-sketch
* Onion skinning
* Digital puppetry

|

3D|

* Bind pose
* Cel shading
* Crowd
* Morph target
* Motion capture
* Non-photorealistic rendering
* Physically based animation
* Procedural
* Skeletal
* Machinima
* Digital puppetry
* Virtual cinematography

Puppetry|

* Puppet
* Digital puppetry

Other methods|

* Blocking
* Chuckimation
* Drawn-on-film
* Flip book
* Inbetweening
* Kinegram
* Paint-on-glass
* Pinscreen
* Pixel art
* Pose to pose
* Straight ahead
*   * Rubber hose
* Sand
* Syncro-Vox
* Zoetrope

Variants|

* Abstract animation (visual music)
* Adult animation
* Animated cartoon
* Animated sitcom
* Animated documentary
* Anime
* Educational animation
* Erotic animation
* Independent animation
* Instructional animation

Related topics|

* Animation music
* Bouncing ball
* Mickey Mousing
* Key frame
* Cel
* Character animation
* model sheet
* walk cycle
* lip sync
* off-model
* Creature animation
* Twelve principles
* Motion comic
* Films with live action and animation
* highest grossing
* Cartoon physics
* Cartoon violence
* Most expensive animated films
* List of animated series by episode count
* anime series
* anime franchises

* Book
* Category
* Portal

* v
* t
* e

World Wide Web Consortium (W3C)

Products and
standards|

| Recommendations|

* ActivityPub
* ARIA
* Canonical XML
* CDF
* CSS
* DOM
* Geolocation API
* HTML (HTML5)
* ITS
* JSON-LD
* Linked Data Notifications
* MathML
* Micropub
* OWL
* PLS
* RDF
* RDF Schema
* SISR
* SKOS
* SMIL
* SOAP
* SRGS
* SRI
* SSML
* SVG
* SCXML
* SHACL
* SPARQL
* Timed text
* VoiceXML
* Web storage
* WSDL
* Webmention
* WebSub
* XForms
* XHTML
* XHTML+RDFa
* XInclude
* XLink
* XML
* XML Base
* XML Encryption
* XML Events
* XML Information Set
* XML namespace
* XML Schema
* XML Signature
* XOP
* XPath
* XPath 2.0
* XPointer
* XProc
* XQuery
* XSL
* XSL-FO
* XSLT (elements)

|

Notes|

* IndieAuth
* JF2
* Post Type Discovery
* XAdES
* XHTML+SMIL
* XUP

Working drafts|

* CCXML
* CURIE
* EME
* InkML
* MSE
* RIF
* SMIL Timesheets
* sXBL
* XFDL
* XFrames
* XBL
* XMLHttpRequest

Guidelines|

* Web Content Accessibility Guidelines

Initiative|

* Multimodal Interaction Activity (MMI)
* Markup Validation Service
* Web Accessibility Initiative
* WebPlatform

Deprecated|

* C-HTML
* HDML
* JSSS
* PGML
* VML
* XHTML+MathML+SVG

Obsoleted|

* P3P

Organizations|

* Advisory Committee (AC)
* World Wide Web Foundation

Elected groups|

* Advisory Board (AB)

Working groups|

* CSS
* Geolocation
* Social Web
* SVG
* Web Hypertext Application Technology (WHATWG)
* Web Platform

Community groups|

* Web Incubator Community Group (WICG)

Closed groups|

* Device Description (DDWG)
* HTML

Software|

* CERN httpd
* Libwww

Browsers|

* Line Mode (1990–)
* Arena (1993–98)
* Agora (1994–97)
* Argo (1994–97)
* Amaya (browser/editor, 1996–2012)

Conferences|

* International World Wide Web Conference (IW3C)
* Steering Committee (IW3C2)
* First conference ("WWW1", 1994)

* v
* t
* e

Vector graphics markup languages and file formats

By type|

| 2D|

* Asymptote
* CGM
* DrawingML
* Graphics Layout Engine
* GeoGebra
* HVIF
* MetaPost
* PGF/TikZ
* PGML
* PSTricks
* Remote Imaging Protocol
* SVG
* SWF
* VML
* WMF
* EMF
* XAML
* Xar

|

3D|

* 3DMLW
* 3DXML
* Asymptote
* COLLADA
* DWF
* GeoGebra
* IGES
* JT
* OpenGEX
* PRC
* STEP
* STL
* U3D
* VRML
* X3D
* XAML
* XVL
* xVRML

See also|

* Web3D
* Web3D Consortium
* Linden Scripting Language
* Scene description language

de:Scalable Vector Graphics#Animation

0.00

(0 votes)

Original source: https://en.wikipedia.org/wiki/SVG animation. Read more

|

Retrieved from "https://handwiki.org/wiki/index.php?title=SVG_animation&oldid=4157893"
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template