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 Maps）に最適
  • 複雑さが高くなるとレンダリング速度が遅くなります（DOMを過度に使用するアプリケーションは速くありません）
  • ゲームアプリケーションに不適切