HTML5 Zone is brought to you in partnership with:

John Esposito edits Refcardz at DZone, while writing a dissertation on ancient Greek philosophy and raising two cats. In a previous life he was a database developer and network administrator. John is a DZone Zone Leader and has posted 320 posts at DZone. You can read more from them at their website. View Full User Profile

SVG Tutorial: Rotating Wheel Interface (with Clipping Paths and Scalable 2D Motion Graphics)

  • submit to reddit

Seems like SVG is starting to sizzle.

Recently the New York Times published an interactive SVG overview of the Euro crisis, lending the weight of her gray head to the hip (if birthed long ago) technology.

A major conference (SVG Open 2011) wrapped up a few weeks ago, and quite a few SVG-related posts and links have been popping up here on DZone -- even as HTML5 Canvas gains momentum and threatens to replace SVG for some (definitely not all) specific applications.

But if coolness makes SVG hot, the same coolness can sometimes tempt developers to reserve it for the icing, not the cake. And however many times your undergraduate self may have tried to live on icing alone -- well, chances are, if you're reading this today, you eat mostly something else.

That's where this new tutorial from Marco Rosella of comes in. As Marco says:

In the last months several experts studied [SVG's] cross-browsing application in different topics: for example Shelley Powers wrote about scalable backgrounds, Brian Suda talks about the use in infographics and Jsdo drawn a cartoon movie; different Javascript libraries like SVGWeb or Raphaël use scripting for a rapid development providing the support for old browser (with Flash engine for the first, and VML for the second).

The next challenge is to look to SVG not only for animated scalable images, but also to use it as a core part of the interface of your site for the final knockout in the match with Flash, obviously not falling in useless skip intro animation and find a good compromise solution between usability and a never underestimated value: coolness.

Here's what Marco means:

which isn't just random images (it gets cooler), but works like this:

The interface of is composed by three rotating circle created by 48 thumbnails (chosen randomly) that let play over 300 Vimeos and over 1000 YouTube videos from my favorite ones. At the onload and before the opening of every video several black & white animations, with primitive shapes, are played in full screen...

Marco's tutorial walks you through creating a simplified version of his interface, using Illustrator (but Inkscape would work too) to produce slick but easy-to-understand clipping paths. He goes on to attach hovers to the clipped images -- something HTML5 Canvas can't do quite so well.

The full tutorial isn't very long, and does give some really impressive results: cool and useful SVG at the same time. Check it out and see what you think.