月別アーカイブ: 2009年11月

Canvas と SVG:それぞれをいつ使ったら良いでしょう?

Paints
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」を是非使ってみて下さい。

参考資料