HTML5 Canvas vs. SVG

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

SVG

SVG is a language used to describe 2D graphics using XML.

SVG is based on XML, which means that each element in the SVG DOM is available. You can attach JavaScript event handlers to an element.

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

Canvas

Canvas draws 2D graphics using JavaScript.

Canvas is rendered pixel by pixel.

In canvas, once the graphics are drawn, they no longer receive attention from the browser. If their position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the graphics.

Comparison between Canvas and SVG

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

Canvas

  • Resolution-dependent
  • Does not support event handlers
  • Weak text rendering ability
  • Can save the result image in .png or .jpg format
  • Best suited for image-intensive games, where many objects are frequently redrawn

SVG

  • Not resolution-dependent
  • 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 DOM will not be fast)
  • Not Suitable for Game Applications