Comparaison des principes de dessin entre Canvas et SVG dans les compétences du didacticiel HTML5_html5

Canvas et SVG vous permettent de dessiner des images dans le navigateur, mais leurs principes de base sont différents.
SVG
SVG est un langage permettant de décrire des graphiques bidimensionnels en XML.
SVG est basé sur XML, ce qui signifie que chaque élément est disponible dans le DOM SVG. Vous pouvez ajouter des gestionnaires d'événements JS pour chaque élément.
En SVG, chaque graphique est enregistré comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut régénérer automatiquement le graphique.

Canvas
Canvas peut dessiner des graphiques 2D à la volée (en utilisant JS)
Canvas peut être régénéré en fonction des pixels.

Dans Canvas, une fois le graphique terminé, il est oublié par le navigateur. Si la position du graphique doit être modifiée, tout l'écran doit être redessiné, y compris les objets couverts par le graphique.

Comparaison entre Canvas et SVG
Le tableau suivant présente les principales différences entre Canvas et SVG :

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