A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

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!!!!

This entry was posted in General and tagged , . Bookmark the permalink.

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

  1. Ricardo says:

    hmm.. what’s the connection with jQuery? being a framework? :/

  2. Peter Cooper says:

    If you’re on a Mac, press alt+u to get the umlaut, and then “e” to fill in the e. So.. ë. It works the same for other letters too, ï ä ö and so forth.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>