A Look Into: Scalable Vector Graphics (SVG) Animation
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
<svg> <rect width="200" height="200" fill="slategrey"> <animate attributeName="height" from="0" to="200" dur="3s"/> </rect> </svg>
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
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 (
<svg> <circle r="100" cx="100" cy="100" fill="slategrey"> <animate attributeName="r" from="0" to="100" dur="3s"/> </circle> </svg>
In moving SVG elements, we only need to target the element’s coordinate
<svg> <rect x="0" y="0" width="200" height="200" fill="slategrey"> <animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/> </rect> </svg>
In the example above, we move the rectangle from
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 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
cy, like so:
<svg> <circle r="100" cx="100" cy="100" fill="slategrey"> <animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/> </circle> </svg>
Animate Multiple Attributes
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:
<svg> <circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7"> <animate attributeName="r" from="0" to="100" dur="3s"/> <animate attributeName="stroke-width" from="0" to="10" dur="7s"/> </circle> </svg>
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.
Following a Path
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.
<svg> <defs> <path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095 c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/> </defs> <circle r="15" cx="15" cy="15" fill="slategrey"> </svg>
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
<mpath> element, as follows;
<animateMotion dur="3s"> <mpath xlink:href="#thepath"/> </animateMotion>
That’s it, now let’s see it in action;
We can also use transformation like
rotate for the Animation, and to do so we will use
<svg> <rect width="200" height="200" fill="slategrey"> <animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/> </rect> </svg>
Transformations in SVG shares similar principles with CSS3, and we have covered about it quite comprehensively in our previous post about CSS3 2D Transformation.
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.
- 20 SVG Uses That Will Make Your Jaw Drop
- SVG Animate Documentation
- Advanced SVG Animation Techniques