HTML SVG Graphics

Draw sharp, scalable graphics with inline SVG: shapes, paths, text and viewBox, style them with CSS, build accessible icons and choose between SVG files and inline SVG.

Lesson 34 of 44Intermediate15 min read

SVG (Scalable Vector Graphics) describes pictures as shapes, such as circles, lines and paths, instead of a grid of pixels. Because the shapes are mathematical, an SVG stays perfectly sharp at any size, from a tiny icon to a full-screen illustration, and the file is often far smaller than an equivalent PNG.

SVG is written in a markup language very like HTML, and you can put it directly inside your HTML as an <svg> element. Each shape is then a real element on the page: you can style it with CSS, change it with JavaScript, animate it and make it accessible to screen readers. That's why most modern icon sets, logos and simple charts on the web are SVG.

In this lesson you'll draw basic shapes, understand the all-important viewBox, write simple paths, colour icons with currentColor so they match the text around them, and make SVG graphics accessible. You'll also learn when to use an SVG file with <img> instead of inline code.

Shapes and the coordinate system

HTML
<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="10" y="10" width="80" height="80" rx="10" fill="tomato" />
  <circle cx="150" cy="50" r="40" fill="gold" stroke="black" stroke-width="3" />
</svg>
ElementDrawsKey attributes
<rect>Rectanglex, y, width, height, rx
<circle>Circlecx, cy, r
<ellipse>Ovalcx, cy, rx, ry
<line>Straight linex1, y1, x2, y2
<polygon>Closed shapepoints="x,y x,y ..."
<path>Any shaped (drawing commands)
<text>Textx, y

Like canvas, (0, 0) is the top-left. fill colours the inside and stroke the outline.

viewBox and scaling

The viewBox="minX minY width height" attribute defines the SVG's internal coordinate system. The shapes are drawn in those units, then the whole picture is scaled to whatever size the <svg> is displayed at.

  • With viewBox="0 0 24 24", an icon designed on a 24-unit grid can be shown at 16px, 24px or 200px, always sharp.
  • Remove fixed width and height and set width: 100% in CSS to make an SVG fully responsive.
  • preserveAspectRatio controls how the picture fits when the box has a different shape; the default keeps it centred without distortion.

Paths, styling and accessibility

  • A path's d attribute is a list of commands: M move to, L line to, H and V horizontal and vertical lines, C curves, A arcs, Z close. Design tools export paths for you; you rarely write long ones by hand.
  • CSS can style SVG: fill, stroke, stroke-width, opacity, transitions and :hover all work on inline SVG.
  • fill="currentColor" makes an icon use the text colour of its parent, so icons match buttons and links automatically.
  • Accessibility: a meaningful graphic needs role="img" and a <title> (or aria-label). A purely decorative icon next to visible text should be hidden with aria-hidden="true".

HTML SVG Syntax

SVG syntax

<svg viewBox="0 0 100 100" width="100" height="100" role="img" aria-labelledby="t">
  <title id="t">Green circle</title>
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2" />
</svg>
<img src="logo.svg" alt="Company logo" width="120" height="40">

HTML SVG Summary

  • SVG draws scalable vector shapes that stay sharp at any size.
  • Basic elements: rect, circle, ellipse, line, polygon, path and text.
  • viewBox defines internal units so the graphic scales to any display size.
  • Inline SVG can be styled with CSS; currentColor matches the surrounding text.
  • Give meaningful SVGs role="img" and a title; hide decorative ones with aria-hidden.

HTML SVG Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Basic shapes

<svg viewBox="0 0 320 140" width="320" height="140" role="img" aria-labelledby="shapes-title">
  <title id="shapes-title">A red square, a yellow circle, a blue triangle and a line</title>
  <rect x="10" y="20" width="90" height="90" rx="12" fill="#ef4444" />
  <circle cx="160" cy="65" r="45" fill="#facc15" stroke="#a16207" stroke-width="4" />
  <polygon points="230,110 275,20 320,110" fill="#3b82f6" />
  <line x1="10" y1="130" x2="310" y2="130" stroke="#111827" stroke-width="3" stroke-linecap="round" />
</svg>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1The viewBox defines a 320 by 140 drawing area.
  2. Line 2The title gives the graphic an accessible name.
  3. Line 3rx rounds the rectangle's corners.
  4. Line 4A filled circle with an outline.
  5. Line 5A triangle from three points.
  6. Line 6A line needs a stroke colour to be visible.
Example 2

Icons that follow the text colour

