Today we are going to continue our discussion on Scalable Vector Graphic (SVG), and this time we are going to work with SVG Animation. Don’t be scared though, SVG Animation is relatively easy and actually in this post we will start from the basics.
Recommended Reading: A Look into Scalable Vector Graphic
Animation in SVG can be done through <animate> element;
As you can see from the code snippet above, we add the <animate> inside the element that is going to affected. This <animate> contains some of the following attributes;
attributeName: This attribute specifies which element’s attribute will be affected in the animation.
from: This attribute is optional, we can specify an exact value or leave it to let it start from where it was.
to: This attribute specifies the animation direction. Depending on the specified value in attributeName, the results may vary. But in this example it will extend the height.
dur: This attribute specifies the animation duration. The value of this attribute is expressed in Clock Value Syntax. For example, 02:33 represents 2 minutes and 33 seconds, while 3h is equal to 3 hours, but we don’t need that long so we specified the duration for just 3s or 3 seconds;
The same thing goes to <circle> element, but this time we target the circle’s radius attribute (r).
In moving SVG elements, we only need to target the element’s coordinate x and y;
In the example above, we move the rectangle from 0 to 200 in 3 seconds, the rectangle will appear moving horizontally from the left to the right. Also, if you look carefully we also added another attribute to the <animate> element, namely fill.
fill attribute here is nothing to do with the background color like in the other SVG elements. This attribute specifies how the animation will act after the duration ends. In this example we freeze the affected element so it stays where the animation ends.
It also works similarly to the <circle> element, we can use cx or cy, like so:
So far, we only target one attribute to be animated, but it is also possible to animate more than one attribute at once. The example below shows how we do it:
As you can see, it works in a similar way, only now we have two <animate> elements inside the <circle> to target the radius and the stroke width to be affected.
In our previous post on Working with Text in SVG, we have showed you how to flow the Text to a Path. It is also possible to do the same thing in SVG Animation, we can animate an element to follow a Path. Here is an example.
The Path is better defined within a <defs> element, like shown above. In order for the element to follow the Path, we need to define the animation with <animateMotion> and link the path id with <mpath> element, as follows;
That’s it, now let’s see it in action;
We can also use transformation like scale, translate and rotate for the Animation, and to do so we will use <animateTransform>;
Transformations in SVG shares similar principles with CSS3, and we have covered about it quite comprehensively in our previous post about CSS3 2D Transformation.
Depending on your proficiency on SVG Animation you can create something like this or maybe this one.
One advantage of using SVG Animation over Flash Animation is that it doesn’t rely on third-party plugins to work and it also considerably faster than Flash. After Adobe stopped their Flash support in Android, you might want to start trying out this approach to serve animation in your next website.
联系客服
