Benny Sutton is 4 hire - just click here

Why SVG is a game changer for Web Animation

Wouldn't it be great to be able to animate all the layers in a Photoshop file on your web page?

Sorry, you can't - but you can do something like it with SVG files.

SVG is a vector format so you'll probably start with an image someone else has created. Google 'free vector images'

That's what I did for my homepage. If you're a musician you're obsessed with instruments so my choice of a guitar amplifier will make a muso feel at home!

So how does SVG work?

The clue's in the name, Scalable Vector Graphics, a mathematical description of a graphic - so payload can be tiny compared to bitmaps - and page loading is therefore faster. www.w3.org for full spec

You can animate SVG with native CSS but I'd advise a framework like GSAP to manipulate them. It has some minor payload overhead but is worth it.

You don't need a framework, if you're a CSS wiz you'll manage easily, but it will be more verbose and take longer. There are many properties common to SVG and CSS one notable exception is background colour in CSS becomes fill in SVG

You can dive as deep as you like into shared properties. An exhaustive list is here... css-tricks.com

Simply open a vector graphic in Adobe Illustrator and name the layers you want to manipulate with meaningful, memorable names. When you save to SVG (well export it to SVG) those names become DOM Id's you can address! Attach event handlers and your users can interact.

Added bonus: SVG's are also scalable downwards so make great icons too! Better than bootstrap glyphicons or Font-awesome icons.

Conclusion: File size, scalability, and just downright FUN makes SVG a must for any serious frontend designer.