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