What are the differences between html5 canvas and svg?

Differences: 1. Canvas depends on resolution, but SVG does not depend on resolution; 2. Canvas does not support event handlers, SVG supports event handlers; 3. Canvas is suitable for image-intensive game applications, and SVG Not suitable for game applications; 4. svg is defined through XML, while Canvas is defined through javascript.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Canvas (canvas) is drawn by Javascript, and it is drawn pixel by pixel. Once the Canvas image is drawn, it has nothing to do with the browser. If the position of the image changes, the entire scene needs to be redrawn, including elements that have been covered.

SVG is drawn using XML, and a JavaScript event handler can be added to SVG. All DOM is available, and if properties change, the browser will automatically redraw it.

The difference between SVG and Canvas:

Canvas (canvas)

• Depends on resolution

• Does not support event handlers

• Weak text rendering capabilities

• Ability to save the resulting image in .png or .jpg format

• Best suited for graphics-intensive games where many objects will be redrawn frequently

• Canvas is defined through javascript.
  

SVG

• Not dependent on resolution

• Supports event handlers

• Best suited for applications with large rendering areas (such as Google Maps)

• High complexity will slow down rendering Speed ​​(any application that overuses the DOM is not fast)

• Not suitable for game applications

• svg is defined through XML
  

Related recommendations: "html video tutorial"

The above is the detailed content of What are the differences between html5 canvas and svg?. For more information, please follow other related articles on the PHP Chinese website!