The difference between
| Canvas | SVG |
|---|---|
| JS implementation | XML realize |
| scalar | vector |
| Resolution dependent (render per pixel) | Resolution independent (no distortion when changing size) |
| The entire canvas is an object | Each element is an object |
| Events are not supported (for reasons above, see appendix) | Support events for each element |
| Weak text rendering capability | Best for applications with large rendered areas (such as Google Maps) |
| Ability to save the resulting image in.png or.jpg format | High complexity slows down rendering (any application that overuses DOM is not fast) |
| Best suited for graphics-intensive games, where many objects are frequently redrawn. | Not suitable for game applications |
Canvas
- HTML 5 new;
- Using JS to draw 2D images, the canvas is a rectangular area, you can control each pixel, pixel by pixel rendering;
- There are multiple ways to draw paths, rectangles, circles, characters, and add images;
- Once the graph has been drawn, it does not continue to receive attention from the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the graph.
SVG
- Scalable Vector Graphics
- Draw 2D graphics using XML;
- No distortion when changing size;
- Every element in the SVG DOM is available;
- You can attach JS events to each element;
- Each graph that is drawn is treated as an object, and if the attributes of the SVG object change, the browser can automatically reproduce the graph;
- Is the World Wide Web Consortium standard;
- Is integrated with W3C standards such as DOM and XSL.
The appendix
Canvas supports events
Let canvas support events
reference
HTML 5 Canvas vs. SVG allows Canvas to support events