SVG and Canvas in HTML: Adding Graphics to Your Page

SVG and canvas let you add graphics to a web page with code. Learn inline SVG basics, how to make SVG accessible, when to use SVG as an image, and how to draw on a canvas.

What is SVG?

SVG stands for Scalable Vector Graphics. It is a way to describe a picture with text: "draw a circle here, a rectangle there". Because it is made of shapes, not pixels, an SVG stays sharp at any size, from a tiny icon to a giant poster. A photo is like a mosaic of tiny tiles; an SVG is like a set of drawing instructions.

SVG is perfect for logos, icons, simple illustrations and diagrams. It is not good for photos; use JPEG, WebP or AVIF for those.

Inline SVG basics: svg, viewBox, circle, rect and path

You can write SVG straight into your HTML. This is called inline SVG.

• <svg> is the container, like a sheet of paper.
• viewBox="0 0 100 100" sets up the drawing area: start at 0, 0 and make it 100 units wide and 100 units high. The shapes inside use these units. The SVG then scales to whatever width and height you give it.
• <circle> uses cx and cy for the centre and r for the radius.
• <rect> uses x, y, width and height, and rx for rounded corners.
• <path> draws any shape with the d attribute. M means "move to", L means "line to" and Z means "close the shape".
• fill is the inside colour; stroke is the outline.

<svg width="120" height="120" viewBox="0 0 100 100" role="img" aria-labelledby="sun-title">
  <title id="sun-title">A yellow sun over a green hill</title>
  <rect x="0" y="0" width="100" height="100" rx="12" fill="lightblue"/>
  <circle cx="70" cy="30" r="15" fill="gold"/>
  <path d="M0 100 L0 70 L40 55 L100 75 L100 100 Z" fill="seagreen"/>
</svg>

You see a small rounded sky-blue square with a yellow sun in the top right and a green hill along the bottom. Change width and height to 300 and it grows with no blur at all.

How to make SVG accessible with title

The <title> element, as the first child of <svg>, gives the graphic a name, just like alt text on an image. Adding role="img" and aria-labelledby pointing at the title makes screen readers reliably announce it as one image with that name.

If an SVG is only decoration, for example an icon next to the word "Search" on a button, hide it with aria-hidden="true" so it is not read twice.

Tip: You don't have to write SVG by hand. Design tools like Figma or Inkscape can export SVG files. Open the file in your code editor and you will see the same kinds of tags.

SVG as an img vs inline SVG

There are two main ways to use an SVG file.

<!-- As an image file -->
<img src="images/logo.svg" alt="Green Leaf Cafe" width="160" height="40">

<!-- Inline, with currentColor so it matches the text colour -->
<button type="button">
  <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.5 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="currentColor"/>
  </svg>
  Add to favourites
</button>

The first line shows a logo file like any picture. The browser can cache it, so it loads once for every page. The button shows a small star drawn inline. fill="currentColor" makes the star the same colour as the button text, so if CSS changes the text colour, the star changes too.

Use <img> when the SVG is a picture you don't need to change, like a logo. Use inline SVG when you want to style parts of it with CSS, animate it, or make icons match your text colour.

What is the canvas element?

The <canvas> element is an empty drawing area. You draw on it with JavaScript, pixel by pixel, like painting on a real canvas. Once something is painted, the browser forgets the shapes; it only remembers the pixels. That makes canvas great for games, photo editing, and charts with thousands of points.

<canvas id="badge" width="200" height="100">A red rectangle with the word Hello.</canvas>

<script>
  const ctx = document.querySelector("#badge").getContext("2d");
  ctx.fillStyle = "tomato";
  ctx.fillRect(10, 10, 180, 80);
</script>

You see a red rectangle. Line by line: the first line finds the canvas and gets its 2D drawing tool, called the context. The second line picks a colour. The third line fills a rectangle starting 10 pixels from the left and top, 180 pixels wide and 80 pixels tall.

The text between the canvas tags is fallback content. It is shown if the canvas cannot be displayed, and it gives screen reader users a description.

Common mistake: Setting the canvas size only with CSS. The width and height attributes set the real number of pixels. If CSS stretches a 200 by 100 canvas to 800 pixels wide, the drawing looks blurry.

SVG vs canvas vs images: which should you use?

	Images (JPEG, WebP, PNG)	SVG	Canvas
Best for	Photos and detailed pictures	Logos, icons, diagrams	Games, live charts, effects
Sharp at any size?	No	Yes	No, it is pixels
Needs JavaScript?	No	No	Yes
Style with CSS?	Only the whole image	Yes, inline parts too	No
Accessible text	alt	<title> and role="img"	Fallback content

Practice exercise

Draw a simple traffic light in inline SVG: one dark rounded <rect> and three <circle> elements in red, amber and green. Give it a <title>, role="img" and aria-labelledby. Then try changing the width to make it much bigger.

Hint: use viewBox="0 0 40 100" and put the circles at cx="20" with cy values of 20, 50 and 80.

Key takeaways

• SVG describes graphics as shapes, so it stays sharp at every size.
• viewBox sets the drawing units; <circle>, <rect> and <path> draw shapes.
• Give meaningful SVG a <title> plus role="img"; hide decorative icons with aria-hidden="true".
• Use <img src="file.svg"> for fixed pictures and inline SVG when you need CSS control.
• <canvas> is a pixel drawing area you paint with JavaScript.