Solid Cross-Browser Compatible Vector Graphics in Javascript with Raphael

Last week I had the pleasure of attending Web Directions South in Sydney – a conference I’d long heard about but had never had the chance (and good timing) to attend until this year. There were many great presentations there and the one I’d like to introduce you to first is by one brilliant Dmitry Baranovskiy. Dmitry built a javascript library called Raphael which essentially provides a lightweight, cohesive solution for vector graphics across browsers from IE6 onwards, including iPhone and iPad.

Why do you care? So. Many. Reasons.

  • Stable cross browser support: IE6 onwards, FFox, Opera, Safari, Safari on iPhone and iPad, Chrome. In fact the only browser that doesn’t support ANY vector graphics is that one the Android mobile devices. Dmitry indicated that this was because Google didn’t want to add 1MB to the browser file size in order to include SVG support.
  • Animation and interactivity: with iPhone and iPad support, this gives you a viable flash alternative
  • Ease of implementation: most of you will already know javascript. You don’t need to learn another language or a new IDE to use Raphael.
  • Compact: 60kB compressed, 150kB uncompressed
  • Zoom: vector graphics mean that mobile devices can zoom on your graphics without losing quality
  • Print: vector graphics provide high quality output for printing. Not even the canvas element in HTML will do this
  • Available and solid now: HTML5 has an SVG component, but HTML is not widely supported right now. Raphael is. And it’s solid.
  • Dmitry is quiet possibly one of the most coolest people you’ll ever meet, a great presenter and a brilliant developer. Keep an eye on him.

If you need convincing, take a look at a few of the Raphael demonstrations and also at the free svg icons Dmitry has kindly provided.

This is not a new thing – Raphael has been around for a few years. It’s just new to me (I’ve never had call to look into SVG, but now I think differently). Who knows? Maybe it’s new to you too. Maybe you should think a little more about whether you’re using it.

I’ve never used either SVG or Raphael before, but in under an hour I’d read up on how to use it, googled through the creative commons area on wikipedia and located some likely SVG graphics (from which to yoink paths for this demonstration) and implemented the dandy little animated heart you see below.

(Click the heart to see it beat!)

Once I included the raphael js library, I just added this script.


var c;

// This is a simple function which forces the heart 
//      to do its double-beat three times.
// I'd recommend using proper looping if you wanted 
//      more. This is just for a demonstration!
function heartbeat(){
        c.animate({
        "0%": {scale: "0.5 0.5"}, 
        "10%": {scale: "0.5 0.5"},
        "15%": {scale: "0.6 0.6"},
        "20%": {scale: "0.5 0.5"},
        "35%": {scale: "0.6 0.6"},
        "40%": {scale: "0.5 0.5"},
        "110%": {scale: "0.5 0.5"},
        "115%": {scale: "0.6 0.6"},
        "120%": {scale: "0.5 0.5"},
        "135%": {scale: "0.6 0.6"},
        "140%": {scale: "0.5 0.5"},
        "210%": {scale: "0.5 0.5"},
        "215%": {scale: "0.6 0.6"},
        "220%": {scale: "0.5 0.5"},
        "235%": {scale: "0.6 0.6"},
        "240%": {scale: "0.5 0.5"},
        "300%": {scale: "0.5 0.5"}
    }, 2500);
}

window.onload = function () {
      // We're writing in a particular div (for placement)
      // so let's get a reference to that first!
      var myDiv = document.getElementById("heartexample");

      // Creates canvas 100px by 100px
      var paper = Raphael(myDiv, 100, 100);

      // The path about our heart shape, yoinked from 
      //    the source of this Creative Commons SVG image: 
      // http://upload.wikimedia.org/wikipedia/commons/8/81/U%2B2665.svg 
      var solidheart = "M 58,17 C 52,7 42,0 30,0 C 13,0 
      0,13 0,30 C 0,63 18,68 58,106 C 98,68 116,63 116,30 
      C 116,13 103,0 86,0 C 74,0 64,7 58,17 z";

      // draw the heart 
      c = paper.path(solidheart)

      // set the fill, stroke and scale
      c.attr({fill: "#ff0707", stroke: "none", scale: "0.5 0.5"})

      // ensure it beats when someone clicks on it!
      c.click(heartbeat);

      // make it beat when it loads. For teh funz0r.
      heartbeat();

};

That’s right, boys and girls! This is mathematics (yaaaaay). When it comes to animation and interaction, programming skill is certainly required as is some knowledge of maths (this is a given for anyone who has touched graphics in computer science). But the good news is that the paths can be extracted from SVG files and easily hooked into your script. You don’t need to be some SVG savant and be able to belt out vector paths from your brain. Once you have the paths and you are ready to manipulate them, Raphael’s documentation is great, as are the examples.

I’m certainly going to be looking into it further, and am likely to use it in some projects in future.

Get on board!

One Comment:

  1. [...] http://www.kleenecode.net/2010/10/20/raphaeljs/ [...]

Leave a Reply