I'm writing this because I've been asked quite a lot recently about how to get into SVG, where to start and what's the best way to learn. I've finished the post now and I'm writing this paragraph and putting it at the top and I've realised I don't think this post answers any of those questions really. Sorry about that.


I first started messing around with SVG not that long ago at all. It seemed so impenetrable and weird and alien when I first saw the SVG syntax and code that I very nearly didn't even bother.

"I'm using Greensock to create shapes in CSS/HTML and animate them, why would I possibly want or need to learn something new, especially something that actually looks sort-of-really old"

This is what my defensive, frightened brain would whisper to me. In fact SVG is really old in the context of the age of the Internet.

A new challenge


The reason I decided to give it a try was partly because I wanted a change and a challenge but mostly because I love vectors - as a seasoned Flash designer I cut my teeth with vectors in Flash 2 - I lived and breathed vectors for 15 years in the SWF format and life was sweet (and crisp and scalable).

Get drawing again


I love drawing and I used to draw everything in Flash - I found its drawing tools were so familiar that I could draw pretty much anything in half the time than in any other software. I could also spit out pretty much any file format from Flash including SVG in later versions and it was this ability that piqued my interest in SVG. I'd create some graphics in Flash, spit out an SVG file and open it up in SublimeText, then quickly close it again and hyperventilate for a while.

Every time I created an SVG file it would have an Adobe Illustrator icon (I use Windows and SVG defaulted to being opened in Illustrator), so I started messing around in Illustrator, software that I had only ever really used to open client work in and panic at all the weird clipped paths and strange groupings and compound this and that. Pretty soon I was only opening Illustrator, creating a really simple shape, saving it and opening that up in SublimeText to see what a circle looked like in SVG. Then I'd move it on the stage (sorry, artboard), save it again and see what changed in the code.

I could be be here for a while


In a pretty short space of time I realised that SVG consists of only about six or seven raw shapes, most of which, when viewed in a file on their own, were pretty simple to understand. Then I discovered it has filters like blur - then I discovered Illustrator's Warp and Distort filters - then GSAP (Greensock Animation Platform) started focussing heavily on SVG animation and given I've been using GSAP for longer than I can remember it was then that the power of SVG dawned on me and I realised that I could be here for a while.

Ok Flash was useful

I can't deny my Flash background has helped me to progress quickly (animation has rules no matter how you do it) and knowing ActionScript has really helped with the JavaScript (I heartily recommend animating SVG with JavaScript, specifically GSAP) but the fact is, SVG is not that difficult to grasp once you've got over some of the classic hurdles like understanding the pesky viewport and viewBox and some other attributes that just need to be learnt. It can be daunting and I nearly bailed on several occasions - I have sticky notes on my PC with things like 'xlink:href' written on them which is the syntax for defining a link to a resource (like an image or URL) in various SVG tags because I simply couldn't remember them and between you and me, the whole namespace thing is still a bit of a mystery to me.

SVG Filter WTF

Some (most) of the SVG filters are also extremely complicated - you need a PHD in Overcoming Boredom just to understand what they do; documentation and online examples of SVG filters are dry and lifeless blocks of incomprehensible code that often generate a horrible effect that nobody in their right mind would ever use and often they seem so sensitive that copying the code and tweaking it makes all your graphics either disappear or stay exactly the same. SVG filters seem to be a game of extremes that I'm still trying to work out how to play (most of the time I sit at the sidelines swearing into a cup). I've had some success but there's lots more to learn.

Tooling


The tooling is pretty awful too - creating graphics in Adobe Illustrator (or Sketch or Inkscape) is one thing - getting them successfully into a web page and animating them is entirely another. You are somewhat at the mercy of the software you use and the crap it generates in the code. I made a video that explains my own workflow from Illustrator to CodePen (with SublimeText in between).

Still, maybe the tooling and usability will improve across the board with SVG 2.0 and future releases of drawing software - who knows. Right now I'm having loads of fun with it (important!) and so there's so much you can do with SVG, even if you only use a fraction of what it can do.

Do it - then do it again


The way I learn is by doing the same things over and over again until they become second nature. Some things I have to force myself to do again and again because my stupid brain refuses to learn them (like the xlink:href thing). But you might be different - I hope so.

It's only been about seven or eight months since I cracked open a proper SVG file and I feel like I've come a long way in a pretty short space of time. The main thing to do is to...

Stay focused


So if you're thinking about getting into SVG (which I know a lot of people are now) then I say do it. Sign up to CodePen if you haven't already (one of the many great things about CodePen is that you can get going with an idea or an experiment in seconds). Get yourself Illustrator or Sketch or Inkscape and start playing around. And stay focused.

The road will be rocky for a few weeks, you will go through The Seven Stages of SVG while you reorient yourself. They are Curiosity, Experimentation, Failure, Frustration, Self-Loathing, Lightbulb Moment, Beautiful Indescribable Happiness - just stick with it, never stray too far from stages 1 and 2, ignore stages 3-5 (they'll pass) and soon you'll be speeding your way to stages 6 and 7.


The happy dance you'll be doing sooner than you think


Where to start

A good place to start and the site I go back to time and time again because it has clear, simple SVG examples is Jenkov.com/svg

Once you're up and running check out some of my YouTube videos and come and say hi on Twitter


16515 12 126