はじめに
SVG（Scalable Vector Graphics）は、オブジェクトやシーンを記述するための XML ベースの言語です。SVG 要素はイベントを呼び出すことができ、JavaScript でスクリプトを記述できます。SVG には、円や長方形などの組み込みプリミティブ型がいくつか用意されています。また、テキストを表示することもできます。テクノロジーとしての SVG は新しいものではありませんが、HTML5 では、<object> タグや <embed> タグを使用せずに、SVG オブジェクトをページに直接埋め込めるようになりました。これにより、現在キャンバスで利用可能な SVG オブジェクトを使用できるようになります。Raphaël.js は、SVG シーンをプログラムで作成できる JavaScript ライブラリです。SVG シーン（サポートされている場合）または VML（Vector Modeling Language）を作成する（現在は IE9 より前の Internet Explorer バージョン）には、Unified API を使用して SVG シーンを作成します。
最初のシーンの描画
まず、ラファエルの簡単なシーンを描きましょう。シーンの描画を開始するには、Raphaël オブジェクトをインスタンス化します。ここでは、指定された幅と高さで特定の HTML 要素に挿入するコンストラクタを使用しましたが、Raphaël にそのオブジェクトを DOM（ドキュメント オブジェクト モデル）に追加させることもできます。次に、必要な x 位置と y 位置を幅と高さで指定して、長方形を作成しました。次に必要な座標と半径を指定して 円を作成しました最後に属性関数（attr）を使用して オブジェクトに色を割り当てました
各 SVG オブジェクトには、色、回転、ストロークの色、サイズなどの属性を割り当てることができます。割り当て可能な属性の詳細なリストについては、こちらをご覧ください。
var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);
rect.attr({fill: "green"});
circle.attr({fill: "blue"});
パスを使った高度なシェイプの描画
パスとは、レンダラがオブジェクトを作成するために使用する一連の手順です。パスを使った描画は、巨大なグラフ用紙にペンで絵を描くようなものです。紙からペンを離して別の位置に移動する（移動）、線を引く（線を引く）か、曲線を描く（円弧をする）ように指示できます。パスを使用すると、縮尺に関係なく同じ詳細レベルのオブジェクトを作成できます。「曲線を描画する」という命令を発行すると、SVG は曲線の元の最終的な目的のサイズ（スケーリング後）を考慮し、中間点を数学的に計算して滑らかな曲線をレンダリングします。
以下のコードと図は、パスを使用して描画された長方形と閉じた曲線を示しています。文字 M と座標の組み合わせでペンをその位置に移動し、L と座標ペアを使用して現在位置からその位置までの線を描きます。s は、指定されたコントロール ポイントと相対座標を持つ終点で、滑らかなベジェ曲線を描画します。Z はパスを閉じます。通常、大文字を使用すると絶対座標を指定したコマンドが発行され、小文字を使用すると相対座標が使用されます。M/m と Z/z は、それぞれ大文字または小文字で同じコマンドを発行します。すべてのプログラム手順のリストについては、こちらをご覧ください。
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
テキストの描画
ラファエルはテキストを描画できないイラストを作成するのは退屈な作業ですが、ラファエルにはテキストを描画する 2 つの方法が用意されています。1 つ目のメソッド text は、x 座標と y 座標、描画する文字列を受け取ります。テキスト メソッドでは、フォントやその他の効果を細かく制御することはできません。デフォルトのフォントでデフォルトのサイズで描画されます。
2 つ目のメソッド print は、テキストをパスのコレクションとして描画します。そのため、個々の文字を変更できます。以下の例では、数字の 5 をオレンジ色の塗りつぶしで、「ROCKS」の色を青色で塗りつぶし、ストロークを太くして太字テキストをシミュレートしています。フォントサイズが 40 ポイントのカスタムフォントを 使用しました
var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
Vegur フォントは Raphaël にはなく、それに関連するフォントもありません。さらに、ほとんどのフォントは TrueType（TTF）または OpenType（OTF）形式を使用します。これらの形式を Raphaël で使用可能な形式にするには、Cufon というツールを使用して変換する必要があります。Cufon では、特定のフォントのさまざまなフォント スタイル（標準、太字、斜体、太字斜体など）をエクスポートして、Raphaël で使用できます。このチュートリアルでは、Cufon の詳細について説明しません。詳細については、上記のリンクをご覧ください。アプリケーションに適したフォントの優れた提供元は Google Font Directory です。
イベント
SVG 要素は、従来のマウスベースのイベント（クリック、dblclick、マウスダウン、マウス移動、マウスアウト、マウスオーバー、マウスアップ、ホバー）を直接サブスクライブできます。Raphaël では、キャンバスまたは個々の要素に独自のメソッドを追加できるため、理論的にはモバイル ブラウザでジェスチャーを追加することを妨げるものはありません。
以下のスニペットは、クリックされたときに特定の文字を 45 度回転させる関数をバインドしています。
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
letters[i].click(function(evt) {
this.rotate(45);
});
}
SVG と Canvas の比較
どちらも画面上にオブジェクトを描画するメソッドであるため、どちらを使用すべきかがすぐにわからない場合がよくあります。2 つのメディアのアプローチは 大きく異なります描画キャンバスは即時モードの API で クレヨンで描画するのとよく似ています描画の一部をクリアまたは破棄することはできますが、デフォルトでは、前のストロークを元に戻したり変更したりすることはできません。キャンバスはラスター ビットマップでもあるため、画像をスケーリングするとピクセル化が起きやすくなります。一方、SVG は前述のように、同じ詳細レベルで複数の解像度を提供でき、スクリプトで記述できます。
ゲーム プログラミングに SVG と Canvas のどちらを使用するかはとても簡単です。デスクトップとモバイルのどちらにデプロイする予定かという通常の制約に加えて、実際にはスプライト数にも依存します。SVG は低忠実度のゲームに適しています。これは、オブジェクトの同時移動や、スプライトの削除と作成が制限されるゲームを指します。チェス、チェッカー、バトルシップなどの多くのボードゲームと、BlackJack、ポーカー、ハートなどのカードゲームがこのカテゴリに分類されます。また、こうしたゲームの多くでは、プレーヤーが任意のオブジェクトを移動する必要があり、SVG のスクリプト機能によりオブジェクトの選択が簡単になるという点も統合されています。
SVG 用のオーサリング ツール
SVG を使用しても、手動でパスを作成する必要があるわけではありません。SVG にエクスポートできるツール（オープンソースと商用の両方）がいくつかあります。私が幅広く使用し、強くおすすめする 2 つのツールは、Inkscape と svg-edit です。
svg-edit
svg-edit は、JavaScript で記述されたブラウザベースの SVG エディタです。GIMP や MS Paint を思わせる限定的なユーザー インターフェースを備えています。詳細レベルが比較的低い場合を除き、SVG 描画を作成するのではなく svg-edit を使用して SVG 描画を微調整してきました。svg-edit を使用すると、グラフィックや SVG コードでオブジェクトを作成できます。
インクスケープ
Inkscape は、CorelDraw、Adobe Illustrator、Xara に似た、クロス プラットフォームの本格的なベクター グラフィック エディタです。Inkscape は、活発なプラグイン コミュニティと成熟したコードベースを利用しています。Inkscape の前身である Inkscape は、1999 年に開発されました。Inkscape は、ベクターベース アセットとビットマップ アセットに頼っているアプリです。
マイナー・アサイド
SVG は、IE9 より前のバージョンの Internet Explorer の Windows ではサポートされていません。IE では VML（Vector Markup Language）と呼ばれるベクター グラフィック形式を使用しており、SVG とほぼ同じ機能を備えています。Raphaël は、SVG または VML がサポートされている場合に、それを使用したシーンを作成できます。Raphaël を使用すると、クロス プラットフォーム サポートを簡単に提供できます。
参照
- Rapahël.js: http://raphaeljs.com
- Raphaël のドキュメント: http://raphaeljs.com/reference.html