SVG versus Canvas

Suppose you want to draw something on your web page using browser-native technologies. It might be some kind of animated scene, it might be a technical diagram, it could be some kind of custom infographic. What should you use? As the title of the article suggests, there are a couple of obvious answers: a canvas element or a scalable vector graphic (SVG). In some cases, either SVG or canvas might work reasonably well and you can choose whichever you prefer working with. In other cases, practical considerations will make it almost inevitable that you favour one over the other.

Vectors versus Pixels

As the name suggests, SVG images are a vector image format. As the name also suggests, they can generally be scaled indefinitely without becoming blurry or pixelated. By contrast, an HTML canvas element is composed of pixels. If you blow-up or zoom in on an image drawn on a canvas element you'll be able to see pixelation.

But things are not quite as simple as just saying "use SVG if you want a vector graphic and canvas if you want a raster graphic". Firstly, an SVG image can include one or more raster graphics, either through a data URI or by linking to a file. An embedded image won't be magically vectorized, so if you zoom in your "vector graphic" will look pixelated. And while, ultimately, the appearance of a canvas element is just a collection of variously colored pixels, if you're drawing something from scratch programmatically you can adapt what's drawn to the screen size. While you can change the colors of individual canvas pixels should you want to, much of the time you'll be drawing paths.

Stateful versus Stateless

SVG is stateful. That is, once you've added element — a line, a circle, a rectangle etc, you can go back and change them (move them around, change their size or color...). Once you've drawn something on a canvas, by contrast, the only record you get for free is the color (and transparency) of the resultant pixels. If you want to change how the canvas looks, you may have to redraw the whole thing from scratch! In many cases I think this fact is far more important when comparing SVG to canvas than whether or not what you've actually drawn is a vector graphic. The next two subsections will explain why.

Ease of Event Monitoring

With SVG it's really easy to associate graphical elements with events like click, mouseover and touch. Why? Because the elements you add to your SVG become part of the page. As a result, you can add event handlers in the same way you would to other DOM elements like divs, imgs, spans and sections. If you move an element around the event handler doesn't go away (unless you tell it to). With canvas the only element you have on the page is the canvas element itself. The rectangle you drew isn't an element. There's no record you even drew a rectangle once it's been drawn unless you kept it yourself. All you have is some (presumably) colored pixels. And the only events you can fire are on the canvas element as a whole.

That's not to say that all is lost for canvas. You can keep your own records of where you placed graphic elements and use the coordinates associated with an event on the canvas to work out what a cursor or finger is over. It's just a lot more work if you don't have a good library to help you along.

Coping with A Large Number of Graphical Elements

The fact that an SVG image naturally creates a record in the DOM of all the elements drawn, their positions and other attributes certainly seems to make it favourable for any kind of complex, interactive graphic. In many cases this is true. But SVGs also have a big flaw: they create a record in the DOM of all the elements drawn, their positions and other attributes. If your SVG contains a lot of elements, then so does your DOM. And this can make things slow. Very slow. If you want to draw a couple of thousand elements in your SVG you might have problems. If you want to draw them and then move them around 60 times a second to create a smooth animation you're in big trouble. Canvas is almost certainly a better idea.

A Third Option

I'll finish by pointing out that SVG and canvas aren't the only options for drawing and animation with web-native technologies. It's amazing what can be done in a modern browser with only a chunk of CSS a little JavaScript and some regular HTML div elements.

Try our jQuery HTML5 controls for your web apps and take immediate advantage of their stunning data visualization capabilities. Download Free Trial today.