7 Reasons to Consider SVGs Instead of Canvas

The HTML5 canvas element is used everywhere. From WebGL games to some amazing browser experiments, web developers are jumping on the canvas bandwagon and enjoying the ride.

But are we always using the right tool for the job? In many cases, Scalable Vector Graphics (SVG) offer a better alternative but itâ€™s easy to forget about the technology when itâ€™s hidden beneath the wave of canvas hype. If youâ€™re not considering SVG, perhaps the following reasons will make you think againâ€¦

1. SVGs are Scalable:
That should be obvious, but itâ€™s a huge benefit â€” especially now people are using high-resolution iPads and monitors. Itâ€™s also a bonus for responsive designs and your logo or chart can scale accordingly.

2. Designer Tools:
Canvas is a programmable image. Even importing a static graphic requires JavaScript and itâ€™s certainly not possible to define animation or effects without delving into code.

But anyone can create an SVG. Many of the tools are free and offer custom animation facilities. Have a play with:

Inkscape
OpenOffice or LibreOffice Draw
svg-edit â€” an online tool3. Language/Framework Support:
Canvas elements are manipulated using client-side JavaScript. You can do the same with SVG but you can also create partial or complete images in advance. In addition, SVGs are simply XML; you can create or modify them using any server-side technology.

4. Browser Support:
SVG and canvas elements are supported by all the HTML5 browsers. Neither have native support in IE8 and below, but shims such as RaphaÃ«l are available.

While thatâ€™s not necessarily a case for choosing SVG over canvas, you certainly canâ€™t reject SVGs on the basis of browser support.

5. Accessibility and SEO:
SVGs are accessible: text remains text, and something should appear even when your browser doesnâ€™t support every element.

Humans and machines can understand SVG code even if they canâ€™t render it. Search engines such as Google already parse SVGs but canvas elements will always require a fallback.

6. DOM Handling:
SVGs have a DOM so itâ€™s easy to attach event handlers and manipulate elements like you would for other HTML block. To move an item you simply change its co-ordinates.

The same is not true for canvas. To determine whether your mouse cursor is over an object, you need to compare the two locations and react accordingly â€” perhaps re-drawing the whole of the canvas again.

7. Itâ€™s More of What You Know:
SVG is XML and uses tags just like HTML. It also supports CSS, webfonts, and the JavaScript techniques youâ€™re familiar with.

Canvas manipulation isnâ€™t difficult but it requires a different mindset and youâ€™ll need to learn the API.

â€¦and the Future Looks Bright for SVG
The technology may have been around for more than a decade, but SVG developments continue to advance. Browser vendors are adding support for CSS backgrounds and inline integration as well as implementing mobile engines, animations, transforms and filters.

Canvas is also evolving but it remains a self-contained programmable bit-mapped image element. That will always impose limitations.

The Downsides
SVGs certainly arenâ€™t necessarily the best solution in all situations. If youâ€™re animating hundreds of items â€” perhaps for a firework or explosion effect â€” canvas will always be quicker because itâ€™s not constrained by the number of DOM elements the browser can handle. Canvas will generally be the best choice for fast action games.

In addition, SVG performance isnâ€™t always perfect and the webkit engine seems especially poor. You can often see Chrome and Safari redrawing each element in turn and, although they support animation, you canâ€™t apply SMIL nodes to the SVG DOM with JavaScript.

However, SVGs remain a better alternative for logos or charts with fewer intensive effects. Theyâ€™re not as trendy as canvas but thatâ€™s no reason to avoid them.