Animated and Interactive SVG: Essential Tips

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.

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"/>
</rect>

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++);
  window.requestAnimationFrame(animation);
}

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() {
  alert("Hello");
}, 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() {
  alert("Hello");
}, false);

In contrast to CSS and SMIL, JavaScript within SVG is dealt with the same way amongst all browsers. (dpe)