HTML5 Canvas vs. SVG

CanvasとSVGはブラウザ内でグラフィックを作成できることを許可しますが、根本的には異なります。

SVG

SVGはXMLを使用して2Dグラフィックを記述する言語です。

SVGはXMLに基づいており、SVG DOM内の各要素は利用可能です。要素にJavaScriptイベントハンドラを追加できます。

SVG内で、描画されたすべてのグラフィックはオブジェクトとして見なされます。SVGオブジェクトの属性が変更された場合、ブラウザは自動的にグラフィックを再現します。

Canvas

CanvasはJavaScriptで2Dグラフィックを描画します。

Canvasはピクセル単位でレンダリングされます。

canvas内で、グラフィックが描画されると、ブラウザの注目を引き続けません。位置が変更された場合、全体のシーンが再描画されなければなりません。グラフィックで覆われた可能性のあるオブジェクトも含まれます。

CanvasとSVGの比較

以下の表は、canvasとSVGの間のいくつかの違いを示しています。

Canvas

  • 解像度に依存します
  • イベントハンドラーサポートをサポートしません
  • 弱いテキストレンダリング能力
  • .png または .jpg フォーマットで結果画像を保存できます
  • 画像密集型のゲームに最適で、多くのオブジェクトが頻繁に再描画される

SVG

  • 解像度に依存しません
  • イベントハンドラーサポート
  • 大きなレンダリングエリアを持つアプリケーション（例えば、Google マップ）に最適
  • 複雑さが高いためにレンダリング速度が遅くなります（DOMを過度に使用するアプリケーションは速くありません）
  • ゲームアプリケーションに不適切