Animation - Animation Basics

Animation is a core feature of SVG.

SVG provides two major animation means by: using SVG’s animation elements, or using SVG DOM.

1) Using SVG's animation elements

• SVG’s animation elements are developed in collaboration with W3C’s SMIL working group.
• The animation elements support the time-based modification to the SVG document’s elements. They share the same timing and animation mechanisms with SMIL.
• Various SVG elements can be animated, such as color value, position, filter parameters etc.

2) Using the SVG Document Object Model (DOM)

• The Document Object Model (DOM) is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.
• The document can be further processed and the results of that processing can be incorporated back into the presented page.
• SVG offers a set of additional DOM interfaces (ECMAScript and Java bindings) to support efficient animation via scripting.
• All the SVG elements and their attributes can be accessed by using DOM, so it is less limited and more powerful than the animation elements.

There are five different types of built-in/declarative animations in SVG:

Attribute	Meaning
<animate>	This tag is used to modify a particular attribute of an element over a period of time.
<set>	A shorthand for <animate> used for animating non-numeric values
<animateMotion>	This tag is used to move an element along a predefined path over a period of time.
<animateColor>	This tag is used to apply a color transform to the specified element.
<animateTransform>	This tag can be used to perform a number of transformations on an element.

The first four elements are derived directly from SMIL Animation. The fifth animation element, <animateTransform>, is an SVG-specific animation element.