Learning SVG

Man painting a picture

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s