SVG animation

Quality 0.50 · 1 view · Updated 2 months ago

Open XML-based standard vector graphics format

title: "SVG animation" type: doc version: 1 created: 2026-02-28 author: "Wikipedia contributors" status: active scope: public tags: ["animation-techniques", "scalable-vector-graphics", "web-animation"] description: "Open XML-based standard vector graphics format" topic_path: "general/animation-techniques" source: "https://en.wikipedia.org/wiki/SVG_animation" license: "CC BY-SA 4.0" wikipedia_page_id: 0 wikipedia_revision_id: 0

::summary Open XML-based standard vector graphics format ::

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 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 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 (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") within the World Wide Web Consortium ("W3C") published the first recommended version of the specification known as "SMIL 1.0". 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". 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. 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

: See file SVG animation using SMIL.svg.

SVG animation using SMIL attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite"/

::code[lang=xml]

SVG animation using SMIL ::

SVG animation using CSS

: See file SVG animation using CSS.svg.

SVG animation using CSS @keyframes rot_kf { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rot { animation: rot_kf 1s linear infinite; }

::code[lang=xml]

SVG animation using CSS