Canvas and SVG Graphics

Canvas and SVG Graphics

HTML5 supports two major graphics approaches: canvas and SVG. They solve different problems.

<canvas>

Purpose:

  • creates a drawing surface controlled with JavaScript

Important attributes:

  • width
  • height

Example:

<canvas id="chart" width="400" height="200"></canvas>

Use canvas for:

  • simple games
  • drawing tools
  • particle effects
  • charts drawn with JavaScript

Simple Canvas Example

<canvas id="demo" width="300" height="150"></canvas>
<script>
const canvas = document.getElementById("demo");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "royalblue";
ctx.fillRect(20, 20, 120, 80);
</script>

<svg>

Purpose:

  • creates vector graphics directly in markup

Important attributes:

  • width
  • height
  • viewBox

Example:

<svg width="120" height="120" viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="40" fill="tomato" />
</svg>

Use SVG for:

  • icons
  • logos
  • diagrams
  • scalable illustrations

Canvas vs SVG

  • canvas is pixel-based and script-driven
  • SVG is markup-based and scalable
  • canvas is good for fast repeated drawing
  • SVG is good for crisp UI graphics and accessible shapes
PreviousNext Chapter