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:

What Attributes Properties Clipping Patterns Viewbox > How From To Range Discrete Points Value Ranges Paced Splines When Begin time At event On click

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