<canvas> & <svg>
Pixel-based and vector graphics.
1Two Ways to Draw
<canvas> is a bitmap surface drawn via JavaScript — ideal for games and visualizations. <svg> is XML-based vector graphics — perfect for icons and charts that scale crisply.
<canvas id="game" width="400" height="300"></canvas>
<svg viewBox="0 0 100 100" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="indigo" />
<text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
</svg>2Put the element in context
Canvas draws through scripting, while SVG describes graphics through markup. Neither automatically provides an understandable explanation of a chart or diagram. An original decorative shape and an informative data visualization need different accessible treatment.
3Practice with a small page
Draw a small decorative SVG and hide it from assistive technology when nearby text already explains the content. Create an informative diagram with an accessible name and an adjacent explanation. Choose canvas only when its rendering behavior fits the task.
Finished reading?
Mark this topic as complete to track progress.