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.
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.
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.
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?
User Interface Design with Sketch 4
Diving into ES2015
Rails: Novice to Ninja
Designing UX: Forms
Bootstrap: A SitePoint Anthology #1
Bootstrap: A SitePoint Anthology #1
- 1 How to Stop Designing Square Layouts by Thinking Outside of the Box
- 2 ‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)
- 4 The Best Way to Create Fantastic 'Invisible Pen' Effects in SVG
- 5 How to Translate from DOM to SVG Coordinates and Back Again