Learning SVG

I thought I’d share the resources that have most helped me learn SVG.

It’s an old technology but getting a lot of interest recently so I finally got round to doing some experimenting myself (so far an SVG game and a geolocation demo). I still have a long way to go but already I’ve found myself returning to the same few sites when I get stuck. Here they are, in order of complexity:

• SVGBasics
  Each page is fairly short but it covers the basics (hence the name) and is useful for quickly referring to when you forget an attribute name or syntax.
• carto:net
  Not quite as user-friendly but much more in-depth. The section I keep going back to is Manipulating SVG Documents Using ECMAScript because, with Internet Explorer 9 supporting SVG but not SMIL, this is what you need if you want animation to work in IE.
• SVG Essentials
  Hats off to O’Reilly for making a whole book freely available online. As you’d expect, professionally put together with lots of code snippets and diagrams. There’s also a hard copy version available.

Of course, working for Opera I should also point you to the SVG section of our developer reference site (dev.opera.com). Finally, credit for the graphic goes to Nicu Buculei who has his own collection of public domain SVG clipart.

Do you know of any other good resources or examples for people to learn from? Please add them in the comments.