SVG Images and Animations on the Web with Raphaël

Last week I gave a talk at Google OSJam on Raphaël, a javascript SVG library that makes it easy to draw and animate vector graphics on a browser.

SVG is one of the many methods of drawing images on the web. Some of the other technologies include Flash, Canvas and now WebGL.

The reason we used Raphael in some of our projects is that we needed to bind events to the shapes we drew. For example, we had to create an interactive gantt chart that displayed a form via Ajax when you clicked on a task. This functionality in Raphaël is made possible by the fact that SVG paths are DOM elements, although it does mean you don’t get the performance of pixel manipulation as you would with Canvas. Raphaël also renders VML when on IE, so in theory your graphics should be cross-browser compatible.

I gave a demo of an animated clock that I’d made a few hours beforehand with Raphaël and the jquery.jclock library. The clock will eventually be apart of a Panic inspired dashboard we are building to increase visibility across all of our projects.

The clock itself is quite simple: I modified the jclock library to trigger a ‘tick’ event, which we later used to animate the SVG clock for the hand rotation.