Comparison of drawing principles between Canvas and SVG in HTML5_html5 tutorial skills

Both canvas and SVG allow you to draw pictures in the browser, but their basic principles are different.
SVG
SVG is a language for describing two-dimensional graphics in XML.
SVG is based on XML, which means every element is available within the SVG DOM. You can add JS event handlers for each element.
In SVG, each graphic is recorded as an object. If the properties of an SVG object change, the browser can automatically regenerate the graphic.

Canvas
Canvas can draw 2D graphics on fly (using JS)
Canvas can be regenerated according to pixels.

In Canvas, once the graphic is complete, it is forgotten by the browser. If the position of the graphic is to be changed, the entire screen needs to be redrawn, including the objects covered by the graphic.

Comparison between Canvas and SVG
The following table shows the main differences between canvas and SVG:

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