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
- <animate>: The <animate> element introduces a definition of animations that requires little understanding of the attribute being animated.
- <animatetransform> : The <animatetransform> element allows you to transform SVG over time using the transform attributes.
- <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.
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.
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
<?xml version="1.0" encoding="UTF-8"?>
<svg width="336px" height="336px" viewBox="0 0 336 336" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Circle Animation</title>
<g id="logo1">
<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />
<animate xlink:href="#my-circle" attributeType="css" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
</g>
</svg>
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
<?xml version="1.0" encoding="UTF-8"?>
<svg width="148px" height="400px" viewBox="0 0 148 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="loader-2" fill-rule="nonzero">
<path d="M18.958711,92.185284 C18.958711,89.695507 17.969507,87.308005 16.20906,85.545881 C14.448612,83.785433 12.059433,82.796229 9.569657,82.796229 L9.569657,82.796229 C4.3838806,82.796229 0.180602,86.999507 0.180602,92.185284 L0.180602,116.328567 C0.180602,118.818343 1.169806,121.207522 2.9302537,122.96797 C4.6923781,124.728418 7.079881,125.717622 9.569657,125.717622 L9.569657,125.717622 C14.755433,125.717622 18.958711,121.514343 18.958711,116.328567 L18.958711,92.185284 Z" id="first_anim" fill="#5C4D7F">
<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" attributeType="xml" type="translate" dur="1s" values="0,0;0,20;0,0;0,-20;0,0" repeatCount="indefinite"/>
</path>
<path d="M147.667562,43.895363 C147.667562,41.405587 146.678358,39.019761 144.91791,37.259313 C143.159139,35.498866 140.771637,34.509662 138.281861,34.509662 C138.280184,34.509662 138.276831,34.509662 138.275154,34.509662 C135.785378,34.509662 133.397876,35.498866 131.639104,37.259313 C129.878657,39.019761 128.889453,41.405587 128.889453,43.895363 C128.889453,51.057871 128.889453,60.879493 128.889453,68.042 C128.889453,70.531776 129.878657,72.920955 131.639104,74.681403 C133.399552,76.441851 135.788731,77.431055 138.278507,77.431055 L138.278507,77.431055 C143.464284,77.431055 147.667562,73.227776 147.667562,68.042 L147.667562,43.895363 L147.667562,43.895363 Z" id="Path" fill="#196673">
<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" attributeType="xml" type="translate" dur="1s" values="0,0;0,20;0,0;0,-20;0,0" repeatCount="indefinite"/>
</path>
<path d="M51.149756,94.867871 C51.149756,89.682095 46.946478,85.478816 41.760701,85.478816 C41.760701,85.478816 41.760701,85.478816 41.760701,85.478816 C36.574925,85.478816 32.371647,89.682095 32.371647,94.867871 C32.371647,108.756965 32.371647,134.630517 32.371647,148.519612 C32.371647,153.705388 36.574925,157.908667 41.760701,157.908667 C41.760701,157.908667 41.760701,157.908667 41.760701,157.908667 C46.946478,157.908667 51.149756,153.705388 51.149756,148.519612 C51.149756,134.630517 51.149756,108.756965 51.149756,94.867871 Z" id="Path" fill="#C333A4">
<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" attributeType="xml" type="translate" dur="1s" values="0,0;0,-20;0,0;0,20;0,0" repeatCount="indefinite"/></path>
<path d="M96.733617,64.018119 C96.733617,69.203896 100.936896,73.407174 106.122672,73.407174 C106.122672,73.407174 106.122672,73.407174 106.122672,73.407174 C111.308448,73.407174 115.511726,69.203896 115.511726,64.018119 C115.511726,50.129025 115.511726,24.255473 115.511726,10.3663781 C115.511726,5.180602 111.308448,0.9773234 106.122672,0.9773234 C106.122672,0.9773234 106.122672,0.9773234 106.122672,0.9773234 C100.936896,0.9773234 96.733617,5.180602 96.733617,10.3663781 C96.733617,24.255473 96.733617,50.129025 96.733617,64.018119 Z" id="Path" fill="#3575C6">
<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" attributeType="xml" type="translate" dur="1s" values="0,0;0,-20;0,0;0,20;0,0" repeatCount="indefinite"/>
</path>
<path d="M83.340801,25.120607 C83.340801,22.630831 82.351597,20.243328 80.591149,18.481204 C78.830701,16.720756 76.441522,15.731552 73.951746,15.731552 L73.951746,15.731552 C68.76597,15.731552 64.562692,19.934831 64.562692,25.120607 L64.562692,132.42409 C64.562692,134.913866 65.551896,137.303045 67.312343,139.063493 C69.074468,140.82394 71.46197,141.813144 73.951746,141.813144 L73.951746,141.813144 C79.137522,141.813144 83.340801,137.609866 83.340801,132.42409 L83.340801,25.120607 L83.340801,25.120607 Z" id="Path" fill="#AF4577">
<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" attributeType="xml" type="translate" dur="1s" values="0,0;0,20;0,0;0,-20;0,0" repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
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
<?xml version="1.0" encoding="UTF-8"?>
<svg width="336px" height="336px" viewBox="0 0 336 336" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Circle Animation</title>
<g id="logo1">
<circle id="first_anim" fill="#8B3C7A" cx="135.760701" cy="158.724587" r="50" />
<animateTransform xlink:href="#first_anim" xmlns="http://www.w3.org/2000/svg" attributeName="transform" attributeType="css" type="translate" dur="1s" values="0,0;0,20;0,0;0,-20;0,0" repeatCount="indefinite"/>
<set xlink:href="#first_anim" attributeName="fill" to="#0099AA" begin="click" dur="2s" />
</g>
</svg>
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
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.
You may also like
How does UI and UX Design Impact our everyday lives?
Today’s modern day users' wants and needs have shifted drastically. In today’s day and age, ther...
AI-Driven UI UX Testing: A Profitable Move for Modern Web Design
AI powered future is shining the brightest for companies and...
UX Design for Startups: A Key Necessity
UX design is all about top-notch user experience. UX design for startups is non-negotiable. Are you ...
