Skip to content
Laviyx Learn

Try

HTML course menu

SVG and Canvas in HTML: Drawing Graphics on Web Pages

Learn the two ways to draw graphics in HTML: inline SVG with shapes, paths and text that scale without blurring, and the canvas element that you draw on with JavaScript, plus when to choose each.

Intermediate5 min readUpdated
On this page

Besides image files, HTML has two built-in ways to draw graphics: SVG, where you describe shapes in markup, and canvas, where JavaScript paints pixels.

SVG: graphics as markup#

SVG (Scalable Vector Graphics) describes shapes with XML tags. You can write it directly inside HTML:

HTML
<svg width="300" height="150" viewBox="0 0 300 150" role="img" aria-label="A blue square, an orange circle and a green triangle">
  <rect x="10" y="30" width="80" height="80" fill="#2f5fe0" rx="8"/>
  <circle cx="150" cy="70" r="40" fill="orange"/>
  <polygon points="220,110 260,30 300,110" fill="seagreen"/>
  <text x="10" y="140" font-family="sans-serif" font-size="14">Shapes drawn with SVG</text>
</svg>
Result
ElementDraws
<rect>A rectangle (x, y, width, height, optional rounded corners with rx)
<circle>A circle (cx, cy centre and r radius)
<line>, <polyline>, <polygon>Straight lines and shapes made of points
<path>Any shape, using a compact drawing language in the d attribute
<text>Text that stays selectable and searchable

Why SVG#

  • It is vector graphics, so it stays sharp at any size and on any screen density.
  • Files for simple graphics are tiny.
  • Every shape is an element: CSS can style it (fill, stroke) and JavaScript can change it.

That makes SVG ideal for icons, logos, illustrations, diagrams and simple charts. You can also save SVG in a .svg file and use it with <img src="logo.svg" alt="...">, as the image lessons on this site do.

viewBox#

viewBox="0 0 300 150" defines the drawing's own coordinate system. If the SVG is displayed larger or smaller, everything scales to fit:

HTML
<svg width="60" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="crimson"/></svg>
<svg width="90" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="crimson"/></svg>
Result

Both use the same circle; only the displayed width changes.

Accessible SVG#

For a meaningful inline SVG, add role="img" and an aria-label (or a <title> as the first child), as in the first example. For purely decorative SVG, add aria-hidden="true" so screen readers ignore it.

Canvas: pixels painted with JavaScript#

<canvas> is a blank rectangle. JavaScript draws on it using a drawing API:

HTML
<canvas id="board" width="300" height="140">
  A bar chart of sales: Monday 40, Tuesday 90, Wednesday 65.
</canvas>
JavaScript
const ctx = document.getElementById("board").getContext("2d");
const sales = [40, 90, 65];
sales.forEach((value, i) => {
  ctx.fillStyle = "#2f5fe0";
  ctx.fillRect(20 + i * 90, 120 - value, 60, value);
});
ctx.fillStyle = "black";
ctx.font = "14px sans-serif";
ctx.fillText("Sales: Mon, Tue, Wed", 20, 138);
Result
  • width and height set the canvas's pixel size.
  • getContext("2d") returns the drawing tools: fillRect, arc, lineTo, fillText, drawImage and many more.
  • Content between the tags is a fallback. Since canvas is just pixels, screen readers cannot read the drawing, so describe it there or next to it.

Once drawn, shapes are only pixels: there is no "rectangle element" to restyle or click. To animate, you redraw the whole canvas many times per second. You will learn the JavaScript side in the JavaScript course.

SVG or canvas?#

SVGCanvas
ModelShapes as elementsA bitmap of pixels
ScalingAlways sharpBlurs if stretched
AccessibilityText and labels can be readNeeds a separate text alternative
Styling and eventsCSS and event listeners per shapeYour own code must track what was drawn where
Best forIcons, logos, diagrams, charts with few elementsGames, image editing, charts and visualisations with many thousands of points

Practice#

Practice exercise

Draw a simple traffic light in SVG: a dark grey rounded rectangle with red, amber and green circles stacked inside it, with an accessible label.

Show solution
HTML
<svg width="90" height="220" viewBox="0 0 90 220" role="img" aria-label="Traffic light with red, amber and green lights">
  <rect x="5" y="5" width="80" height="210" rx="16" fill="#333"/>
  <circle cx="45" cy="45" r="25" fill="red"/>
  <circle cx="45" cy="110" r="25" fill="orange"/>
  <circle cx="45" cy="175" r="25" fill="limegreen"/>
</svg>
Result

Key takeaway#

Finished this lesson?

Related lessons

HTMLHTML Images: The img Element, src, alt Text, Width and HeightLearn to add images to web pages with the img element: the src and alt attributes, writing good alt text, empty alt for decorative images, width and height to prevent layout shift, lazy loading, and choosing between JPEG, PNG, WebP, AVIF and SVG.Beginner4 min readHTMLHTML iframe: Embedding Maps, Videos and Other Pages SafelyLearn to embed other web pages with the HTML iframe element: src, width and height, the title attribute for accessibility, lazy loading, the sandbox and allow attributes for security, srcdoc, and why some sites refuse to be embedded.Intermediate4 min readJavaScriptIntroduction to the DOM: How JavaScript Sees and Changes Web PagesUnderstand the Document Object Model (DOM): how the browser turns HTML into a tree of nodes, the document and window objects, elements versus nodes, where to put scripts so elements exist, and a first interactive example.Intermediate5 min read