Monthly Archives: August 2010

Learning SVG

Man painting a pictureI 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.

CSS3 Song

OK, so it’s not just for web animation, and you might need more than one line of code, but CSS3 is still cool and worthy of its very own song.

Video URL (with captions): www.youtube.com/watch?v=5b7dNNapMCM

Downloads

For your downloading pleasure, here are the video and audio–only files.

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

CSS3
Web animation done properly
CSS3
Degrading gracefully

I had a dream, an awesome dream
People surfing in the park
On Windows, Linux and Mac
And their page load speeds were oh-so-high
No big JavaScript library
Just to show some eye-candy

CSS3
Web animation done properly
CSS3
Degrading gracefully

As we surf down the superhighway
Did you ever even think
We could replace <marquee> and <blink>?
With just one, just one line of code
But it’s open to abuse
We must be careful not to overuse it

CSS3
Web animation done properly
CSS3
Degrading gracefully

CSS3
Web animation done properly
CSS3
Degrading gracefully
Degrading gracefully
With HTML5, naturally

Goodbye Google Wave

So it’s so long Google Wave. I was lucky enough to see a presentation by the user interface designer and understand some of their design decisions. Not only did they put a lot of effort into the user experience, the technology behind the real-time, synchronous editing was particularly innovative. I feel sorry for the team who achieved so much, but I’m sure we’ll still see parts of Google Wave appear in other projects. In the meantime, here’s a parting song.

Video URL (with captions): www.youtube.com/watch?v=MwKaScNbWIc

Downloads

For your downloading pleasure, here are the video and audio–only files.

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

Goodbye Google Wave
Though we hardly used you at all
You had such potential
To change the way we talk

We begged for invites and Tweeted
“Ooh, shiny shiny!” and seconds later…
“Now how does this thing work?”

And it seems to me, you lived your life
Like an Apple Newton
A great idea, whose time hadn’t come

You’ve still got fans who say that Wave rocks
But I guess the world just doesn’t need
One more inbox

I guess the world can carry on
With one less inbox