By Craig Buckler

Canvas vs SVG: How to Choose the Right Format

By Craig Buckler

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?

  • Justen

    We’re using Raphael with gRaphael (the graphs & charts plugin) on a project right now. The libraries were easy to work with. With help from jQuery I was able to create html tables of the data to be displayed and apply progressive enhancement to replace the table with bar graphs and pie charts. I did however run into a few caveats:

    * No documentation – Dmitry hasn’t got around to even rudimentary setup information for gRaphael. You’ll need to rely on poking around in the example code and source to figure out how to implement anything. If you’re handy with javascript this is no problem, but it’s far from a drop-in solution.

    * Performance: all the nifty animations that initially attracted me to gRaphael are unacceptably slow in Internet Explorer 7 & 8. In the end I had to do a browser check to disable animation. This may improve as the code is optimized.

    I did take a look at other SVG solutions, but they all suffered from one of two problems: no pie charts or no VML support for Internet Explorer. IE support also ruled canvas out so I didn’t even look at it (unfortunately the vast majority of our clients use IE). Anyway, SVG is definitely still in its infancy but I expect big things in the future, especially after the release of IE9. Good luck with it :)

Get the latest in Front-end, once a week, for free.