SVG animation

W3C SVG Logo
W3C's SVG logo
Scalable Vector Graphics

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

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 <img> tag element. By using the src attribute in the image tag it is possible to refer to an SVG file. Browser support for SVG and SVG animation varies (see Comparison of layout engines (Scalable Vector Graphics)).

Solution for browser compatibility

The most common solution is to use the <object> element, with the data attribute referencing the SVG file. When a browser does not support this, it falls back to the content inside the <object>. This could be a rasterized fallback <img>. 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 <image> 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 <image> element as <img> and use the rasterized src attribute, but modern browsers will show the vector SVG.

<svg width="96" height="96">
  <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</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.

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 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
   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">
<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 type="text/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; }
 </style>
 <circle class="rot" cx="0" cy="1" r="2" stroke="blue" fill="none"/>
</svg>

Note: the -moz and -webkit styles are pre-CSS3 browser-specific styles.

SVG animation using ECMAScript

No example as uploads with ECMAScript are barred
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 type="text/ecmascript">
  function rotate(evt) {
   var object = evt.target.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);
  }
 </script>
 <circle id="rot" cx="0" cy="1" r="2" stroke="green" fill="none"/>
</svg>

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

This specifies that the value of ‘attributeName’ is the name of a CSS property defined as animatable in this specification.

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.

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

Wikimedia Commons has media related to SVG animation.

References

  1. ↑ "Scalable Vector Graphics (SVG) 1.1 Specification". World Wide Web Consortium. 14 January 2003, edited in place 30 April 2009. Retrieved 4 February 2010. Check date values in: |date= (help)
  2. ↑ Festa, Paul (9 January 2003). "W3C releases scripting standard, caveat". CNet. 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: NY: Springer. p. 508. ISBN 978-3-540-78546-0.
  4. ↑ McCathieNevile, Charles (31 October 2006). "Animating Your SVG". Opera Developer Community. Opera Software. Retrieved 24 February 2010.
  5. ↑ "SVG animation with SMIL". 29 March 2011.
  6. ↑ "When can I use SVG SMIL animation?".
  7. ↑ "SVG Animation support in Amaya". World Wide Web Consortium. 15 April 2003. Retrieved 4 February 2010.
  8. ↑ Dahlström, Erik (August 2008). "Tricks of javascript, SVG and SMIL". Opera Software at SVG Open. Retrieved 24 February 2010.

External links

This article is issued from Wikipedia - version of the Tuesday, April 19, 2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.