SVG vs canvas

Model answer.

SVG (Scalable Vector Graphics): shapes described in XML markup that become part of the DOM.

• Resolution-independent: sharp at any zoom.
• Each shape is an element you can style with CSS, animate, and attach event listeners to.
• Can be made accessible (<title>, role="img", aria-label).
• Slows down with many thousands of elements, because each one is a DOM node.
• Best for icons, logos, diagrams, maps and charts with a moderate number of points.

`<canvas>`: a bitmap you draw on with JavaScript (2D context or WebGL).

<canvas id="chart" width="600" height="300" role="img" aria-label="Seats filled per round"></canvas>
<script>
  const ctx = document.getElementById('chart').getContext('2d');
  ctx.fillStyle = '#2b59c3';
  ctx.fillRect(20, 120, 60, 180);   // once drawn, it is just pixels
</script>

• Immediate mode: once drawn, there are no objects left, only pixels. To change something you redraw, and hit-testing clicks is up to you.
• Scales poorly on zoom unless you redraw for the device pixel ratio.
• Inaccessible by default: you must provide a text alternative.
• Handles huge numbers of objects and per-pixel effects fast.
• Best for games, real-time visualisations, image editing and very large data sets.

Rule of thumb: SVG for a few hundred interactive shapes that should stay crisp and accessible; canvas for thousands of moving objects or pixel work.