Canvas & SVG

HTML has two ways to draw graphics. SVG describes shapes as elements — crisp at any size, styleable with CSS and accessible. Canvas is a pixel surface you paint on with JavaScript — fast for games, charts with thousands of points and image effects.

Inline SVG

Every shape is an element: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path> and <text>. The viewBox defines the internal coordinate system, so the drawing scales cleanly to any displayed size.

Paths

The d attribute is a mini-language: M moves the pen, L draws a line, Q and C draw curves, Z closes the shape. Design tools export complex icons and illustrations as paths.

SVG works with CSS and links

Inline SVG can be styled, animated and made interactive like HTML. Using fill: currentColor makes an icon take on the surrounding text colour automatically. Decorative icons get aria-hidden="true"; meaningful graphics get role="img" and a <title>.

Three ways to use SVG

Method	Pros	Cons
Inline `<svg>`	Full CSS and script control	Repeated markup, not cached
`<img src="logo.svg">`	Cached, simple, needs alt text	Can't style the inside with page CSS
CSS `background-image`	Good for decoration	No alt text, not for content

Canvas

<canvas id="chart" width="320" height="160" role="img" aria-label="Bar chart of weekly sales: highest on Friday"></canvas>
<script>
  const ctx = document.getElementById("chart").getContext("2d");
  const sales = [12, 19, 8, 15, 27, 22, 9];
  const days = ["M", "T", "W", "T", "F", "S", "S"];
  ctx.fillStyle = "#f4f6fa";
  ctx.fillRect(0, 0, 320, 160);
  sales.forEach((value, i) => {
    const h = value * 4.5;
    ctx.fillStyle = i === 4 ? "#d6336c" : "#1a5fb4";
    ctx.fillRect(20 + i * 42, 140 - h, 30, h);
    ctx.fillStyle = "#10131c";
    ctx.font = "12px sans-serif";
    ctx.fillText(days[i], 31 + i * 42, 155);
  });
</script>

Result

A <canvas> is just a blank rectangle of pixels; everything is drawn by script through its 2D context (or WebGL/WebGPU for 3D). Once drawn, the shapes don't exist as objects — to change something, you redraw.

Accessibility: canvas content is invisible to screen readers. Give the canvas a text alternative (role="img" with aria-label), or put fallback content — like a data table — between the <canvas> tags.

Animation on canvas

SVG or canvas?

Choose SVG for…	Choose canvas for…
Logos, icons, illustrations	Games and fast animation
Charts with a modest number of elements	Charts or visualisations with thousands of points
Anything that needs to scale sharply, be styled, or be accessible	Image editing, pixel effects, video processing
Interactive diagrams with clickable parts	Drawing apps

Charting libraries use both: SVG-based ones (like D3) are easy to style and inspect, canvas-based ones (like Chart.js) handle larger datasets.

Try it yourself

PreviousTemplates & Web Components NextDrag & Drop and APIs