Inline SVG

Embed SVG directly in HTML for CSS-styleable, accessible, and interactive vector graphics.

Overview

SVG (Scalable Vector Graphics) is an XML-based format for vector images that can be embedded directly in HTML. Unlike <img src="icon.svg">, inline SVG makes the SVG elements part of the DOM meaning you can style them with CSS, animate them, and manipulate them with JavaScript. Inline SVG is ideal for: - Icons that should match the surrounding text color (inherit via currentColor) - Animated illustrations - Interactive charts and diagrams - SVG filters and effects applied to other elements The SVG coordinate system uses a viewBox that defines the internal coordinate space, independent of the displayed size.

Key Points

•Inline <svg> becomes part of the HTML DOM fully styleable and scriptable
•viewBox="0 0 width height" defines the internal coordinate system
•Use currentColor in SVG fills/strokes to inherit the parent's CSS color
•aria-hidden="true" on decorative SVGs; use aria-label or <title> for meaningful ones
•width and height on <svg> set the rendered size; viewBox scales the content
•SVG elements: <circle>, <rect>, <path>, <line>, <polygon>, <text>, <g> (group)

Examples

A simple accessible icon

<!-- Decorative icon (hidden from screen readers) -->
<button>
  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Search
</button>

<!-- Standalone meaningful icon -->
<svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Warning">
  <title>Warning</title>
  <path d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
        fill="none" stroke="currentColor" stroke-width="2"/>
</svg>

CSS-styleable SVG using currentColor

<style>
  .icon        { width: 1em; height: 1em; fill: currentColor; }
  .icon-error  { color: #ef4444; }
  .icon-success { color: #22c55e; }
</style>

<!-- Icon inherits the .icon-error color -->
<span class="icon-error">
  <svg class="icon" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10"/>
    <line x1="12" y1="8" x2="12" y2="12" stroke="white" stroke-width="2"/>
    <circle cx="12" cy="16" r="1" fill="white"/>
  </svg>
  Error
</span>

currentColor inherits from the element's or ancestor's CSS color property.

Basic SVG shapes

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="60" fill="#3b82f6" rx="4"/>

  <!-- Circle -->
  <circle cx="150" cy="40" r="30" fill="#f59e0b"/>

  <!-- Line -->
  <line x1="10" y1="90" x2="190" y2="90" stroke="#6b7280" stroke-width="2"/>

  <!-- Text -->
  <text x="100" y="55" text-anchor="middle" fill="white" font-size="14">SVG</text>
</svg>

Common Mistakes

Omitting aria-hidden or aria-label on SVGs screen readers read the SVG markup as gibberish
Not adding focusable="false" on SVG in IE/Edge SVG elements are focusable by default there
Setting absolute fill colors instead of currentColor icon won't match text color changes

Note

For icon libraries, put SVG <symbol> definitions in a hidden <svg> at the top of the body, then use <use href="#icon-id"> anywhere on the page. This caches the SVG once and reuses it across many instances.

Inline SVG

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the main advantage of inline SVG over <img src="icon.svg">?