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: