Canvas vs SVG: Choosing the Right Tool for the Job

HTML5 Canvas and SVG are both standards-based HTML5 technologies that you can use to create amazing graphics and visual experiences. The question I’m asking in this article is the following: Should it matter which one you use in your project? In other words, are there any use cases for preferring HTML5 Canvas over SVG?

First, let’s spend a few words introducing HTML5 Canvas and SVG.

What Is HTML5 Canvas?

Here’s how the WHATWG specification introduces the canvas element:

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.

In other words, the <canvas> tag exposes a surface where you can create and manipulate rasterized images pixel by pixel using a JavaScript programmable interface.

Here’s a basic code sample:

See the Pen Basic Canvas Shape Demo by SitePoint (@SitePoint)
on CodePen.

The HTML:

<canvas id="myCanvas" width="800" height="800"></canvas> 

The JavaScript:

const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); context.fillStyle = '#c00'; context.fillRect(10, 10, 100, 100); 

You can take advantage of the HTML5 Canvas API methods and properties by getting a reference to the 2D context object. In the example above, I’ve drawn a simple red square, 100 x 100 pixels in size, placed 10px from the left and 10px from the top of the <canvas> drawing surface.

Being resolution-dependent, images you create on <canvas> may lose quality when enlarged or displayed on Retina Displays.

Drawing simple shapes is just the tip of the iceberg. The HTML5 Canvas API allows you to draw arcs, paths, text, gradients, etc. You can also manipulate your images pixel by pixel. This means that you can replace one color with another in certain areas of the graphics, you can animate your drawings, and even draw a video onto the canvas and change its appearance.

What Is SVG?

SVG stands for Scalable Vector Graphics. According to the specification:

SVG is a language for describing two-dimensional graphics. As a standalone format or when mixed with other XML, it uses the XML syntax. When mixed with HTML5, it uses the HTML5 syntax. …

SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.

SVG is an XML file format designed to create vector graphics. Being scalable has the advantage of letting you increase or decrease a vector image while maintaining its crispness and high quality. (This can’t be done with HTML5 Canvas-generated images.)

Here’s the same red square (previously created with HTML5 Canvas) this time drawn using SVG:

See the Pen Basic SVG Shape by SitePoint (@SitePoint)
on CodePen.

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600"> <desc>Red rectangle shape</desc> <rect x="10" y="10" width="100" height="100" fill="#c00" /> </svg> 

You can do with SVG most of the stuff you can do with Canvas — such as drawing shapes and paths, gradients, patterns, animation, and so on. However, these two technologies work in fundamentally different ways. Unlike a Canvas-based graphic, SVG has a DOM, and as such both CSS and JavaScript have access to it. For example, you can change the look and feel of an SVG graphic using CSS, animate its nodes with CSS or JavaScript, make any of its parts respond to a mouse or a keyboard event the same as a <div>. As it will become clearer in the following sections, this difference plays a significant part when you need to make a choice between Canvas and SVG for your next project.

Immediate Mode and Retained Mode

It’s crucial to distinguish between immediate mode and retained mode. HTML5 Canvas is an example of the former, SVG of the latter.

Immediate mode means that, once your drawing is on the canvas, the canvas stops keeping track of it. In other words you, as the developer, you need to work out the commands to draw objects, create and maintain the model or scene of what the final output should look like, and specify what needs to be updated. The browser’s Graphics API simply communicates your drawing commands to the browser, which then executes them.

SVG uses the retained approach, where you simply issue your drawing instructions of what you want to display on the screen, and the browser’s Graphics API creates an in-memory model or scene of the final output and translates it into drawing commands for your browser.

Being an immediate graphics system, Canvas hasn’t got a DOM, or Document Object Model. With Canvas, you draw your pixels and the system forgets all about them, thereby cutting down on the extra memory needed to maintain an internal model of your drawing. With SVG, each object you draw gets added to the browser’s internal model, which makes your life as a developer somewhat easier, but at some costs in terms of performance.

On the basis of the distinction between immediate and retained mode, as well as other specific characteristics of Canvas and SVG respectively, it’s possible to outline some cases where using one technology over the other might better serve your project’s goals.

Continue reading Canvas vs SVG: Choosing the Right Tool for the Job on SitePoint.