Comment: Canvas and SVG can both enable you to draw pictures in the browser, but their basic principles are different. Next, we will introduce the drawing principles of canvas and SVG. Interested friends can learn about it.
Canvas and SVG both allow you to draw pictures in the browser, but their basic principles are different.SVG
SVG is a language that describes two-dimensional graphics in XML.
SVG is XML-based, meaning that every element is available within the SVG DOM. You can add a JS event handler to each element.
In SVG, each graph is recorded as an object. If the properties of an SVG object are changed, the browser can automatically regenerate the graphics.
Canvas
Canvas is able to draw 2D graphics on fly (using JS)
Canvas can be regenerated by pixels.
In Canvas, once the graphics are completed, they are forgotten by the browser. If the graphics position is to change, the entire screen needs to be repainted, including the objects covered by the graphics.
Comparison between Canvas and SVG
The following table shows the main differences between canvas and SVG:
Canvas SVG
Resolution-dependent independent of resolution
Event handler is not supported
Weak text rendering capabilities are most suitable for applications with large rendering areas (Google Maps)
You can save the final image as PNG or JPG complex images, and the repainting will slow down (any situation where DOM is used will slow down)
The best graphic games that are suitable for many objects that are frequently redrawn are not suitable for game applications