Comparison of drawing principles between Canvas and SVG in HTML5

Comments: Canvas and SVG allow you to draw images in the browser, but their basic principles are different. Next we will introduce the drawing principles of canvas and SVG, if you are interested, you can understand that canvas and SVG allow you to draw images in a browser, but their basic principles are different.
SVG
SVG is a language used to describe two-dimensional images in XML.
SVG is based on XML, meaning that every element in the svg dom is available. You can add a JS event processor for each element.
In SVG, each image is recorded as an object. If the attributes of an SVG object change, the browser can automatically regenerate the image.

Canvas
Canvas can draw 2D images on fly (using JS)
Canvas can be regenerated Based on pixels.

In the Canvas, once the image is completed, it will be forgotten by the browser. If the image position needs to change, the entire screen needs to be re-painted, including the objects covered by the image.

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

Canvas	SVG
Dependency resolution	Independent of resolution
Event processor not supported	Event processor supported
Weak text rendering capability	Most suitable for applications with large rendering area (Google map)
You can save the final image as PNG or JPG.	Complex Images and slow re-painting (many cases of DOM usage will slow down)
Most Suitable for graphics games where many objects are frequently repainted	Not suitable for game applications