Differences between Canvas and SVG and canvassvg

Differences between Canvas and SVG and canvassvg

To tell the truth, I used canvas to draw some simple images. I don't know how complicated it is. The reason is that I was asked in the interview before. Here I mark it and deepen it later.

All of the following content comes from w3school

Http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

 

Pretend to be Lili's line

 

Canvas and SVG allow you to create images in the browser, but they are fundamentally different.

SVG

SVG is a language that uses XML to describe 2D images.

SVG is based on XML, which means that every element in the svg dom is available. You can append a JavaScript event processor to an element.

In SVG, each drawn image is regarded as an object. If the attributes of an SVG object change, the browser can automatically reproduce the image.

Canvas

Canvas uses JavaScript to draw 2D images.

Canvas is rendered by pixel.

In the canvas, once the image is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scenario also needs to be re-drawn, including any objects that may have been overwritten by the image.

Comparison between Canvas and SVG

The following table lists some differences between canvas and SVG.

Canvas

• Dependency resolution
• Event processor not supported
• Weak text rendering capability
• The result image can be saved in. png or. jpg format.
• Most Suitable for image-intensive games, many of which are frequently repainted

SVG

• Resolution independent
• Event processor supported
• Most suitable for applications with large rendering areas (such as Google Maps)
• High complexity slows down the rendering speed (any application that excessively uses DOM is not fast)
• Not suitable for game applications