LearnHTML.net

Explore

LearnHTML.net

Quick find

Search lessons, patterns, and prompts

Open full search
SearchPrompt Builder

Reference · Intermediate

Inline SVG in HTML

Use inline SVG for scalable graphics that need document-level styling, scripting, or accessible naming, while keeping decorative art silent.

Published
Last checked

Definition

Inline svg embeds a vector-graphics document directly in HTML. It scales without bitmap blur and lets CSS or scripts address its shapes. Use it when that control is useful; an ordinary img is simpler for a standalone SVG file.

Informative graphic

<svg viewBox="0 0 24 24" role="img" aria-labelledby="chart-title">
  <title id="chart-title">Sales increased from April to June</title>
  <!-- paths and shapes -->
</svg>

The accessible name must communicate the graphic's purpose. Complex charts may also need adjacent text or a data table; a short title cannot carry every value.

Decorative graphic

When the same information already appears in nearby text, hide the decorative SVG from assistive technology and keep it unfocusable. For an icon inside a button, name the button, not the individual paths. Repeated path descriptions create noise rather than useful detail.

Browser and accessibility behavior

An inline SVG participates in the DOM. Its viewBox defines scalable internal coordinates; CSS width and height define displayed size. Accessibility exposure depends on roles, names, descendants, and platform mappings. External SVG used through img follows the image element's alternative-text contract instead.

Common failures

  • An icon-only control has an unnamed SVG and an unnamed button.
  • Decorative SVG is announced as an unlabeled graphic.
  • Text is converted to paths, preventing selection, adaptation, and translation.
  • A missing viewBox produces clipping or poor responsive scaling.

Verification checklist

Inspect the accessibility tree for one useful name or deliberate silence. Test high zoom, forced colors, dark mode, and print. Confirm focus lands on the control rather than internal shapes unless the graphic is intentionally interactive. For charts, compare the visual with its text alternative and ensure every material conclusion and value remains available.

Resize the SVG through its full supported range and inspect localized labels. Embedded text can clip even when paths scale correctly. If scripts update the graphic, confirm its accessible name, description, and equivalent data update in the same authoritative state change.