SVG (Scalable Vector Graphics) has become one of the most popular formats for visual representation of graphics on the web. Its flexibility, scalability, and support for interactivity have made it an indispensable tool for creating visual effects on web pages. One of the powerful tools available in SVG is SMIL (Synchronized Multimedia Integration Language) animation.
In this article, we'll take a look at what SVG SMIL animations are, how they work, and how you can use them to create exciting and impressive visuals.
What are SVG SMIL animations?
SVG is an XML-based vector image format that is similar to HTML in its operation. It defines various elements for a number of familiar geometric shapes that can be combined in markup to produce two-dimensional graphics.
As SVG graphics are XML documents, web browsers provide APIs based on DOM nodes that can be used to interact with the images. Animation elements have been defined in the SMIL animation specification of the W3C.
Every transformation or transition animation that can be applied to an HTML element can also be applied to an SVG element. But there are some SVG properties that cannot be animated with CSS. An SVG path, for example, comes with a set of data (the d="" attribute) that defines the shape of the path. This data can be modified and animated using SMIL (Synchronized Multimedia Integration Language), but not CSS. This is because SVG elements are described by a set of attributes. Some of these SVG attributes can be set, modified, and animated with CSS, while others cannot.
Currently, all modern browsers support SMIL animation, which has a significant advantage over JS animation. Last one doesn't work if SVG is embedded in <img /> tag or using CSS background-image properties. SMIL imaging works in both cases and does not consume additional resources for JS processing.
The effect of drawing a figure
I think you've often seen this technique where an animated SVG figure looks like it's being drawn. It really looks cool and allows you to liven up your content quite effectively and add more appeal, especially when there is a lot of static text.
For example, a picture with an animated drop:
How does it work?
An element accepts a sequence of drawing commands. This single line drawing that we took from our design has the following set of input data ( d="M30..." ) that describes its shape and the sequence of its path in the coordinate line.
<svg width="60" height="60" viewBox="0 0 60 60" fill="none">
<path
d="M30 6.7251L44.15 20.8751C46.9484 23.6716 48.8545 27.2353
49.62 73 31.1152C50.4 34.9952 50.0047 39.0172 48.4914 42.6725C46.978
46.3278 44.4145 49.4521 41.1253 51.6503C37.836 53.8486 33.9687 55.0219
30.0125 55.0219C26.0563 55.0219 22.189 53.8486 18.8997 51.6503C15.6105
49.4521 13.047 46.3278 11.5337 42.6725C10.0203 39.0172 9.62499 34.9952
10.3978 31.1152C11.1705 27.2353 13.0766 23.6716 15.875 20.8751L30 6.7251Z"
stroke="#000"
strokeWidth="2"
strokeLinejoin="round"
/>
</svg>
Since the SVG image is a part of the web browser's DOM and the stroke-dasharray is a presentation element, the attribute can also be set in the SVG itself or with CSS. Most of the SVG line animation examples that you see use JavaScript, but we'll use it just in the beginning to get some information. So let's set the id to our <path> and get the total length of the line using the getTotalLength() method. This is done to ensure that the length of each dash and space in the dashed curve is equal to the length of the entire path.
const path = document.querySelector('#path');
const length = path.getTotalLength();
console.log(length); //134.26559448242188
And add the value to the stroke-dasharray attribute:
<path
...
strokeWidth="2"
strokeLinejoin="round"
strokeDasharray='134.26559448242188'
/>
Now this SVG attribute can be used to animate SVG, giving the viewer the illusion that the paths are being drawn gradually. Let's expand our <path> and add <animate /> to it with the attributes value (indicates how our drawing will be filled), dur (the time for the animation to play), and fill='freeze' (the animation effect freezes on the last frame).
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" >
<path
...
strokeDasharray='134.26559448242188'
>
<animate
attributeType='XML'
attributeName='stroke-dasharray'
dur='3.0s'
values='0,0,0,134.26559448242188; 134.26559448242188,0,0,0'
fill='freeze'
/>
</path>
</svg>
Now our drop is drawn gradually. For a more interesting animation effect, as if the line were moving like a snake, add an intermediate point for the value (stroke-dasharray / 2) and set the keytimes:
<path
...
strokeDasharray='134.26559448242188'
>
<animate
attributeType='XML'
attributeName='stroke-dasharray'
dur='3.0s'
values='0,0,0,134.26559448242188; 0,67.13279724121094,67.13279724121094,0; 134.26559448242188,0,0,0'
keyTimes='0; 0.5; 1'
fill='freeze'
/>
</path>
That's all we need for this animation. Of course, we can further complicate our SVG animations with other attributes if we want to and if necessary:
- from, to — similar to their analogues in @keyframe CSS;
@keyframes animation {
from { /* start value */ }
to { /* end value */ }
}
- begin — specifies the conditions under which the animation should start (handlers: click, blur, focus, ets) and the delay in seconds;
- restart — allows you to restart the animation;
- repeatCount — the number of times the animation is repeated;
- keytimes — control of animation frames (similar to CSS);
@keyframes example {
0% { /* value */ }
50% { /* value */ }
100% { /* value */ }
}
- keySplines — allows you to set the animation function (for example, Bezier);
- and others.
Conclusion
SVG animation is a simple tool and it can be used to create crisp graphics regardless of the screen size, zoom level, and screen resolution. Thanks to SVG, it is easier to create a modern, vibrant UI while using standard web technologies. SVG animation can be created using CSS or SMIL, but CSS does not work in all cases.
SMIL imaging has great potential and many advantages. In this article, I've only touched on the basics and some technical details about how SMIL works in SVG. But there are many more animation elements that will help you achieve the result desired.