Denis Potschien July 19th, 2016

Animated and Interactive SVG: Essential Tips

Animated and Interactive SVG: Tips You Should Keep in Mind
The SVG format has turned into a contemporary alternative to Flash in many regards. Not only is it vector-based, but it also renders animations and interactions possible. Due to the different ways to create animations and to integrate SVGs into a web project, you should keep the following tips in mind to make sure that everything works the way you want it to. Animated and Interactive SVG: Tips You Should Keep in Mind

Animations Via JavaScript, CSS or SMIL?

There are three options when it comes to setting SVGs in motion. Certainly, the easiest one is using SMIL: "Synchronized Multimedia Integration Language". Here, unique elements like "<animate>" are available, allowing you to tween and morph any SVG shape. However, Google has marked it as "deprecated" in its Chrome browser, which is why you should probably forgo SMIL.
<rect x="0" y="0" width="50" height="20">
  <animate attributeName="x" from="0" to="100" dur="5s"/>
Using CSS, you get to animate elements in a way similar to how you do it in combination with HTML. The attributes "transition", "animation", and "@keyframes" are available. However, here, you only get to change values via animation that can be defined via CSS, meaning position and color, for example. The shapes of a polygon or a path can not be altered using a CSS animation.
rect {
  animation: animation 5s infinite;

@keyframes animation {
  0% {
    transform: translateX(0);
  100% {
    transform: translateX(100px);
Both the SMIL, and the CSS example result in the same animation. As animation options via CSS are limited, there are plenty of JavaScript frameworks that are used to realize complex SVG animations. JavaScript grants you access to all elements and attributes of an SVG element.
var i = 0;

function animation() {
  document.getElementsByTagName("rect")[0].setAttribute("width", i++);
In the example, a rectangle's width is enhanced via animation. Of course, significantly more complex animations would be possible as well. The way how you should implement SVG into your web project depends on whether you choose JavaScript, CSS, or even SMIL. Generally, you have the option to use SVG graphics or files like normal images via the "<img>" element, or via the "url()" function, as a "background-image", for example. However, the browsers deal very differently with the three animation options, depending on the implementation method. When using an animated SVG like a regular image file, CSS and SMIL animations are only executed in Chrome. Firefox only supports SMIL animations, and Internet Explorer and Edge don't support any animations in that case.

Implementing SVG Via an "<object>" Element or Inline

The integration using an "<object>" element provides the largest possible support amongst all animation options. Alternatively, you could also directly embed an SVG within your HTML document, even saving a request doing so. In this case, Firefox supports all three animation methods. Internet Explorer and Edge however, generally don't support any CSS and SMIL animations. Thus, you'll only have the JavaScript option left.

Interactions Using JavaScript

Aside from animations, JavaScript is also able to create an interactive SVG graphic. This way, you can integrate event listeners that react to mouse clicks, for example. To make JavaScript work within an SVG, it either needs to be implemented into the HTML document with an "<object>" element, or directly.
document.getElementsByTagName("circle")[0].addEventListener("click", function() {
}, false);
In the example, a click on a circle triggers an "alert()". When tieing in an SVG file as a background via the "<img>" element, or using CSS and "url()", the JavaScript it contains is not executed. Even when integrating an SVG file with an "<object>" element, you are able to control the elements marked up inside using a JavaScript of the integrating HTML document. For that, the attribute "contentDocument" is available, granting access to the elements of the files integrated via "<object>" or "<iframe>".
document.getElementsByTagName("object")[0].contentDocument.getElementsByTagName("circle")[0].addEventListener("click", function() {
}, false);
In contrast to CSS and SMIL, JavaScript within SVG is dealt with the same way amongst all browsers. (dpe)

Denis Potschien

Denis works as a freelance web designer since 2005.


  1. It’s been a pain filtering out web results for up-to-date information. Now if only someone would take this info and add a way of filtering results, e.g. “I want to use SVG [that is animated], [has IE fallback], and [can be controlled via CSS].”

  2. Nice short article :) Actually I’m a flash animator since long time. And I feel the need for another tool to substitute it after the big problem of the SWF in memory leakage. But to be honest flash is super when it comes to usability and flexibility in terms of producing animation, using tools this is not just my opinion but other motion designers, actually the main problem is the complexity in exporting this to other forms to fit the need of other new web technologies as you mentions above.

    I think what you talked about summarizes the best ways to apply for web motion graphics but it has withdraws if the animation is long, like having hot computer because it consume from the device processing and this will eat from the power of your device unless your animation is quit short and small, also when having sequence of images run in the background as some websites use to do.

Leave a Reply

Your email address will not be published. Required fields are marked *