めざましTech

HTML5 の普及と共に、ウェブページに画像を作るには canvas と SVG（Scalable Vector Graphics）の使用が多くなってきています。Internet Explorer 以外の全ての現代的なブラウザは対応しており、Flash の代わりにアニメーションとインタラクティブな画像に利用できます。しかし、なぜ2つの画像作成方法が必要なのか？そして、それぞれをいつ使ったら良いでしょう？

SVG って何？

• 数年前からの W3C スタンダード
• タグで画像のオブジェクトが作れるXML系の言語
• 画像を拡大しても画質が悪くならない
• 各要素は SVG の DOM にあり、JavaScript のイベントが追加できる
• あるオブジェクト、あるいはオブジェクトのグループを編集するのが楽
• オブジェクトの数が多くなれば多くなるほど重たくなる
• アクセシビリティが良い、例えば文字列を通常の文字列と同じように選択できる

Canvas って何？

• 画像はピクセルでできており、JavaScriptでピクセルを描く
• 画像を拡大すると画質が悪くなる
• 画像を編集するには、ピクセルを新たに描くことが必要
• ピクセルの編集が速い
• 画像サイズが大きくなれば大きくなるほど重たくなる
• アクセシビリティが良くない、例えば検索エンジン等は画像内の文字列を認識できない

結局 canvas と SVG はどういう時に最適ですか。
編集のスピードが速いため、速く描画するのが重要である時は canvas がベストです。例：アニメーションやゲーム等。
大規模の画像やインタラクティブな画像には SVG が最適です。例：地図やユーザインタフェース等。

※　Internet Explorer でも使えるように、canvas であれば「excanvas」、SVG であれば「Raphael」を是非使ってみて下さい。

SVG スライドショーの事例：
http://people.mozilla.com/~vladimir/demos/photos.svg

Canvas ゲームの事例：
http://www.benjoffe.com/code/demos/canvascape/

参考：Canvas 専門家羽田野氏の「SVG vs. Canvas?」