こんにちは、Habr
この短いエッセイでは、小さな（著者による）JavaScriptライブラリ-Raphaëlについてお話したいと思います。 このライブラリは、作業にSVGとVMLを使用し、推測することは難しくないため、Web上のベクターグラフィックスで作業を容易にするのに役立ちます。
作成者によると、現在関連するすべてのブラウザー、つまりFirefox 3.0以降、Safari 3.0以降、Opera 9.5以降、Internet Explorer 6.0以降で動作します。 残念ながら、作成者は2番目のキツネの注意をバイパスしましたが、ここでは、ライブインターネットによると、ユーザーの2％近くを占めており、これは非常に多くのことです。
一般的に、 図書館のウェブサイトは、非常に理解しやすい言語で、それが何のためであり、どのように使われるかを述べています。 しかし、これについて簡単に説明します
まず、キャンバスオブジェクトを作成する必要があります（幅と高さを指定するか、将来のオブジェクトの左上隅の座標のみを指定してDOMオブジェクトにアタッチします）
// 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 .
さらに、ペーパーオブジェクトの対応するメソッドを呼び出すことにより、任意のグラフィックプリミティブを作成できます。 メソッドの名前は、SVG標準のフレームワーク内で操作するグラフィックプリミティブと同じ名前です（たとえば、四角形の円線など）。これは、四角形を作成する方法です。
<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 .
ここで長い間停止することはありません。これについては、 ドキュメントで詳しく説明しています 。
この経済全体の重要なプラスは、イベントをグラフィック要素に関連付けることができることです.DOMオブジェクトにイベントを関連付けるのと同じように、しばらくの間、ライブラリがjqueryフレームワークと並んで、スケジュールの要素はほとんど些細なものになりました。
合計：キャンバスとVMLの間の永遠の紛争に対するクロスブラウザーソリューション、DOMオブジェクトとしてグラフィック要素を操作する機能、およびライブラリーの優れたドキュメントを取得します（英語であるにもかかわらず、すべてが非常に明確です。言語で翻訳することをよりよく請け負う人-コミュニティは彼に感謝するだけです。 開発は非常に高速であることが判明しました。たとえば、 それを書く（たとえば、自分で学習する）のに30分もかかりませんでした。
UPD
<img title = "" border = "0" alt = "" src = "http://img15.imageshack.us/img15/1651/60319441.png" />
そして、ここにベクタードラゴン（サイトの例から）があります。これは、ブラウザが長い間考えていた「これは私たちができることですが、これを行うことはできません」という領域からの例です...（スクリーンショット、ベクタークリック）
UPD2で Chromeのドラッグアンドドロップが曲がって動作する