Opera Software

HTML5の仕様はまだ定まっていないが、Firefox、Chrome、Safari、Operaといった主要なブラウザは策定中のHTML5の機能の実装をはじめている。バージョンが上がるごとにサポートする機能を増やしており、すでにデファクトスタンダードになりつつある機能もある。そうした機能のひとつにCanvasがある。

Opera's Developer Relations Team - Canvas and SVG - which should I use when?において、HTML5の利用シーンが増えるにしたがって画像を作成するケースでSVGとCanvasが利用されることが増えているが、はたしてどちらを使うべきだろうか、という内容が簡単に紹介されている。まず、SVGとCanvasの特徴が次のようにまとめられている。

SVGの特徴
W３C勧告として標準化されており、HTML5ではHTMLページに組み込むことが可能
XMLベースの言語で画像オブジェクトの作成にタグが使われている
品質を損なうことなくリサイズが可能
すべての要素はSVG DOMとして用意されているためJavaScriptのイベントをアタッチ可能
オブジェクトの編集が容易
オブジェクトの数が多くなると処理が重くなる
テキストは選択可能だしアクセッサビリティが高い
Canvasの特徴
現在HTML5の仕様の一部として策定が進められている
JavaScriptを使ってピクセルで描画
大きく広げる場合にはイメージはピクセルのまま広げられる
すべてはビクセルとして描画される。画像を編集することはピクセルを編集することを意味する
Canvasにおけるピクセルの書き換えは高速
描画エリアが大規模になると重くなる
現時点ではCanvasはアクセッサビリティが低くテキストもスクリーンリーダからは読めない

こうした特徴をふまえたうえで、次のようにそれぞれの利用シーンがあると紹介されている。

  • 操作が高速であることから、アニメーションやゲームのような高速レンダリング/高速再レンダリングが必要な場合にはCanvasが適している
  • マップやユーザインタフェースのようなインタラクティブであったり高いスケールが必要とされる場合にはSVGが適している

また、どちらか片方を選択しなければならないということはなく、それぞれの強みを活かして双方を組み合わせて利用することもできると説明がある。

Canvas利用例 - www.benjoffe.com - Canvascapeの閲覧の様子 (Opera 10.10 on FreeBSD 9-CURRENT)

SVG利用例 - vladimir/demos/photos.svgの閲覧の様子 (Opera 10.10 on FreeBSD 9-CURRENT)

IE8、IE7、IE6は今のところCanvasもSVGもサポートしていない。Opera's Developer Relations Team - Canvas and SVG - which should I use when?ではCanvasについてはExplorerCanvasを利用することで、SVGについてはRaphaelを利用することで対処が可能だと説明している。

IE8 on Windows XPにおけるCanvas利用例 - www.benjoffe.com - Canvascapeの閲覧の様子

動作するように若干の変更を加えたもの

Canvasの動作例として紹介されているwww.benjoffe.com | CanvascapeではExplorerCanvasを使うことでIEでもデモが動作するようになっている。ただ、試した限りではIE8では動作しなかった。ダウンロードして若干の変更を加えることで動作を確認できた。