SVG Animation

Animation elements are used to animate the SVG graphics. The animation elements were initially defined in the Synchronized Multimedia Integration Language (SMIL).

In animation, you have to specify the starting and ending values of the attribute, motion, color, animation beginning time and the duration of the animation.

Example

Explanation

width: It is an XML attribute in the element.

from: It defines the starting value of the attribute.

to: It defines the end value of the attribute.

begin: It defines the beginning time of the animation.

dur: It defines the duration of the animation.

Multiple animations on a single object:

In this type of animation, we perform multiple animation on a single object.

Example

Explanation

• width and height define the XML attribute in the element.
• from defines that the width and height of the rectangle start with a 20 by 20.
• to defines that the rectangle will grow to 250-by-200 over the space.
• begin defines the time of the animation.
• dur defines the duration of the animation.
• fill-opacity is referred to with attributeType="CSS" since it was set in a style.
• The opacity of the green will increase for the first three seconds and then decrease for the next three seconds.

Simple animation on multiple objects:

You can also perform the simple animation on multiple objects.

Example

Explanation

width: It is an XML attribute in the element.

from: It defines the starting value of the attribute.

to: It defines the end value of the attribute.

begin: It defines the beginning time of the animation.

dur: It defines the duration of the animation.