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 an SVG object change, the browser can automatically redraw the graphic.

Canvas

Canvas draws 2D graphics through JavaScript.

Canvas is rendered pixel by pixel.

In canvas, once the graphics are drawn, they no longer receive the browser's attention. 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 capability
  • Can save the resulting 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 can slow down rendering speed (any application that excessively uses DOM is not fast)
  • Not Suitable for Game Applications