Canvas と SVG ではどちらもブラウザでグラフィックを作成できますが、根本的に異なります。
SVG は、XML を使用して 2D グラフィックスを記述するための言語です。
SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。
SVG では、描画された各形状はオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザーはグラフィックスを自動的に再現できます。
Canvas は JavaScript を通じて 2D グラフィックを描画します。
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、グラフィックスが一度描画されると、ブラウザーの注意を引き続けることはありません。 位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。
以下の表は、キャンバスと SVG の違いの一部を示しています。