Over a million developers have joined DZone.

SVG Versus Canvas

Lines versus dots: what's a graphic designer to do? Here are some helpful suggestions on how you might choose to put illustrations on your webpage.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 favor 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 elements—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 favorable 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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
svg ,canvas ,html ,graphics ,design

Published at DZone with permission of Tim Brock, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}