HTML 5 canvas vs SVG

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

SVG (Recommended learning: html tutorial)

SVG is a method that uses XML A language for describing 2D graphics.

SVG is based on XML, which means every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, each drawn graphic is considered an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.

Canvas

Canvas uses JavaScript to draw 2D graphics.

Canvas is rendered pixel by pixel.

In canvas, once a graphic is drawn, it will no longer receive the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.

Comparison of Canvas and SVG

The following table lists some of the differences between canvas and SVG.

Canvas

Resolution dependent

No event handler support

Weak text rendering capabilities

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

Ideal for graphics-intensive games where many objects will be redrawn frequently

SVG

Not dependent on resolution

Supports event handlers

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

High complexity Will slow down rendering (any application that overuses the DOM is not fast)

Not suitable for game applications

The above is the detailed content of HTML 5 canvas vs SVG. For more information, please follow other related articles on the PHP Chinese website!