Web Design Tutorials and Tips

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

Basic Implementation

Animation in SVG can be done through <animate> element;

  <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 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).

  <svg>  <circle r="100" cx="100" cy="100" fill="slategrey">  <animate attributeName="r" from="0" to="100" dur="3s"/>  </circle>  </svg>  

• Basic Implementation Demo

Moving Element

In moving SVG elements, we only need to target the element’s coordinate x and y;

  <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 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:

  <svg>  <circle r="100" cx="100" cy="100" fill="slategrey">  <animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>  </circle>  </svg>  

• Moving Element Demo

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.

• Multiple Attirbutes Demo

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 id with <mpath> element, as follows;

  <animateMotion dur="3s">  	<mpath xlink:href="#thepath"/>  </animateMotion>  

That’s it, now let’s see it in action;

• Following Path Demo

Transformations

We can also use transformation like scale, translate and rotate for the Animation, and to do so we will use <animateTransform>;

  <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.

• Transformation Demo

Final Thoughts

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.

Further References

• 20 SVG Uses That Will Make Your Jaw Drop
• SVG Animate Documentation
• Advanced SVG Animation Techniques

• View Demo
• Download Source