This article has multiple issues. Please helpimprove it or discuss these issues on thetalk page.(Learn how and when to remove these messages) This article needs to beupdated. Please help update this article to reflect recent events or newly available information.(February 2010) This article'stone or style may not reflect theencyclopedic tone used on Wikipedia. See Wikipedia'sguide to writing better articles for suggestions.(August 2014) (Learn how and when to remove this message) (Learn how and when to remove this message)

Animation ofScalable Vector Graphics, an openXML-based standardvector 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 ofCSS Animations as a feature inWebKit has made possible stylesheet-driven implicit animation of SVG files from within theDocument Object Model (DOM).
• SMIL: Synchronized Multimedia Integration Language, a recommended means^[1][2][3][4] of animating SVG-basedhypermedia, supported by theAmaya (2003)^[5]Opera (2006),^[6]Mozilla Firefox (2011),^[7]Google Chrome (2016) andSafari (2017)web browsers,^[8] and any browser that aims to pass theAcid3web 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 ashim to give current SVG-enabled browsers SMIL support.^[9] This method is also known as SVG+Time.^{[citation needed]}

Because SVG supportsPNG andJPEG raster images, it can be used to animate such images as an alternative toAPNG andMultiple-image Network Graphics (MNG).

SVG animation elements were developed in collaboration with the working group that published several versions ofSynchronized Multimedia Integration Language (SMIL). The SYMM Working Group (in collaboration with the SVG Working Group) developed the SMIL Animation specification, which represents a general-purposeXML 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 theWorld 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 byMicrosoft published "Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Extending SMIL into the Web Browser".^[13] For the next two years, the lead author ofHTML+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 (fromIntel) published SMIL Animation on 4 September 2001.^[14][15] SVG 1.0 also became aW3C Recommendation on 4 September 2001.

Certainweb browsers added support for SVG animation during the 2000s, includingAmaya as early as 2003, but SVG animation was only supported by widely used browsers beginning in the 2010s, notably byFirefox 4 (2011).Internet Explorer supports ECMAScript animation, and its successorMicrosoft Edge supports ECMAScript and CSS animations as of version 42.17134.

This sectionpossibly containsoriginal research. Pleaseimprove it byverifying the claims made and addinginline citations. Statements consisting only of original research should be removed.(May 2019) (Learn how and when to remove this 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.

See fileSVG animation using SMIL.svg.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><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"dur="1s"repeatCount="indefinite"/></circle></svg>

See fileSVG animation using CSS.svg.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><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><style>@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>

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><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><script>functionrotate(evt){constobject=evt.target.ownerDocument.getElementById('rot');setInterval(()=>{constnow=newDate();constmilliseconds=now.getTime()%1000;constdegrees=milliseconds*0.36;//360degreesin1000msobject.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). UsingrequestAnimationFrame provides better performance and can reach 60 FPS:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><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>letobject;functioninit(){object=document.getElementById('rot');window.requestAnimationFrame(rotate);}functionrotate(timestamp){constmilliseconds=timestamp%1000;constdegrees=milliseconds*0.36;//360degreesin1000msobject.setAttribute('transform',`rotate(${degrees})`);window.requestAnimationFrame(rotate);}</script><circleid="rot"cx="0"cy="1"r="2"stroke="green"fill="none"/></svg>

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

• 
  SMIL animation demonstrating change in transformation (scale) and CSS attributes (opacity and dash offset)
• 
  SMIL animation demonstrating motion along a path and simulation of 3D
• 
  SMIL animation demonstrating morphing of shapes (paths)
• 
  CSS3 animation demonstrating changes in transformation (rotation, scale and translation) and simulation of 3D

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

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 throughabstraction. Examples of libraries includeRaphaël andVelocity.js

Wikimedia Commons has media related toAnimated SVG files.

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

• Animation techniques
• Scalable Vector Graphics
• Web animation

• Articles with short description
• Short description matches Wikidata
• Wikipedia articles in need of updating from February 2010
• All Wikipedia articles in need of updating
• Wikipedia articles with style issues from August 2014
• All articles with style issues
• Articles with multiple maintenance issues
• All articles with unsourced statements
• Articles with unsourced statements from March 2009
• Articles that may contain original research from May 2019
• All articles that may contain original research
• Commons category link is on Wikidata