Introduction and brief review of SMIL animations, pros and cons
This article is the only tutorial to create animations for SVG images on SMIL which you will need to create cool and animated previews and icons for your site. For this tutorial, I created a special tool - Animation Editor on SMIL for SVG images which will allow you to practice various techniques and skills in creating animations.
I decided to write this article because I think I can do better and more clearly than the existing analogues on the Internet. And also because, I won’t be able to remember everything about this topic and most likely I will forget some things and techniques, but I also don’t want to constantly rummage through the documentation and jump from head to head.
Therefore, this guide will be divided into chapters, and the deeper the more difficult. That is, if you just started, then it is best to start with the first chapter (or from the second, if you consider this chapter as the first). Well, if you are already an animator, then it is better to navigate the problem that you encountered and start reading from the corresponding chapter.
In fact, why should you use SMIL Animations instead of CSS or JS? This approach has many advantages and only two disadvantages. Here are the main benefits:
- Easy embedding. That is, you do not need to add additional files or dependencies. Just edit the existing or used SVG image and you're done.
- Flexibility. Only in this language can very complex animations be described, where even JS or CSS cannot
- Morphing forms of paths of animation. More on this in the corresponding chapter, but in short, it makes it very easy to let the element go on any, even to the most winding, path.
- Built-in animation synchronization functionality.
- It's just faster, because everything, the animated image itself and the animation code in one file.
- Wide browser support. although not complete, so Opera and IE do not support SVG animations at all. But according to statisticshttps://caniuse.com/?search=smil, most users will be able to appreciate your work
SMIL browser support statistics
Now let's talk about the disadvantages:
- This is a rather difficult language for creating animations. it will take time to hone the skill in using it
- Not full support. Yes, I wrote it down to both pluses and minuses. Because for me, if I see 96% support among custom browsers, then it's good. But for burnt web developers, this may not be enough and they need full support from all existing browsers.
Animation elements
There are only 4 animation elements (https://www.w3.org/tr/rec-smil/smil-animation.html#animations-overviewbasic) :
- animate - for normal animations
- set - just sets the value for the specified element
- animateMotion - to move and transform the element. More about this element in this chapter.
- animateTransform - to change the geometry of the element - shift, stretch, rotate, scale. More about this in this chapter
And there are only two ways to place these elements in image:
- inside the target element, without reference to it
- outside the target element, using a link to it by hrefattribute.
In the first case, we have any animation element in the object to which we want to apply the animation, for example:
That is, we will set the white color to all elements in the group with id="20". Obviously, for relatively simple images, this method is more than acceptable. But as soon as the number of elements exceeds a hundred and more, you will need to somehow organize your code.
To do this, you can place all the animation elements in one place, where you can edit and group them. You just need to specify the id in the href attribute. For example:
My tool using the second method. It puts all the animations in one place, and the user only needs to specify the id of the elements required for the animation.
Simple animations
Let's start with the simplest animations. Animations of movement of objects on the canvas.
In the code example above, I used the minimum required attributes for the animation:
- href - this is the reference to the object we want to animate
- attributeName - what attribute we want to animate
- to - what value should this object be brought to at the end of the animation?
- dur - how long should this animation work?
- repeatCount - this property is optional, but I wanted you, my reader, to definitely see the working animation. The value of this attribute is indefinite, says that the animation will be repeated endlessly.
You can play around with the movement more. After all, you can specify where to start (from) and how much to change this value (by).
This is how you can create the effect of an infinite movement of an object. It is also important to understand that using the attribute from, in the beginning of the animation, the object will be placed there without interpolation, that is, instantly, which may not be desirable for some animations.
Even simpler animations
Except for the element animate, you can also use set. It is very easy to use and does not animate at all, but only sets values for the target object. Here is a good example:
In this example, so that the animation works all the time, I didn't use temporary values, but instead of their event ending with the previous animation (in this case, not animations, but setting a value that occurs instantly). These events will be discussed in more detail in this chapter.
Move objects
In the previous chapter, we tried moving objects using the general animation element - animate, and the normal value setter - set. And since the object movement is the most common type of animation, SMIL introduced a separate animation element for moving objects - animateMotion.
Here's how to use it:
First, I set the initial point to start the animation using set. After I created four movement animations from left to right, from top to bottom, right to left, from bottom to top. Combined all these animations using the ending events of each animation and most importantly, used new attributes such as fill and additive.
Attribute fill - Sets the behavior to change the final state of the animated attributes. So without fill="freeze" attribute values X and Y will not change and return to the state before the animation begins.
Attribute additive - Allows you to summarize the result of the previous animation with its current change.
It's all cool, but in fact animateMotion invented with a bias of use along with the attribute path. When used in such way you can easily animate the path of an object along a given path. For example, like this:
There is another way to set the route of the object's movement. We create an element path and we save it. Then we contact him through mpath, wrapped around animateMotion. The code below is similar to the code above.
As a matter of fact, if you need to animate the path of the object, and this path is very difficult and thorny, then we open our favorite SVG editor (in my case, this is inkScape), draw this path and copy it like this:
Then paste the copied path into the path attribute. You can learn about how this attribute is arranged and how to use it in this, exhaustive documentation. Or you can read a more simplified version in the context of use with SMIL.
Animate colors
Now let's talk about animating colors. As it was seen before, to animate colors you can use an animate, element or animateColor element. But it's better to use animate.
The first square, which is at the top left, is animated from the current color to the target.
The second one, which is at the top right, animates the color from #FFF to #111 ignoring the original fill color.
Third, which is at the bottom left, animates the colors step by step in the specified list in the attribute values.
And the fourth square animates not the fill of the square but the stroke of the square.
Animation rules apply to them the same as normal motion animations and transformations. Speaking of transformations ...
Animate shapes
This is one of those features of animated SVG images, for which it is worth learning this language. Just because it's so easy to do. For example, like this:
I agree, there is a lot of code for such a simple morph of forms, but what is important to understand here. All this animation is possible thanks to the attributevalueswhich says step by step which nodes and where to place these nodes. Each step is separated by a semicolon.
Moreover, it is quite important to take into account the fact that if you want to get exactly the animation, and not a sharp jump to the target point, it is necessary that the attribute path had an identical structure at each step. That is, if the first node is described by such a path structure - "M L L L L Z", then the second node should consist of the same structure.
Here a rather reasonable question may arise, but how and where can I get the necessary positions of the nodes? I do not calculate these positions myself, but copy from a regular SVG editor - Inkscape. like this:
In your editor, it may be a little different, but in Inkscape everything is quite straightforward and understandable.
Object transformations
If such a detailed transformation of paths is not needed, or you need to transform, for example, rect element, such an animation element will come to the rescue as animateTransform. It allows you to animate basic transformations as Scale, Rotate and Translate.
Here are examples of animations for object transformations:
Note that I am using the attribute values to set the necessary rotation angles and the degree of zoom of the object step by step. It’s so easy to see this or that animation in action.
Smooth animations
Sometimes the movements may seem too sharp or "straight-line". And it doesn’t seem to you, because by default, all animated attributes change their properties in a straight line. To change this, you need to resort to such animate attributes as calcMode and keySplines.
Need to be set calcMode equal to spline but in attribute keySplines you will have to write down the 4 numbers describing the spline curve. Together, they set the rate of change of animated attributes using splines.
Generally calcMode a rather interesting attribute that can radically change the style and behavior of the animation. Of course, I could try to describe the work of this attribute, but it's probably better to leave it to those who developed the SMIL in the first place and just direct you to the official documentation for further review.
I was too lazy to make an additional tool for generating such splines, maybe someday I will do it, but for now it can be used, here is the site specially designed to generate custom splines. Read more about how it works, in the official documentation.
Interactive animations
All my animations in this article begin immediately after loading the image itself into the DOM tree. In the code it looks like this: begin="0". And such behavior is standard, that is, it does not need to be prescribed yourself, it is implied.
But sometimes you want the animation to be performed on a click on a specific element or with a mouse hover, for example. It's easy to implement using the Begin attribute not the time, but the names of the event, as I already did in this chapter. For example, can you open all the animations in this image:
To start the animation for the first square, left-top, you just need to hover the mouse. You will have to click on the rectangle. Animation for a circle can be activated in two ways. The first is the usual click, the second is after the end of the animation of the square. The rounded triangle activates your animation after you remove the mouse. And finally, the animation for the pentagon will be activated 2 seconds after the click.
Events should be used in conjunction with a specific animation element. Where first comes the id of the animation element, and then, through the point, there is an appeal to the event.
Here are all the built-in events that can be used in begin and end attribute:
- begin - When the animation started
- end - when the animation is over, that is, if the number of repetitions is 5, then this event is activated only at the end of the 5th replay
- repeat - when the animation was repeated, that is, if the number of repetitions is 5, then at the end of each repetition.
Conclusion or what will be the next
That's all I know about SVG images animations via SMIL. Minimal but quite sufficient toolkit to make pretty cool animations for your site.
Just like with other articles of this type, the older it is, the more details this article will collect, because I will not stand still. And maybe I'll learn a couple or two tricks related to animations. And so, I hope the article was useful to you and helped you animate your SVG image in a short time.