<style>
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 8px; background: #1d4ed8; color: white; font-size: 16px; }
  .btn:hover { background: #1e40af; }
  .btn svg { width: 20px; height: 20px; }
  .link { color: #15803d; display: inline-flex; align-items: center; gap: 4px; }
</style>
<button class="btn" type="button">
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  Continue
</button>
<a class="link" href="#">
  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z" fill="currentColor"/></svg>
  Add to favourites
</a>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4CSS sets the icon size, so the same icon can be reused at any size.
  2. Line 8currentColor makes the arrow white, like the button text.
  3. Line 8The icon is decorative because the button has visible text, so it's hidden from screen readers.
  4. Line 12The same technique makes the star green, matching the link.
Example 3

A responsive SVG chart

<style>.chart { width: 100%; max-width: 420px; height: auto; } .bar { fill: #16a34a; } .bar:hover { fill: #15803d; }</style>
<svg class="chart" viewBox="0 0 220 120" role="img" aria-labelledby="ct cd">
  <title id="ct">Weekly visitors</title>
  <desc id="cd">Monday 40, Tuesday 70, Wednesday 55, Thursday 90, Friday 65.</desc>
  <rect class="bar" x="10"  y="60" width="30" height="40" />
  <rect class="bar" x="52"  y="30" width="30" height="70" />
  <rect class="bar" x="94"  y="45" width="30" height="55" />
  <rect class="bar" x="136" y="10" width="30" height="90" />
  <rect class="bar" x="178" y="35" width="30" height="65" />
  <line x1="5" y1="100" x2="215" y2="100" stroke="#6b7280" />
  <text x="10" y="115" font-size="9">Mon</text>
  <text x="178" y="115" font-size="9">Fri</text>
</svg>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1The SVG fills its container up to 420px and keeps its shape.
  2. Line 1CSS hover styles work on each bar.
  3. Lines 3 to 4A title and description make the chart's data available to screen readers.
  4. Lines 5 to 9Each bar's height is the value; y starts lower for shorter bars.

Common HTML SVG Mistakes

No viewBox on a scaled SVG

Don't
<svg width="48" height="48"><circle cx="12" cy="12" r="10" /></svg>   <!-- drawn for 24 units, but not scaled -->
Do
<svg viewBox="0 0 24 24" width="48" height="48"><circle cx="12" cy="12" r="10" /></svg>

Without a viewBox, the circle stays small in the corner instead of filling the larger box.

Hard-coded icon colours

Don't
<svg viewBox="0 0 24 24"><path d="..." fill="#000000"/></svg>
Do
<svg viewBox="0 0 24 24"><path d="..." fill="currentColor"/></svg>

A fixed black icon disappears in dark mode; currentColor follows the text.

A meaningful SVG with no name

Don't
<svg viewBox="0 0 24 24"><path d="..."/></svg>   <!-- a "warning" icon with no text nearby -->
Do
<svg viewBox="0 0 24 24" role="img" aria-label="Warning"><path d="..."/></svg>

HTML SVG in Real Projects

SVG everywhere

Icon libraries like Lucide, Heroicons and Font Awesome provide SVG icons, company logos are delivered as SVG files, and chart libraries such as D3 draw SVG charts. Codevra's own course logos and icons are inline SVG, coloured with CSS so they work in both light and dark mode.

HTML SVG Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the circle's radius attribute.

<svg viewBox="0 0 100 100"><circle cx="50" cy="50" ="40" fill="teal" /></svg>
Multiple choiceeasy

What's the main advantage of SVG over PNG for icons?

Multiple choicemedium

What does viewBox="0 0 24 24" define?

Multiple choicemedium

How do you make an icon use the same colour as the text around it?

Fix the bugmedium

The icon is decorative (the button has text) but screen readers announce it, and its colour is fixed black. Hide it from assistive technology and make it follow the text colour.

<button type="button" style="color: white; background: #15803d; padding: 8px 12px; border: 0">
  <svg viewBox="0 0 24 24" width="18" height="18"><path d="M4 12l5 5L20 6" fill="none" stroke="#000000" stroke-width="3"/></svg>
  Done
</button>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The SVG is hidden from screen readers
  • The path uses currentColor

HTML SVG Quiz

5 questions to check what you learned.

  1. What does SVG stand for?

    • Scalable Vector Graphics
    • Simple Vector Graphics
    • Styled Visual Graphics
    • Static Vector Grid

  2. Which attribute colours the inside of an SVG shape?

    • color
    • background
    • fill
    • stroke

  3. How should a decorative SVG icon next to visible text be marked?

    • role="img"
    • aria-hidden="true"
    • alt=""
    • title=""

  4. When is an SVG file in an img tag better than inline SVG?

    • When you need CSS hover effects on parts of it
    • For icons that change colour
    • Never
    • For large, unchanging graphics that benefit from browser caching

  5. What does the path command M do?

    • Moves the pen to a point without drawing
    • Draws a curve
    • Closes the path
    • Mirrors the shape

HTML SVG Challenge

A traffic light

Draw an SVG traffic light:

  1. An <svg> with a viewBox and role="img" plus an aria-label
  2. A dark <rect> for the body
  3. Three <circle> elements filled red, orange and green
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • SVG has a viewBox, role and label
  • Has a rect body
  • Three circles
  • Red, orange and green fills

Related HTML topics

33CanvasDraw graphics with the canvas element and JavaScript: rectangles, lines, circles, text and images, with colours and gradients, and learn when canvas is the right choice.15ImagesAdd pictures with img, write great alt text and keep pages fast.38AccessibilityBuild pages everyone can use, including screen-reader and keyboard users.
Esc
↑↓ to navigateEnter to open