CanvasとSVG、どちらを選べばいいか

iPhone 4のような高DPIデバイスの登場でグラフィックデータをどう扱っていくかがこのところWebデザイナやWebデベロッパの間で話題に上るようになっている。iPhone 3GとiPhone 4、iPad、MacBook Proなど、どのデバイスからアクセスしても問題ないWebページを制作するには、スケール可能なグラフィックデータへ移行することを考えるというのがひとつの方策。将来的な候補としてはSVGとCanvasが現実的といえる。

Canvas vs SVG: How to Choose the Right Format - SitePointにおいて、SVGとCanvasの特徴が簡単にまとめられている。それを踏まえた上でクロスブラウザで動作するにはどちらの方が現実的かということが言及されており参考になる。紹介されている特徴は次のとおり。

ベクタとビットマップ

SVGはベクタベースのデータで、Canvasはビットマップベースの操作を基本としている。SVGでもビットマップの読み込みはできるしCanvasでもラインや形のレンダリングができるため、この分け方はときどき曖昧に捉えられることもあるが、最終的にSVGはベクタでありCanvasはビットマップ。

ドキュメントとスクリプト

SVGはXMLで記述されている。XMLデータがブラウザに読み込まれ、そこでレンダリングや操作が実施される。CanvasはJavaScriptベースのレンダリングメカニズムであり、JavaScriptが無効になっている場合には利用できない。Canvasに描画されるイメージはJavaScript経由で描画APIを使うことで制作されている。

アクセシビリティと代替えコンテンツ

SVGはアクセシビリティが高い。テキストはテキストとしてそこに残っているため、たとえばブラウザがSVGをサポートしていなくても、そこに何らかのコンテンツが表示されることになる。CanvasはJavaScriptに依存しているため、もしJavaScriptが使えない状況に対応しようとすると、ブラウザがそれを検出してなんらかの処理を行う必要がある。

デザイナとデベロッパ

既存のベクタグラフィックアプリケーションはすでにSVGをサポートしているため、デザイナがSVGデータを制作するのは簡単に実施できる。Canvasはプログラミングすることで描画が実施されるためデベロッパがコードを記述する必要がある。Canvasレンダリングコードを生成するツールが登場しないとも限らないが、どのみちプログラミングの知識が要求される。

ブラウザサポート

Firefox、Chrome、Safari、OperaはすでにSVGもCanvasもサポートしている。MicrosoftはIE9から両方ともサポートする計画でいるが、IE9は2011年までリリースされる予定がない。さらにWindowsで6割以上のシェアを持つWindows XPには、IE9は移植されない見通しになっている。

そうした状況を説明しつつも、Canvas vs SVG: How to Choose the Right Formatでは今のところSVGの方がクロスブラウザソリューションとしては現実的だと説明している。すでにいくつかのIE SVGプラグインが存在していることや、RaphaelのようなSVG JavaScriptライブラリの存在が紹介されている。

Canvasは高速性が要求されしかも数百の要素がレンダリングされるようなゲームやアニメーションの場合にはベストなオプションだと説明がある。ブラウザの大半がSVGとCanvasをサポートするようになるまでにはまだまだ時間がかかるが、今から調査しておく方がいいとしており、プログレッシグエンハンスメントのテクニックを使って今から適用していくという方法があると結んでいる。