SVG Animation

  1. Native
  2. CSS
  3. JS

Why SVG Animation

  • Lightweight
  • Fast
  • Scalable
  • Lots of online tutorials
  • Interactivity
  • Supported on all major browsers (except IE8 and less)

Native SVG animation

Animation is done by manipulating the attributes of shapes over time. This is done using one or more of the 5 SVG animation elements.

Elements

Animation is achieved by nesting one or more of the following elements inside the element that needs animation.

  • set
  • animate
  • animateMotion
  • animateColor (deprecated)
  • animateTransform

animate

Animates an attribute

animateMotion

Animates motion along a path.

animateTransform

Animates the transform attribute of a shape.

animateTransform

AnimatesTransform type="scale".

Interactivity

begin="mouseover"

begin="mouseover"

Interactivity

begin="click"

Combine animations

Synchronize the beginning of one animation to the end of another

Additive animations

Cumulate two animations with the same name.

additive="sum"

Repeat animations

repeatCount, repeatDur

Example

Best use cases

CSS Animation

Positional attributes vs CSS translate

We are more familiar with CSS animations.

JS Libraries

Fine tune the interactivity

  • Snap.svg
  • Velocity.js
  • Svg.js
  • Raphael.js

Reference links