SVG declarative animation provides four types of animation elements that define how you can change element attributes and properties over time. The timing model used is also used by the W3C SMIL multimedia Recommendation. For this reason it is sometimes called SMIL rather than declarative animation.
The aim is to describe:
- What can be animated
- How does animation take plac?
- When does animation occur
This is illustrated below:
Practically all SVG attributes and CSS properties can be animated via the following animation elements:
- animate: animates most attributes and properties including colour values
- animateTransform: controls transformations (rotate, translate, etc)
- set: changes attributes and properties that take discrete values (eg, display)
- animateMotion: animates motion along a path