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.
SMIL: Synchronized Multimedia Integration Language, a recommended
means of animating SVG-based hypermedia is currently supported by the Safari,
Opera, Mozilla Firefox, Google Chrome and Amaya web browsers, as will any
browser that aims to pass the Acid3 web standards test 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. 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. History
SVG animation elements were developed in collaboration with the W3C Synchronized
Multimedia Working Group, developers of the Synchronized Multimedia Integration
Language. The SYMM Working Group, in collaboration with the SVG Working
Group, has authored 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. SVG in HTML
The SVG can be embedded into HTML with the tag element. By using the src
attribute in the image tag it is possible to refer to an SVG file. This
only works sometimes and not compatible for old browsers.
= Solution for browser compatibility= The most common solution is to use the
element, with the data attribute referencing the SVG file. When a browser
does not support this, it falls back to the content inside the . This could be a
rasterized fallback . This method gives a vector image with an alternative
rasterized image for browsers that don’t support SVG.
The downside is that both formats need to be managed, and some browsers will
download both the SVG and the rasterized version, becoming a performance problem.
= Solution for performance problem= Using inline SVG combined with an SVG
element solve the performance problem. This has an SVG href pointing to the
vector SVG representation and a src attribute to the rasterized version.
Older browsers will rewrite the element as and use the rasterized src
attribute, but modern browsers will show the vector SVG.
Which method is best depends on which browser the developer chooses to
support, and severity of performance issues.
Libraries to get started There are several libraries for starting
out with SVG animation. They also abstract all browser compatibility
issues. GSAP
Raphaël Snap.svg
svg.js Velocity.js
Examples The following code snippets demonstrate
three techniques to create animated SVG on compatible browsers. The relevant
parts are in bold green. = SVG animation using SMIL=
SVG animation using SMIL = SVG animation using CSS=
SVG animation using CSS @keyframes rot_kf { from {
transform: rotate(0deg); } to { transform:
rotate(360deg); } } @-moz-keyframes rot_kf { from {
-moz-transform: rotate(0deg); } to { -moz-transform:
rotate(360deg); } } @-webkit-keyframes rot_kf { from {
-webkit-transform: rotate(0deg); } to { -webkit-transform:
rotate(360deg); } } .rot { animation: rot_kf 1s
linear infinite; -moz-animation: rot_kf 1s linear
infinite; -webkit-animation: rot_kf 1s linear
infinite; } Note: the -moz and -webkit styles are
pre-CSS3 browser-specific styles. = SVG animation using ECMAScript=
SVG animation using ECMAScript function rotate(evt) {
var object = get.ownerDocument.getElementById('rot');
setInterval(function { var now = new Date();
var milliseconds = now.getTime() % 1000; var degrees = milliseconds * 0.36;
360 degrees in 1000 ms object.setAttribute('transform',
'rotate(' + degrees + ')'); }, 20);
Authoring tools Conversion tools
There are some tools like Google Swiffy which can convert SWF, including Flash
animations to SVG animations. Swiffy uses Javascript to animate the SVGs it
produces, which are not stored as such on disk, but serialized as JSON.
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
This specifies that the value of ‘attributeName’ is the name of a CSS
property defined as animatable in this specification.
XML This 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.
Note: MediaWiki 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.
See also Flash animation
CSS Animations D3.js
References External links
SVG 1.1 Specification – Animation SVG Animation and other SVG Tutorials
SMIL animations embedded in SVG – Chapter from SVG Primer