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), the 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 Raphael 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. Raphael 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 Raphael 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. Since the talk, I have also developed an alternate style for the clock, but the original code and examples can be found here (the library is creatively called jquery.svgclock.js):http://github.com/bitzesty/hud
Brought to you by Bit Zesty - a 'crack' team of Ruby on Rails web developers
Posted
by Matthew Ford
