I <3 Raphael

April 22, 2010 – Philly

I know all the hype these days is around HTML5’s canvas, but can I talk up SVG for a sec? That shit rocks. Here at Hoopla, we have a number of info graphics on our site like charts and bar graphs and whatnot. They need to be generated on the fly using data from our database. As we saw it, we had two options: flash or javascript. Flash was a no-go, because it would be one more thing for developers on the team to know. Canvas was out on account of its lack of support in IE. SVG on the other hand… well, Raphael (a kickass javascript library) gives cross browser SVG support that works all the way back to IE6. Total Win!

As an added benefit, it turns out that Raphael is crazy easy to work with. Let’s have a look at a small example (be sure to hover over the square):

Pretty cool, right? All that was accomplished with this little bit of js:

    // Make a raphael
var r = new Raphael("draw-here-raphael", 400, 200),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});

// Note JQuery is adding the mouseover. SVG == html nodes
$(rect.node).mouseover(function () {
  if (position === 'left') {
    rect.animate({x: 300, y: 100}, 400, "<>");
    position = 'right';
  } else {
    rect.animate({x: 20, y: 20 }, 800, "bounce");
    position = 'left';
  }
});

// Make that sucker rotate
setInterval(function () {
  rect.rotate(1);
}, 10);

Definitely take note of the fact that jQuery can be used to manipulate the svg nodes. That’s been very helpful to us when adding hovers and other cool effects.

If you want to get started with Raphael, have a look at their documentation for all the functions available. I highly recommend it as an easy to use, cross platform drawing library. Hell, it even runs on the iPad and iPhone :-)

Update: I’ve written a follow-up post that shows how to unit test Raphael libraries.