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. ...

Get The Modern Web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.