Features:
Canvas (bitmap) is a scene with high data volume and high drawing frequency (frame rate), such as animation and games;
SVG (Vector Graphics) is an XML-based markup language in which points, lines, and graphics can be drawn by giving data a low data volume and low drawing frequency;
WebGL (Bitmap) is a Canvas-based 3D framework. such as animation games
Detailed analysis:
SVG is just a vector graphics file format, which is supported not only by current browsers, but also by many mainstream systems.
Canvas is a new element object in HTML5. It is literally a canvas. The browser js is equipped with a corresponding operation API, which can draw directly without relying on other APIs or components, which is equivalent to a 2D API.
WebGL is a set of browser 3D graphics API (HTML5) based on OpenGL ES 2.0. It is almost completely common with OpenGL ES 2.0 in terms of programming concept. It also uses a programmable rendering pipeline, that is, the processing of each vertex is subject to a Controlled by a small piece of Vertex Shader code, the drawing process of each pixel is also controlled by a small piece of Fragment Shader code. WebGL is mainly 3D, but 2D drawing requirements can also be implemented. In any case, WebGL needs a display object to render, this object is Canvas, that's all, WebGL does not have any additional operation API for Canvas, that part belongs to the scope of browser js support. WebGL also inherits the compatibility support capabilities of OpenGL ES 2.0, and does limited support on different devices, requiring runtime queries. Three.js, Babylon.js, Blender4Web, etc. are several well-known WebGL development frameworks, which have done a lot of encapsulation for the basic operations of WebGL, and can be used immediately, even if you don't know the details of the WebGL specification.
Efficiency aspects of svg and canvas:
1. Rendering the same object, the larger the resolution, the lower the canvas efficiency.
2. The more nodes, the lower the svg efficiency