How to Embed SVG on a Website — img, Inline, Background and Which to Pick

There are four different ways to put an SVG on a website, and they're not interchangeable: one gives you caching, another CSS color control, a third saves requests. The choice affects speed, flexibility and even security. Let's go through each with code and an honest list of trade‑offs.

Method 1. The img tag — the default

<img src="/images/logo.svg" alt="Company logo" width="140" height="40">

Behaves like any image: cached by the browser, lazy‑loads with loading="lazy", keeps HTML lean.

Pros: caching, simplicity, safety — scripts inside the SVG don't run in this mode.

Cons: no CSS access to the internals. You can't recolor the logo on hover with fill — page styles don't reach inside <img>.

Method 2. Inline SVG — full control

<button class="btn">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
  </svg>
  Send
</button>

Pros: full CSS/JS control — color, animation, hover transitions. The magic word fill="currentColor" makes the icon inherit the text color: button color changes — icon follows, dark mode included, automatically. Zero network requests.

Cons: no caching (ships with every page), bloats HTML, and repeated icons get copy‑pasted around.

Choose for: UI icons that change color by state, and above‑the‑fold elements that can't wait for a request.

Method 3. CSS background‑image — for decoration

.hero {
  background-image: url('/images/pattern.svg');
  background-size: cover;
}

Pros: cached, decoration separated from content, background-repeat and friends work.

Cons: no recoloring (workaround: paint one‑color icons via mask-image + background-color); invisible to screen readers — so decoration only, never meaning.

Method 4. SVG sprite with use — for many icons

All icons live in one sprite file, referenced by id:

<svg class="icon"><use href="/sprite.svg#icon-search"/></svg>

Pros: one request for all icons, cached, currentColor works.

Cons: requires building the sprite (usually automated), and per‑icon lazy loading is awkward.

Choose for: design systems and interfaces with dozens of repeated icons.

Summary table

Security: why you must not inline third‑party SVG

SVG is XML, and it can carry <script>, event handlers and external references. Via <img> and background the browser ignores all of it — but inlining executes scripts with your page's full privileges.

FAQ

Do I need a PNG fallback? No. Every browser you'll meet in 2026 supports SVG. IE fallbacks are archaeology.

Why is my inline SVG huge on the page? It probably lacks a viewBox or carries giant hardcoded width/height. Make sure viewBox exists and sizing is done in CSS.

How do I animate SVG? Inline it and use regular CSS animations on paths and groups. For complex work — GSAP or Lottie (what logo animation is even for — covered separately).

Does lazy loading work for SVG? For <img> — yes, plain loading="lazy". Inline SVG ships with the HTML and can't be lazy — one more argument against inlining everything.

Can SVG be a cursor or favicon? Favicon — yes, via <link rel="icon" type="image/svg+xml"> (the favicon article). Cursor — formally possible (cursor: url(icon.svg)) but flaky; PNG is safer.

Accessibility: the three attributes everyone forgets

An SVG should make sense to screen readers, not just eyes:

• A meaningful image (logo, illustration): in <img> — a normal alt; in inline SVG — role="img" plus a <title> as the first child:

<svg role="img" viewBox="0 0 100 100">
  <title>Company logo</title>
  ...
</svg>

• A decorative icon next to text (the icon inside a "Send" button): the opposite — hide it with aria-hidden="true", or the reader announces both the text and the icon.
• An interactive SVG (an icon‑only button): aria-label on the button itself, aria-hidden on the SVG inside.

Three lines of code separating a tidy site from one where a blind user hears "graphic graphic graphic" instead of navigation.

Performance: what each method costs, in numbers

Take a typical page with a logo and 20 icons:

• Everything inline: +30–60 KB on every HTML document; icons never cache across pages. On a 100-page site the user downloads the icons 100 times.
• Everything via img: 21 requests on first visit, then cache. But 20 requests upfront is a visible pause on slow networks (HTTP/2 softens, doesn't cancel).
• Sprite + inline logo: 1 cached request for all icons, the logo renders instantly with zero requests. Usually the optimum.

Two multipliers for any method: run the SVG through an optimizer (30–70% off — see SVG optimization) and confirm the server gzips/brotlis SVG — text compresses 3–5×.

The classic complaint: the SVG logo "jumps" on load

The page renders, the logo pops in a beat later, shifting the header. Causes and cures:

1. No width/height on the img — the browser doesn't know the size until load. Set the attributes.
2. The SVG loads from a CSS background after style parsing — for a header logo use <img> or inline.
3. The logo depends on a web font (SVG text not outlined) — outline the text.

For above‑the‑fold there's also the "critical inline" pattern: the header logo inline (instant), everything else as cached files.

In short

<img> for logos and images, inline for recolorable icons, background for decoration, sprites for icons in bulk. And never inline SVG from untrusted sources.

Every SVG in our logo catalog is clean vector with no scripts or junk: download the file for <img> or copy the markup straight to your clipboard with one button.