Media & Embedded Content

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

Example Code

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

Finished reading?

Mark this topic as complete to track progress.

<iframe> Embeds

Next Topic