HTML5 The comparison between canvas and inline SVG in the new element!

The differences and comparisons between SVG and canvas are as follows:

SVG: Use XML to describe 2D graphics, and canvas to describe 2D graphics using JavaScript.

Canvas is rendered per pixel, and in the canvas, once the drawing is done, it will not continue to get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the graphic.

SVG is based on XML, and each drawn graph is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.

Canvas            SVG

<canvas> tags define graphs, tables, and other images, but you must use scripts (usually JavaScript) to draw graphics. Use the XML format to define graphics that define vector-based graphics for the network, and that the image has no loss in its graphics quality when zoomed in or changed size.
Dependent resolution not dependent on resolution
Event handlers support event handlers are not supported
Weak text rendering is best for applications with large rendering areas (such as Google Maps)
Ability to save results in. png or. jpg format high image complexity slows rendering speed (any applications that overuse the DOM are unpleasant)
Suitable for image-intensive games where many of the objects are frequently redrawn and are not suitable for gaming applications

　　

This article references the following websites in writing:

Http://www.runoob.com/html/html5-svg.html　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

HTML5 The comparison between canvas and inline SVG in the new element!