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 の主な違いを示しています。

Canvas	SVG
依赖分辨率	独立于分辨率
不支持事件处理器	支持事件处理器
弱文本渲染能力	最适合具有大渲染面积的应用（谷歌地图）
可以保存最终图片为PNG或者JPG	复杂图像，重画变慢（任何使用DOM很多的情况都会变慢）
最适合许多 对象频繁重画的图形游戏	不适合游戏应用