Raphaël

Hi, Habr

In this short essay, I would like to talk about a small (according to the authors) JavaScript library - Raphaël. This library uses for the work of SVG and VML and serves, as it is not difficult to guess to facilitate the work with vector graphics on the web.
Also, according to the creators, it works in all browsers that are currently relevant, namely Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. Unfortunately, the creators bypassed the attention of the second fox, although, according to the live information, it accounts for almost 2% of users, which is quite a lot. Yes, and in spite of the fact that Chrome is not declared, everything in it, too, works like a clock.
In general, it is written in an extremely clear language on the library website that it is what it is for and how it is. But let's briefly dwell on this.
First we need to create a canvas object (we bind it to the DOM object indicating the width and height, or we specify only the coordinates of the upper left corner of the future object)

// Each of the following examples create a canvas that is 320px wide by 200px high
// Canvas is created at the viewport's 10,50 coordinate
<br/> var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element (or its top right corner in dir="rtl" elements)
<br/> var paper = Raphael(document.getElementById( "notepad" ), 320, 200);
// Same as above
<br/> var paper = Raphael( "notepad" , 320, 200);

* This source code was highlighted with Source Code Highlighter .

Further we can create any graphic primitives, calling the appropriate methods of the paper object. The name of the methods is the same with the graphic primitives that we operate within the SVG standard (for example, a rect circle line, etc.) For example, create a rectangle like this

<br/> var paper = Raphael(document.getElementById( "notepad" ), 320, 200);
paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff" , stroke: "none" });
* This source code was highlighted with Source Code Highlighter .

')
We will not stop here for a long time, this is written in great detail in the documentation .
Not unimportant advantages of this economy is that we can associate events with any graphical element, just like linking them with any DOM object, it seemed to me very useful, considering that the library went side by side with the jquery framework, working with elements of the graphics became almost trivial.
Total: We get a cross-browser solution to the eternal canvas dispute with VML, the ability to work with graphics elements as DOM objects, and good library documentation (despite the fact that it is in English, everything is very clear, though, I think someone with better languages ​​will undertake to translate - the community will only thank him for it). Development turns out really fast, for example, writing this (just for example and your own study) took no more than half an hour.
UPD
<img title = "" border = "0" alt = "" src = "http://img15.imageshack.us/img15/1651/60319441.png" />
But the vector dragon (from the examples on the website) is an example from the “like this, we can, but never do that way” the browser thought for a long time ... (picture-screen, on click vector)
UPD2 In chrome, drag & drop works crookedly