The Null Device

Raphaël

The age of vector graphics on the web is drawing closer; Raphaël is a JavaScript library which gives you a portable way of drawing vector graphics, not only on all modern browsers but, amazingly enough, on Internet Explorer from version 6 upwards. (It uses SVG on modern browsers and VML on Microsoft's ones.) Anyway, Raphaël code looks like: 

var paper = Raphael(10, 50, 320, 200);
var c = paper.circle(50, 50, 40);
c.attr({fill: "#000", stroke: "none"});
c.node.onclick = function() {
    c.attr("fill", "red");
});
It also handles images, text, and paths (using the SVG path notation). And here is a set of free icons, all implemented as path strings for use in Raphaël; they look fairly neat and modern, though, being single path objects, are monochrome. Being paths, though, they scale seamlessly.

So how soon can you use this in your web sites? Well, it runs with most of the web browsers in use these days, though needs a 55Kb (20Kb gzipped) JavaScript file. You'll probably need to host this file yourself, neither Google nor Yahoo! seem to have added it to their public CDN systems yet (though perhaps it's only a matter of time).

There are no comments yet on "Raphaël"

Want to say something? Do so here.

Post pseudonymously

Display name:
URL:(optional)
To prove that you are not a bot,
please enter the text in the image on the right
in the field below it.

Your Comment:

Please keep comments on topic and to the point. Inappropriate comments may be deleted.

Note that markup is stripped from comments; URLs will be automatically converted into links.