Animating SVG with CSS3

The animated banner that I cooked up with keyframe animations:

C:\Are you tired of using systems like this? Going mad performing repetitive tasks? Our Solution = Build a Web Based Application Visit Ahead4

I find that there's something quite alluring about using scalable vector graphics (SVG) on the web. As a web designer, for me its an exciting way to include sharp vector graphics on a web page.

What's more, it becomes scalable as the browser window gets resized without loss of quality and therefore lends itself well to responsive websites. This is unlike canvas, whereby it is necessary to redraw objects as the web page is scaled up or down.

From a frontend development point of view, an SVG is handy in that it can interact with the DOM, you can style it with css and even use JavaScript with it.

Aside from my personal likes, there are some other nice things about SVG.

  • Typically, SVG images are smaller than bitmaps

  • The graphics are constructed within the browser, reducing the server load

  • Support is pretty good, even down to IE9

Browser Support

IE Firefox Chrome Safari Opera
9+ 34+ 31+ 7.1+ 26+

Community Following

There are a number of JS frameworks that work specifically with SVG. Mostly, they're for data visualisation - charts & graphs etc. but I've also seen them used for mapping to good effect. Raphaël and SVG.js are typically your goto guys but I have recently found a (newish *I think*) library - with a sleek website that demonstrates some beautiful SVG animation. It's called snap.svg (http://snapsvg.io/) and I'm planning to get stuck into it very soon!

Onto the animation! The nuts and bolts.

Revisiting an earlier point - css styling. This capability provides a decent opportunity to animate SVG with CSS3. I gave it a go, had a lot of fun and the results were surprisingly good!

Keyframe animation in CSS3 is quite well supported now. Additionally, tools such as Modernizr help detect browser support so that you can provide alternative options for displaying content in older browsers. It really is a great time to experiment in the wild.

CSS3 keyframe animation can and will cause you to end up with a file potentially hundreds of lines long (Of course for deployment, there's minification.). And, if you're attempting something brave and wonderful like this example from Stripe which a friend pointed me to - you'll be looking at potentially thousands of lines!

I found out very early on that when making my SVG file in my vector editing program it's a hugely important thing to give your vector shapes rememberable names. Also, actually taking the time to plan or even storyboard your animation will help prevent you from sitting there scratching your head. A plan gives you more time to get stuck into the CSS3 without wondering what will slide in, fade out or scale up next.

As I explore my affection for SVG and animation, I'll likely make more posts.