Raphaël – simplify development of Vector Graphics

Richard Wong 18 August, 2008

When it comes to cross browsers vector graphics, there have always been debate about whether to use SVG/VML or Canvas/VML. Even if you made the decision, you still need to know how to implement them.

Now Raphaël is aiming to simplify development with vector graphics across browsers. It provides us with a simple adapter to work with vector graphics using SVG/VML.

Below is an example of the basic:

// 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");

If you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël – javascript library

Post a comment