How to Use SVG in HTML: img Tag, Inline, and CSS Methods

Three ways to embed SVG in HTML with code examples, trade-offs, a decision guide, and accessibility best practices.

There are three main ways to add an SVG image to an HTML page, and each method has different capabilities for styling, animation, caching, and accessibility. Choosing the right method depends on what you need the SVG to do. This guide covers all three approaches with working code examples, explains the trade-offs, and recommends when to use each one.

Method 1: The <img> Tag

The simplest method. Treat the SVG file like any other image:

<img src="/images/logo.svg" alt="Company Logo" width="200" height="60">

When to use: Static images that do not need CSS styling or interaction — logos in headers, illustrations in content, decorative graphics.

Advantages: Browser caches the file (fast on repeat visits), clean HTML, simple to implement, works everywhere.

Limitations: You cannot change SVG colors with CSS, cannot animate individual paths, cannot use JavaScript to interact with SVG internals. The SVG is treated as an opaque image, just like a PNG or JPEG.

Method 2: Inline SVG

Paste the SVG code directly into your HTML document:

<svg viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Search">
  <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>

When to use: Icons that need to match text color, interactive SVGs, animated graphics, any SVG that needs CSS styling.

Advantages: Full CSS control (change colors, add hover effects, transitions), JavaScript can access and modify every element, the currentColor value lets the SVG inherit text color automatically, great for icon systems.

Limitations: The SVG code lives inside the HTML, so it is not cached separately. If you use the same icon 50 times, the code is duplicated 50 times (unless you use the <use> technique with a sprite sheet — see "SVG for Web Developers" article).

Method 3: CSS Background Image

Use the SVG as a CSS background, just like you would with any image file:

.hero-icon {
  width: 200px;
  height: 200px;
  background: url('/images/hero-illustration.svg') center / contain no-repeat;
}

When to use: Decorative elements, background patterns, icons in pseudo-elements (::before, ::after).

Advantages: Clean HTML (no extra elements), browser caches the file, useful for decorative elements.

Limitations: Cannot style SVG internals with CSS, no JavaScript interaction, not accessible (cannot add alt text). This method should only be used for decorative images that do not convey information.

Quick Decision Guide

Making Your SVGs Accessible

Regardless of embedding method, ensure meaningful SVGs are accessible:

• For <img> tags: always include a descriptive alt attribute
• For inline SVGs: add role="img" and either aria-label or a <title> element with aria-labelledby
• For purely decorative SVGs: use aria-hidden="true" so screen readers skip them

Getting SVG Files

If you have PNG icons or logos that you need to embed as SVG, convert them using Shape to Vector — upload the PNG, click Convert, and download the SVG ready for any of the embedding methods above.