HTML5_html5 チュートリアル スキルにおける Canvas と SVG の描画原理の比較

Canvas と SVG ではどちらもブラウザーで画像を描画できますが、基本原理は異なります。
SVG
SVG は、2 次元グラフィックスを XML で記述するための言語です。
SVG は XML に基づいており、すべての要素が SVG DOM 内で使用できることを意味します。各要素に JS イベント ハンドラーを追加できます。
SVGでは、各グラフィックはオブジェクトとして記録されます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再生成できます。

Canvas
Canvas は (JS を使用して) 2D グラフィックをオンフライで描画できます。
Canvas はピクセルに従って再生成できます。

Canvas では、グラフィックが完成すると、ブラウザーによって忘れられます。グラフィックの位置を変更する場合は、グラフィックで覆われているオブジェクトも含めて画面全体を再描画する必要があります。

Canvas と SVG の比較
次の表は、Canvas と SVG の主な違いを示しています。