SVG Animation

SVG Animation

SVG elements can be animated.

In SVG, we have four animation elements which sets or animates SVG graphics:

• <set>
• <animate>
• <animateTransform>
• <animateMotion>

SVG <set>

The <set> element sets the value of an attribute for a specified duration.

In this example, we create a red circle that starts with a radius of 25, then after 3 seconds the radius will be set to 50:

Here is the SVG code:

Code explanation:

• The attributeName attribute in the <set> element defines which attribute to change
• The to attribute in the <set> element defines the new value for the attribute
• The begin attribute in the <set> element defines when the animation should start

SVG <animate>

The <animate> element animates an attribute of an element.

The <animate> element should be nested inside the target element.

In this example, we create a red circle. We animate the cx attribute from 50 to 90%. This means that the circle will go from left to right:

Here is the SVG code:

Code explanation:

• The attributeName attribute defines which attribute to animate
• The begin attribute defines when the animation should start
• The dur attribute defines the duration of the animation
• The from attribute defines the starting value
• The to attribute defines the ending value
• The repeatCount attribute defines how many times the animation should play

SVG <animate> with Freeze

In this example, we want the red circle to freeze (stop) when it comes to its final position (instead of snapping back to the start position):

Here is the SVG code:

Code explanation:

• The fill="freeze" attribute defines that the animation should freeze when it comes to its final position

SVG <animateTransform>

The <animateTransform> element animates the transform attribute on the target element.

The <animateTransform> element should be nested inside the target element.

In this example, we create a red rectangle that will rotate:

Here is the SVG code:

Code explanation:

• The attributeName attribute animates the transform attribute of the <rect> element
• The begin attribute defines when the animation should start
• The dur attribute defines the duration of the animation
• The type attribute defines the type of transformation
• The from attribute defines the starting value
• The to attribute defines the ending value
• The repeatCount attribute defines how many times the animation should play

SVG <animateMotion>

The <animateMotion> element sets how an element moves along a motion path.

The <animateMotion> element should be nested inside the target element.

In this example, we create a rectangle and a text. Both elements have an <animateMotion> element with the same path:

Here is the SVG code:

Code explanation:

• The path attribute defines the path of the animation
• The begin attribute defines when the animation should start
• The dur attribute defines the duration of the animation
• The repeatCount attribute defines how many times the animation should play