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.
I’ve played around with some svgs with CSS animations like the green tick or the chevron:
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:
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!
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:
This article explains the issue with CSS transform animation on SVG.
SVG Animation and CSS Transforms: A Complicated Love Story | CSS-Tricks
The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP). Jack has been deep in…
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)>
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.