Raphaël – javascript svg library
February 24th, 2009 | Published in web | 1 Comment
Think you need flash to create a good looking scalable interactive chart on your webpage? Think again. Raphaël is a small javascript library that can be used to generate svg graphics, embedded in your html page. Here’s an example chart: Analytics. Pretty nice. The homepage has a number of impressive svg demos. Code examples can be found in the reference.
Here’s a small example, slightly adapted from the raphael homepage:
// Creates canvas 320 × 200 at starting at element with id raphael-example
var paper = Raphael(document.getElementById("raphael-example"), 320, 100);
// 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");
And here’s the result:
Library found through Ajaxian: Washington Post Using SVG and VML.
