Table of Contents for

The Modern Web

When to Choose SVG or Canvas

The two image methods in this chapter should really be viewed as complementary rather than competing, as they each fill a different role in web graphics. You could likely end up using both in your websites instead of being forced to make a choice between them.

Where SVG excels is in its scalability, which makes it suitable for any screen regardless of size or resolution. As it creates new elements in the DOM, SVG is very useful for interacting with and being manipulated by JavaScript. And it’s also much easier to make accessible by adding alternative and fallback text to the created items. SVG is a good choice for logos, icons, and interactive charts and graphics.

Canvas is bitmap-based so is less suitable for scaling. It allows no external manipulation by JavaScript beyond its own API and has few to no accessibility features as it currently stands (although work is underway to improve that). Canvas is best suited for image manipulation, and as it doesn’t access the DOM (which can slow a page considerably), it can be good for moving multiple items around the screen quite quickly, making it handy for gaming.

Both formats have their pros and cons, and for many purposes either would be suitable, so the best advice I can give you is that you should carefully consider the problem you want to solve and test each solution to see which is the more relevant one.