|This article is outdated. (February 2010)|
|Scalable Vector Graphics|
- 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 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.
SVG animation elements were developed in collaboration with the W3C Synchronized Multimedia Working Group, developers of the Synchronized Multimedia Integration LanguageSMIL 3.0 Specification SMIL. 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
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 gets you a vector image with an alternative rasterized image for browsers that don’t support SVG.
Drawbacks of this solution
The downside is that you need to manage both formats, 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>
You will have to determine the browsers you want or need to support and consider performance issues to decide which method is best.
Libraries to get started
If you aren’t sure where to start with SVG, there are several libraries out there to help. They also abstract all browser compatibility issues to make your life easier.
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.
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.
|Wikimedia Commons has media related to SVG animation.|
- Scalable Vector Graphics (SVG) 1.1 Specification. World Wide Web Consortium. 14 January 2003, edited in place 30 April 2009. Retrieved 4 February 2010.
- Festa, Paul (9 January 2003). "W3C releases scripting standard, caveat". CNet. Retrieved 24 February 2010.
- 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.
- McCathieNevile, Charles (31 October 2006). "Animating Your SVG". Opera Developer Community. Opera Software. Retrieved 24 February 2010.
- "SVG animation with SMIL". 29 March 2011.
- "When can I use SVG SMIL animation?".
- "SVG Animation support in Amaya". World Wide Web Consortium. 15 April 2003. Retrieved 4 February 2010.
- SVG 1.1 Specification – Animation
- SVG Animation and other SVG Tutorials
- SMIL animations embedded in SVG – Chapter from SVG Primer (W3C)