SVG 101: A Gentle Introduction

Fun fact: Cloud Four’s design team really digs SVG. Our enthusiasm for the image format accumulated gradually over many months, thanks in large part to Sara Soueidan’s tireless documentation of its most mysterious features and quirks. It was during the process of designing the Responsive Field Day site that our collective interest level hit fever pitch, which caused our coworkers to wonder what all the fuss was about!

It turned out to be a difficult question to answer. Most of the resources we found online either covered the very basics of the format, or jumped right into the nitty-gritty of coordinate systems, complex animation, automated sprite-building, etc. So fellow Cloud Four designer Sara Lohr and I decided to put together an internal presentation with reveal.js to bring everyone up to speed.

Perhaps unsurprisingly, we learned a ton from the process of organizing what we thought we knew about SVG into a presentation format. Sections were revised multiple times as we uncovered new information. At one point I even engaged with Sara Soueidan and GreenSock on Twitter to help demystify the landscape of JavaScript-powered SVG animation frameworks… and by now that info is already out of date!

In spite of those challenges, the talk was a hit. I think we introduced concepts in a way that made sense for the audience, emphasizing the sorts of things they’d find most useful day-to-day.

Then again, maybe it’s just easy to win people over with demos like “Jasonflower”:

See the Pen Jasonflower: CSS by Tyler Sticka (@tylersticka) on CodePen.

It’s hard to argue that SVG isn’t the greatest format ever once you’ve seen that.