Canvas vs SVG: When Should You Use Each for Web Graphics?
Compare Canvas and SVG for web graphics — retained vs immediate mode, performance, resolution, and when to use each.
Expected Interview Answer
Canvas is an immediate-mode, pixel-based bitmap you draw onto imperatively with JavaScript and which forgets every shape once drawn, while SVG is a retained-mode, vector-based DOM tree of individually addressable elements that the browser keeps around, styles, and re-renders automatically.
With Canvas, each drawing call (fillRect, arc, drawImage) paints pixels directly, so once something is drawn there is no “shape object” left to select, style with CSS, or attach an event listener to — the app must track its own model and redraw the whole scene on every change, which is exactly why Canvas scales well to thousands of independent objects like particles or game sprites. SVG instead creates real DOM nodes for every shape, so each circle or path can be styled with CSS, animated with the Web Animations API, targeted with querySelector, and given its own click handler, at the cost of the browser having to manage layout and paint for every node, which gets slow once you have many thousands of elements. Canvas output is resolution-dependent (it can blur when scaled or on high-DPI screens unless you explicitly account for devicePixelRatio), whereas SVG is resolution-independent and stays crisp at any zoom because it is math-defined vector geometry. The practical rule: pick SVG for interactive diagrams, icons, charts, and anything needing accessibility/DOM interaction with a moderate element count, and pick Canvas for high-frequency, high-volume, pixel-level rendering like games, particle systems, or image manipulation.
- SVG shapes are real DOM nodes, stylable with CSS and individually interactive
- Canvas scales to thousands of objects since nothing is retained as a DOM node
- SVG stays crisp at any zoom level as resolution-independent vector geometry
- Canvas gives direct pixel-level control, ideal for games and image processing
AI Mentor Explanation
SVG is like a scoreboard made of individually labeled physical panels for each stat, so you can walk up and replace just the wicket-count panel without touching anything else. Canvas is like painting the entire scoreboard fresh on a blank wall every time any number changes, since paint has no memory of what shape it used to be. The panel scoreboard is easy to update selectively but gets unwieldy with hundreds of panels, while the painted wall handles a busy, fast-changing crowd-cam overlay effortlessly because it is just pixels. That retained, addressable structure versus disposable pixel output is exactly the SVG-versus-Canvas tradeoff.
Step-by-Step Explanation
Step 1
Assess element count and interactivity
Dozens to low-thousands of elements needing clicks/CSS/accessibility favors SVG.
Step 2
Assess update frequency and volume
High-frequency, high-object-count rendering (games, particles) favors Canvas.
Step 3
Consider resolution needs
SVG stays crisp at any zoom; Canvas needs manual devicePixelRatio handling to avoid blur.
Step 4
Consider accessibility and tooling
SVG nodes are DOM-inspectable and screen-reader-friendly by default; Canvas content is opaque without extra ARIA work.
What Interviewer Expects
- Clear articulation of retained-mode (SVG/DOM) vs immediate-mode (Canvas/pixels)
- Ability to name concrete use cases for each (charts/icons vs games/particles)
- Awareness of resolution independence and devicePixelRatio for Canvas
- Mentions accessibility and per-element interactivity as a deciding factor
Common Mistakes
- Claiming one is unconditionally “better” than the other
- Using SVG for tens of thousands of frequently updating elements, tanking performance
- Forgetting Canvas needs manual devicePixelRatio scaling on high-DPI screens
- Assuming Canvas content is automatically accessible to screen readers
Best Answer (HR Friendly)
“SVG creates real, clickable shapes in the page that you can style with CSS, which is great for charts and icons, while Canvas is more like a blank drawing surface where you paint pixels directly, which is better for games or anything with a huge number of fast-moving objects. I would choose based on how many elements there are and whether I need individual interactivity.”
Code Example
// SVG: creates a real, addressable DOM node
const svgNS = 'http://www.w3.org/2000/svg'
const circle = document.createElementNS(svgNS, 'circle')
circle.setAttribute('cx', 50)
circle.setAttribute('cy', 50)
circle.setAttribute('r', 20)
circle.addEventListener('click', () => circle.setAttribute('fill', 'orange'))
document.querySelector('svg').appendChild(circle)
// Canvas: paints pixels, no lasting object to click later
const ctx = document.querySelector('canvas').getContext('2d')
ctx.beginPath()
ctx.arc(50, 50, 20, 0, Math.PI * 2)
ctx.fillStyle = 'orange'
ctx.fill()Follow-up Questions
- How would you handle click detection for a shape drawn on Canvas?
- Why does Canvas content blur on high-DPI screens without extra handling?
- How would you make Canvas-rendered content accessible to screen readers?
- At roughly what element count does SVG performance start to degrade?
MCQ Practice
1. What is the fundamental difference between SVG and Canvas rendering?
SVG keeps addressable DOM elements; Canvas paints pixels that are forgotten once drawn.
2. Which is generally better suited to a game with thousands of moving particles?
Canvas avoids per-object DOM overhead, making it efficient for very high object counts.
3. Why does SVG stay crisp when zoomed in, unlike a naive Canvas drawing?
SVG geometry is resolution-independent vector math; Canvas is a fixed-resolution bitmap unless manually scaled.
Flash Cards
SVG rendering model? — Retained-mode: real, addressable DOM nodes per shape.
Canvas rendering model? — Immediate-mode: painted pixels with no lasting shape objects.
Best fit for Canvas? — High-volume, high-frequency rendering like games or particle systems.
Best fit for SVG? — Interactive diagrams, icons, and charts needing CSS styling and accessibility.