はじめに
SVG（Scalable Vector Graphics）は、オブジェクトとシーンを記述するための XML ベースの言語です。SVG 要素はイベントを発生させ、JavaScript でスクリプトを記述できます。SVG には、円や長方形などのプリミティブ タイプがいくつか組み込まれており、テキストを表示することもできます。SVG は新しい技術ではありませんが、HTML5 では <object> タグや <embed> タグを使用せずに SVG オブジェクトをページに直接埋め込むことができるようになりました。これにより、キャンバスで現在利用可能な機能と連携できるようになりました。Raphaël.js は、SVG シーンをプログラムで作成できる JavaScript ライブラリです。統合 API を使用して、SVG シーン（サポートされている場合）または VML（ベクター モデリング言語）（サポートされていない場合、つまり IE9 より前のバージョンの Internet Explorer）を作成します。
最初のシーンを描画する
まず、Raphaël で簡単なシーンを描画しましょう。シーンの描画は、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"});
パスを使用して高度なシェイプを描画する
パスは、レンダラがオブジェクトの作成に使用する一連の手順です。パスで描画することは、巨大な方眼紙にペンで描画することと同じです。ペンを紙から離して別の位置に移動（move to）、線を描画（line to）、曲線を描画（arc to）するように指示できます。パスを使用すると、SVG でスケールに関係なく同じレベルの詳細を持つオブジェクトを作成できます。曲線を描画する命令を出す場合、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"});
テキストの描画
テキストを描画できないイラストは退屈です。幸い、Raphaël にはテキストを描画する 2 つの方法があります。最初のメソッド 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 フォント ディレクトリで入手できます。
イベント
SVG 要素は、従来のすべてのマウスベースのイベント（click、dblclick、mousedown、mousemove、mouseout、mouseover、mouseup、hover）を直接サブスクライブできます。Raphaël では、キャンバスまたは個々の要素に独自のメソッドを追加できるため、理論上はモバイル ブラウザにジェスチャーを追加できます。
次のスニペットは、クリックされたときに「ROCKS」の特定の文字を 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 とキャンバス
どちらも画面にオブジェクトを描画する方法であるため、どちらを使用するべきかすぐにはわかりません。2 つのメディアのアプローチは大きく異なります。Canvas は、クレヨンで描画するような即時モードの API です。描画の一部を消去または破棄することはできますが、デフォルトでは、以前のストロークを取り消したり変更したりすることはできません。キャンバスもラスター ビットマップであるため、画像のスケーリング時にピクセル化が発生しやすくなります。一方、前述のように SVG は、同じレベルの詳細度で複数の解像度を提供でき、スクリプト化できます。
ゲーム プログラミングに SVG と Canvas のどちらを使用するかは、非常に簡単です。パソコンとモバイルのどちらにデプロイするかという通常の制約に加えて、実際にはスプライト数に帰着します。SVG は、低忠実度ゲームに適しています。オブジェクトの同時移動、スプライトの削除と作成が制限されているゲームです。チェス、チェッカー、バトルシップなどの多くのボードゲームや、ブラックジャック、ポーカー、ハートなどのカードゲームがこのカテゴリに該当します。もう一つの共通点は、これらのゲームの多くで、プレーヤーが任意のオブジェクトを移動する必要があることです。SVG のスクリプト機能により、オブジェクトの選択が容易になります。
SVG の作成ツール
SVG を使用する場合でも、パスを手動で作成する必要はありません。SVG にエクスポートできるツールは、オープンソースと商用の両方にあります。私がよく使用していて、強くおすすめするツールは Inkscape と svg-edit です。
svg-edit
svg-edit は、JavaScript で記述されたブラウザベースの SVG エディタです。GIMP や MS Paint を彷彿とさせる限定的なユーザー インターフェースが提供されます。詳細レベルが比較的低い場合を除き、ほとんどの場合、svg-edit を使用して SVG 描画を作成するのではなく、調整しました。svg-edit では、オブジェクトをグラフィカルに作成することも、SVG コードで作成することもできます。
Inkscape
Inkscape は、CorelDraw、Adobe Illustrator、Xara に似た、クロスプラットフォームの完全なベクター グラフィック エディタです。Inkscape は、活発なプラグイン コミュニティと成熟したコードベースを活用しています。Inkscape の前身は 1999 年に開発されました。ベクターベースとビットマップ アセットには、Inkscape をよく使用します。
軽微な問題
SVG は、IE9 より前のバージョンの Internet Explorer では Windows でサポートされていません。IE では、ベクター マークアップ言語（VML）というベクター グラフィック形式が使用されます。VML は SVG とほぼ同じ機能を提供します。Raphaël では、サポートされている SVG または VML を使用するシーンを作成できます。Raphaël を使用すると、クロスプラットフォーム サポートを簡単に提供できます。
参照
- Rapahël.js: http://raphaeljs.com
- Raphaël のドキュメント: http://raphaeljs.com/reference.html