VocalHyre
Sign up

HTML · The document layer

When would you use canvas instead of SVG?

MediumcanvassvggraphicsUpdated Oct 2026
Quiz this track

Short answer

canvas draws pixels through JavaScript and is good for games or heavy visualisation, while SVG describes shapes as DOM and stays sharp at any size. SVG is easier to style and make accessible.

The choice is about the nature of the graphics. Canvas is a bitmap surface you draw on; once something is drawn, the browser does not remember it as an object. SVG is a retained-mode document where every shape is an element.

  • Canvas: high frame rates, many particles, image processing, games
  • SVG: icons, charts, diagrams, maps and anything that needs to scale cleanly
  • SVG elements can be styled with CSS and inspected in the DOM
  • Canvas content is not accessible unless you provide a fallback or alternative
  • SVG text is real text and can be selected, searched and read
html
<svg viewBox="0 0 100 100" role="img" aria-label="A blue circle">
  <circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>

<canvas id="chart" width="400" height="300">
  A bar chart showing revenue by quarter.
</canvas>

Canvas requires JavaScript to draw and redraw. SVG can be rendered without script and can be animated with CSS. For a simple icon or logo, SVG is almost always the better choice.

A canvas is a single element in the accessibility tree. If the visual is important, provide a text alternative nearby or an accessible data table rather than relying on the drawing alone.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1Why is SVG usually better for icons?
  2. 2How do you make canvas content accessible?
  3. 3Can SVG be styled with CSS?
  4. 4Which is better for a real-time game?

Say it in the interview

Canvas is a bitmap surface that I draw on with JavaScript, so it is good for games, particle effects and very large numbers of shapes. SVG is a retained document of elements, so it scales cleanly, can be styled with CSS and can be made accessible. I choose SVG for icons, charts and diagrams, and canvas for performance-heavy rendering. Canvas content needs a text alternative because the drawing itself is not exposed to assistive technology.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

EasyHow do you write good alt text for images?MediumWhat are the basics of ARIA and when should you use it?HardHow do srcset, sizes and picture work?

Reading is step one

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.

Start a free HTML interviewBrowse all questions