HTML5 Canvas or SVG?

HTML5 has two 2D graphics APIs, Canvas and SVG.

SVG is used to describe Scalable Vector Graphics, a "retained mode" graphics model that persists in an in-memory model.

The canvas element is an “immediate mode” (drawing commands are sent directly to the graphics hardware), two-dimensional drawing surface.

Immediate mode graphic rendering is a “fire and forget” model that renders graphics directly to the screen and then subsequently has no context as to what was done. In contrast to retained mode, the rendered graphics are not saved; a developer needs to re-invoke all drawing commands required to describe the entire scene each time a new frame is required, regardless of any actual changes.

This post compares the two APIs and makes recommendations about when to use Canvas and when to use SVG.

What's Next

In the next post, we'll take a look at two HTML5 diagramming libraries: Fabric.js (which uses the Canvas API) and Draw2D (which use the SVG API).