We often get asked, “Should we use SVG or Canvas?” The consensus is pretty clear, use SVG.
This is not the case with canvas. With canvas all elements are contained within a single canvas element and don’t attach to the DOM. What this means is you can’t interact with individual elements within the canvas itself.
SVG and canvas elements are supported by all the modern HTML5 browsers. Neither have native support in IE8 and below.
However, if your component is written using Raphael.js you can support IE8 and below using VML. That’s not the case with canvas.
With canvas you’re not able to run in IE8 at all. So if you’re trying to reach the widest browsers as possible, canvas is not for you.
SVGs are Scalable
Think of HTML5 Canvas as Adobe Photoshop and SVG as Adobe Illustrator. Both are excellent pieces of software. Both can produce great logos. But Illustrator produces scalable, crisp logos whereas Photoshop does not.
The consensus is pretty clear, stick with SVG. And, in case your wondering, SVG is The Batman.