A Guide to SVG Animations (SMIL)

added by JavaScript Kicks
10/13/2014 3:04:38 PM

121 Views

Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide. SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification...


3 comments

Andy Summerfield
10/14/2014 10:11:07 AM
Having done some SVG animation before can definitely say this is worth a read for anybody that's interested. The stuff you can do with SVG is unbelievably cool and if you have an arty creative side could certainly have a lot of fun with it.

Robert Greyling
10/14/2014 10:17:23 AM
I'm just wondering how performance comes into it? Where do you draw the line when it comes to supporting all the devices out there? If I'm looking at it on an iPhone 4, is it gonna kill my phone because people have gone animation-tastic? I'm all for a bit of fun and creativity, I'm just interested in how this balances or adds to the user experience and where it starts to fall down? Any ideas?

Andy Summerfield
10/14/2014 10:37:10 AM
I reckon yeah dependent on your animation or sheer number of animations you might kill the phone a bit. But SVG support is only in a few browsers so might not be such a massive issue? I imagine the browsers that do have SVG support and are up to date devices will probably handle no problem. I'd say when it comes to this stuff, subtle is key. A simple animation that does something that makes the user go 'Hey that was pretty cool' is all it should be. Going overboard would just look silly and probably mean people defer away from the site. Overall though I'm not sure performance wise and the balance, may come down to the device, size of the SVG, number of animations, how intensive each animation is etc etc. Still bloody cool though!