Raphaël – jQuery but for vector graphics on the web?

I had to post this.

What is it?

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
How to use it?

Download and include raphael.js into your HTML page, then use it as simple as:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr(“fill”, “#f00″);
// Sets the stroke attribute of the circle to white (#fff)
circle.attr(“stroke”, “#fff”);

PS: They should rename this to something simpler. I can’t find ë on my keyboard!!!!