<svg> Inline SVG
Vector graphics drawn right in the HTML, sharp at any size.
With <svg> you draw vector graphics straight in your HTML, using shapes like circle, rect and path. The result stays sharp at any size, and CSS can style it.
viewBox defines the coordinate system, which lets the drawing scale to whatever width and height you set. For accessibility, a meaningful graphic gets role="img" and a <title> child, and a decorative one gets aria-hidden="true". If the SVG lives in its own file, an img tag is less work.
Inline SVG is covered in the HTML standard, in the SVG part of its embedded content chapter (opens in a new tab). Compare it with drawing on a canvas.
Syntax
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40"/>
</svg>When to use it
Inline <svg> is for graphics that have to cooperate with the page. Icons pick up the text color through currentColor. A logo can change its parts on hover, each bar in a simple chart can have a title, and a diagram can have linked regions. There is no extra request, and your stylesheet reaches every shape.
A big illustration used on many pages is better as an img pointing at an .svg file. Your HTML stays readable and the browser caches the file. Scenes that change all the time or hold huge numbers of shapes belong in canvas.
Paste the full path of an icon thirty times and the page bloats. Define it once with <symbol> and reuse it with <use>. Ids inside inline SVGs also live in the page's id space. Two copies of a graphic that each define a gradient with the same id can clash.
Attributes
| Attribute | What it does |
|---|---|
viewBox | Coordinate system: min-x min-y width height. |
width | Display width. |
height | Display height. |
xmlns | SVG namespace; optional when inline in HTML. |
Live example
Edit the code and watch the preview.
<svg width="120" height="120" viewBox="0 0 100 100" role="img">
<title>A red circle</title>
<circle cx="50" cy="50" r="40" fill="#e74c3c"/>
</svg>More examples
Icon that follows the text color
Thanks to stroke="currentColor", the checkmark takes the color of the text around it. Change the paragraph color and the same markup turns green or red. aria-hidden keeps the decorative icon away from screen readers.
<p style="color:#070">
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 10l5 5L18 4" fill="none" stroke="currentColor" stroke-width="3"/></svg>
Changes saved
</p>
<p style="color:#c00">
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 10l5 5L18 4" fill="none" stroke="currentColor" stroke-width="3"/></svg>
Same icon, different color
</p>One star, drawn three times
The star is defined once in a hidden svg and drawn three times with <use>. A single label on the wrapper describes the whole rating, so a screen reader announces it once, not three times.
<svg style="display:none">
<symbol id="star" viewBox="0 0 20 20">
<path d="M10 1l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L1 8l6-1z"/>
</symbol>
</svg>
<p>Rating:
<span role="img" aria-label="3 out of 5 stars">
<svg width="20" height="20" fill="#e6a700"><use href="#star"/></svg>
<svg width="20" height="20" fill="#e6a700"><use href="#star"/></svg>
<svg width="20" height="20" fill="#e6a700"><use href="#star"/></svg>
</span>
</p>Tip: A meaningful SVG needs role="img" and a title.
Browser support
All current browsers support inline SVG in HTML. The HTML standard says how the parser handles it, and the SVG specification covers the graphics. Inside HTML you can leave out xmlns. A standalone .svg file needs it. See the inline SVG support table (opens in a new tab).
Accessibility
A meaningful SVG gets role="img" plus a title or aria-label. A decorative one gets aria-hidden="true" so screen readers skip it. When graphics need a text alternative is explained in the W3C note Understanding Non-text Content (opens in a new tab).
Common mistakes
Wrong
<svg><path d="..."/></svg>Right
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><path d="..."/></svg>No viewBox, no scaling. Hide decorative icons from assistive technology too.
Frequently asked questions
Should I use inline svg or an img tag?
For a simple image, <img src="logo.svg" alt="..."> is the low-effort route, and the file gets cached. Inline <svg> earns its place when you need to style parts of the graphic with CSS (say fill:currentColor on icons), animate it or script it. It does add to the HTML size and is not cached on its own, so do not repeat large drawings.
What does the viewBox attribute do?
It sets up the internal coordinate system. viewBox="0 0 24 24" means the drawing is 24 by 24 units, starting at 0,0. With a viewBox the SVG scales to any width and height you give it, by attribute or CSS, and keeps its proportions. Leave it out and the graphic is clipped instead of scaling. The SVG 2 specification (opens in a new tab) defines the attribute.