There seems to be three ways of animating SVG:

  • SMIL — It’s being depreciated and doesn’t work on IE: http://caniuse.com/#search=smil so I don’t use this method, though their morphing animations look pretty cool.
  • CSS — I’m more at home with CSS though issues with browser compatibility.
  • Javascript — with CSS for onclick states and logic.
  • Plugins and libraries — which is javascript. I really like Greensock, snap.svg and anime.js. Though its really hard to justify loading a whole library for one small animation, sacrifice page speed etc. So in reality it has been hard for me to use these libraries in a work setting. Fun for side projects though.

I’ve played around with some svgs with CSS animations like the green tick or the chevron:

Green tick SVG animation using CSS
Chevron SVG animation using CSS

Spinner Animation

Our spinners still rely on a javascript library to spin, I wonder if we can change it to SVG spinner that chases its tail like, and also reduce page speed:

Our version, took out the weird stuttering animation at the end, and made it brand colour. The stroke-disarray property is interesting in making it chase its tail:

Chasing tail spinner using CSS

However we had an issue with IE, something similar to this thread: http://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11

So we decided to stick with the simple css animations for now that doesn’t chase its tail til we figure it out. We didn’t want a spinning loader to not spin!

https://projects.lukehaas.me/css-loaders/

Line Drawing Animation

I came across this article using strokes and forwards to animate which was pretty cool: https://www.codeschool.com/blog/2014/11/04/inline-svg-animations/

So my attempt at doing this line drawing animation style for a current project:

Line drawing animation using CSS

Browser Compatibility

This article explains the issue with CSS transform animation on SVG.

It seems like Greensock has figured it out with their plugin, but what about us designers who doesn’t use Greensock’s library?

Basically any spinning, moving, growing would be affected with the CSS transform:

  • IE and Opera
  • Firefox doesn’t read % based numbers or text based like “top left”
  • Safari breaks when zooming in on % and px based numbers
  • All browsers render it differently when its px based

Seems like a bit of a nightmare, either not use CSS transform or wait for browser compatibility to get better.

For now, I create an animation and get the tester to see what it looks like in the different browsers.

We also found that if we create a parent div/class and wrap it around the SVG the css animations sometimes work. But we might have to break up the SVG into multiple SVGs.

<div/class (write all css animations to the div/class)>

<svg></svg>

</div>

Fallbacks

This one is a bit tricky, for IE if it doesn’t play it shows the static pictogram which is fine.

I’ve heard of methods where you can load another png/image if the SVG doesn’t load, but that would create another http request/page load.

Or detect if the browser supports and then load it. But to add the javascript to detect if the browser supports is clunky too.

Sydney based UX Designer who plays with code. I crack open ideas as a living!