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

DZone 's Guide to

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

· Web Dev Zone ·
Free Resource

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 Vlog.it 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 vlog.it 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 Vlog.it 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.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}