Programming - - By Craig Buckler

Canvas vs SVG: How to Choose the Right Format

At first glance, canvas and SVG appear to be different techniques that achieve the same thing. Both permit graphic manipulation in the browser, and either could be a solution for some projects. However, there are several subtle differences between the two, and choosing the wrong technology could cause development headaches later on.

Vectors vs Pixels

The primary difference between the two formats is that SVG is vector based, whereas canvas offers pixel operations.

The distinction is somewhat blurred — you can load bitmaps in SVG, and the canvas API can draw lines and shapes. But the final result is what’s important: SVGs remain as vectors but canvas elements are bitmaps. You can draw a shape on the surface of a canvas element, but it will become a collection of pixels.

Document vs Script

SVG images are defined in XML. An image can be created on the server side, or within a package such as Inkscape, and loaded directly into the browser for viewing and client-side manipulation.

Canvas is script-based and cannot operate when JavaScript’s disabled. All canvas images are built using a series of API drawing commands.

Objects vs Graphics

Every SVG element becomes part of the DOM and can be manipulated accordingly. For example, you can attach an “onclick” event handler to a shape, or examine its properties using a tool such as Firebug. Although this is useful, there is a performance hit when you’re working with large numbers of objects.

Canvas is a low-level graphics API. You’re drawing pixels — it’s very fast, but it’s not possible to manipulate existing shapes or attach event handlers.

Accessibility vs Alternative Content

SVGs are accessible: text remains as text, and something should appear even when the browser does not support SVG.

Canvas elements depend on JavaScript: if that’s not available, the browser will need to show alternative content.

Designer vs Developer

Many vector graphics packages already support the SVG format, so it’s easy for a designer to create an image and use it immediately.

Canvas images are built programmatically and require a developer to implement the code. I suspect canvas creation tools will appear, but programming knowledge will always be necessary.

Browser Support

Firefox, Chrome, Safari and Opera support both technologies, and Microsoft has announced that canvas and SVG will be available in Internet Explorer 9. Unfortunately, IE9 isn’t expected until next year and it won’t be available on XP — many users will remain on IE8 or below for years to come.

At the time of writing, SVG is probably the most viable cross-browser solution. There are several IE SVG plugins, and libraries such as Raphaël utilize IE’s native VML support.

Which Should You Choose?

In general, SVG is best suited to scalable and interactive graphics. Canvas is the best option for fast games or animations where hundreds of elements are being rendered. There will be situations where either format could be used, such as data charts.

More cautious developers will probably avoid SVG and canvas until a large majority of users have one or both enabled. However, they are viable technologies and there’s little reason why you shouldn’t investigate them further. They’re certainly an option for progressive enhancement techniques — for example, IE8 and earlier versions show a table of data whereas supported browsers show an animated pie chart.

Are you using SVG or canvas within your projects, or is it too early to adopt these technologies?