Forget about those rusty old Flash skills; animation is swiftly becoming a key element in the frontend developer’s toolkit, and if you don’t want to be left behind then you’re going to need to get to grips with SVG.
Sarah Drasner will be at Generate San Francisco on 15 July, where she’ll be demonstrating how to create intricate SVG animations , from the basics of vector manipulation through to advanced tricks such as using morphing path data to imitate candle smoke, and combining techniques to create otherworldly effects.
Book now and you can enjoy a day of insightful sessions and practical workshops, and you’ll also become a Generate founding member, receiving 50% off tickets for all future Generate conferences!
If you can’t wait for Sarah’s session – or if you can’t make it but you’d like some useful SVG pointers – here she is with her three favourite articles for learning the basics of SVG and quickly ramping up your skills.
"If you’d like to take the leap from beginner to master, everything you might want to know – and then some – is covered in this excellent ‘Compendium of SVG Information’ by Chris Coyier."
02. Using SVG
"That said, my personal favourite article for getting up-and-running with SVG is ‘Using SVG’, also by Chris Coyier."
"A must-read is Sara Soueidan’s ‘Understanding SVG Coordinate Systems and Transformations’. This three-part series explains viewbox, and other parts of the SVG coordinate system and SVG transforms. These lay the foundation for so many other whys and hows of working with SVG, so that you know exactly what you’re manipulating."
This article originally appeared innet magazine issue 270; subscribe today and never miss another issue!