12th Apr 2021

SVG Animation Using Animation Element

UI/UX

Written By, Nirav Nakrani

Overview

In this tutorial, we will learn how to animate SVG graphics using Animation Elements. Using Animation Elements, you can apply your animation in any SVG graphics. The Animation Elements are located in SMIL Animation specification.

Basic Intro of Elements

In this article, we will cover below elements

  1. <animate>: The <animate> element introduces a definition of animations that requires little understanding of the attribute being animated.
  2. <animatetransform> : The <animatetransform> element allows you to transform SVG over time using the transform attributes.
  3. <set> : The <set> element sets the value of an attribute for a specified duration.

How to identify the target of the animation

If you want to give animation to an SVG element you need to identify the particular element to which you wish to animate.

We have two ways to identify the element

1.xlink:href: xlink:href attribute takes a URI reference of the element which you want to animate.

For eg.

uri-animate

In the above example, we animate a rectangle whose id is “oval_anim”. So <animate> tag is trying to find the element whose id is “oval_anim” with the help of xlink:href. So easily you can animate that particular element.

2.If you don’t provide xlink:href then the target element will be the parent element of the current animation (<animate>) element.

For eg.

animate-element

In the above example, we add an <animate> element in this particular rectangle which we want to animate. This one also works for identifying the target element.

Specify the property of animation using attributeName and attributeType

attributeName property is used to specify the name of the attribute which you want to animate.

attributeType property is used to specify the namespace. For eg. Some of the attributes belong to CSS, means some of the element is a CSS property (font-family, font-size, color, cursor, display, etc.).and other is XML(clip-rule, flood-color,stroke-dashoffset, stroke-dasharray, stroke-opacity, etc.).

Let’s understand both properties using the below example

circle-animation

As you can see in this example we write attributetype=“css” and attributeName=“opacity” it means we are applying animation opacity and opacity is a property of CSS that’s why we can write attributeType=“css” and attributeName=“opacity”.

Now let’s talk about from, to, dur, repeatCount attributes

from is the start position of the animation.
end is the end position of the animation.

So, from and the end is relevant to from and end attributes of keyframes in CSS.

dur attribute is relevant to animation-duration in CSS.

repeatCount Using this we can run animation one or more times. If we write repeatCount=“2” then animation runs two times. But if we want animation endless then write repeatCount=“indefinite”.

<animateTransform> Element

Using <animateTransform> we can apply transformation in animate element.

Let’s understand <animateTransform> in below example

vertical-animation

In the above example, we made one simple loader using <animateTransform>. In this example, we set all animate parameters in translateY position which means horizontally translate.

All parameters, up and down depending on his specific value. In this example, we have used a value attribute. value is dependent on dur attribute. The value is divided into a particular duration to perform an animation value-wise.

In our example we have set dur=“1s” so 1s is divided to a given value. So we have set values=“0,0;0,20;0,0;0,-20;0,0” in value parameters have a 5 comma-separated value so our 1 second is divided to given value means (60 / 5) = 12. and another thing in value parameter the first element is considered X-axis and second parameter consider Y-axis. It means
values=“0[x],0[y];0[x],20[y];0[x],0[y];0[x],-20[y];0[x],0[y]”.

<animateTransform> element allowing animations for controlling translation, scaling, rotation, and skewing. If you want to do translation then you have to specify type=“translate”, for rotation type=“rotate”, for scaling type=“scale” and for skew type=“skew”.

<set> Element

As we discussed above, the <set> element is used to set a value of an attribute that we want to animate with a specified duration.

Let’s understand this in the below example

circle-bounce-animation

In the above example, the circle is continuously bouncing but we need to change the color of the circle when we click on the circle for a specific time duration. That time using the <set> method we can do that. In <set> method we apply attributeName=“fill” means fill the color of the circle when begin=“click” means when we click on the circle for 2 seconds after 2 seconds it will revert to the default color.

If you want to learn more about basic elements then you can prefer the below codepen example

Link: https://codepen.io/yudizsolutions/pen/vYyZGVb

Conclusion

I hope that you will find this blog helpful for how to animate SVG with some basic elements. Like transform, translate, scale or fill animation. In the future, we will learn some more elements for SVG animation.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd