How to Use SVG in HTML: The 4 Methods Compared

There are four ways to put an SVG on a web page, and they are not interchangeable – each draws a different line on what CSS can style, what caches, and what scripts can touch. Most “why won’t my SVG do X” questions are really “method Y can’t do X.” Here’s the full map.

Method 1: Inline <svg> – full power

Paste the markup directly into your HTML:

<button>
  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  </svg>
  Home
</button>

The SVG becomes part of the document: CSS styles its internals (hover recolors, theme variables, currentColor), JavaScript reaches every shape, animation works, zero extra network requests.

Costs: it bloats your HTML (optimize first – why that multiplies), doesn’t cache independently, and inlining many copies of the same icon repeats the markup (see Method 4).

Use for: icons and graphics that need styling, theming, or interaction – i.e., most UI graphics. This is the modern default; every icon in our free catalog copies out inline-ready.

Method 2: <img src="file.svg"> – simple and sealed

<img src="/logo.svg" alt="Acme Inc" width="120" height="32">

Treats the SVG as a regular image: cached, lazy-loadable, one line. But it’s sealed – page CSS cannot reach inside (the eternal “why won’t CSS change my SVG’s color”), scripts inside the SVG won’t run, and external references inside the file won’t load. The file must be self-contained, with its colors baked in, and needs xmlns to render at all (the not-showing checklist).

Use for: static graphics – logos, illustrations – that never change with state. Set width/height to prevent layout shift, and write real alt text.

Method 3: CSS background-image – decoration

.hero {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3E");
  background-repeat: repeat;
}

Same sealed-box rules as <img>, plus: invisible to screen readers (decoration only, by design), and tiles beautifully – the natural home of SVG patterns and background textures. The Data-URI form above skips a network request; our code editor copies any SVG correctly URL-encoded (the # and quote characters will break naive pasting).

Use for: decorative backgrounds, patterns, dividers – never meaningful content.

Method 4: <use> sprites – inline power, defined once

The scale solution when one icon appears fifty times:

<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  </symbol>
</svg>

<svg class="icon"><use href="#icon-home"/></svg>
<svg class="icon"><use href="#icon-home"/></svg>

Define each icon once in a hidden sprite block; instantiate with one-liners. Instances stay CSS-stylable (currentColor flows through), markup stays light. In component frameworks (React/Vue/Astro), components fill this role naturally – an Icon component is a sprite system.

Use for: icon systems at scale, especially in plain HTML.

The decision table

Need	Method
CSS hover/theme on the graphic	Inline or <use>
Cached, simple, static	<img>
Repeating decoration	CSS background
Same icon many times	<use> / components
Accessible meaningful image	<img> + alt, or inline + role="img" + <title>

Two hygiene rules apply to every method: optimize files first (inline bloat multiplies, and Figma’s id collisions break Method 1 pages – details), and mind accessibility (aria-hidden="true" on decorative icons, real alternatives on meaningful ones). With the method matched to the job, SVG in HTML stops fighting you – and the rendering model explains the rest.