Should I use inline SVG or an img tag?

Use an img tag for a reusable image file with normal alt text. Use inline SVG when CSS, JavaScript, component state, or accessibility markup must control elements inside the graphic.

Can CSS style an SVG inside an img tag?

CSS can style the img element's size and layout, but page CSS cannot select paths inside the referenced SVG file. Use inline SVG when internal fills, strokes, or states need page-level styling.

Is inline SVG better for performance?

Not in every case. Inline SVG avoids a separate request but adds markup to the HTML. A separate SVG file can be cached and reused. Measure the real page when performance matters.

How do I make inline SVG accessible?

For a meaningful graphic, give the inline SVG an image role and an accessible name, such as a title connected with aria-labelledby. Hide decorative SVG from assistive technology.

Should I use an SVG as a CSS background?

Use a CSS background for decoration that does not need alternative text. If the SVG communicates information or performs a control function, put it in the HTML instead.

Inline SVG vs img: How to Embed SVG in HTML

For most logos, illustrations, and content images, start with <img src="image.svg">. It keeps the SVG in a separate, cacheable file and uses familiar alt text. Choose inline SVG when CSS or JavaScript must reach individual paths, or when the graphic needs markup-level accessibility control.

Inline SVG vs img at a glance

Need	HTML img tag	Inline SVG	CSS background
Reuse and browser caching	Good fit.	Markup repeats unless a template or component handles it.	Good for a reused decorative asset.
Style internal paths with page CSS	No.	Yes.	No.
Meaningful image	Use concise `alt` text.	Use an accessible name and image role.	Do not rely on it to carry meaning.
Interactive icon or diagram	Limited to the image element.	Best control over SVG elements.	Poor fit.
Typical use	Logo, illustration, content image.	UI icon, chart, animated or themed graphic.	Decoration that does not need alt text.

Use an img tag for a normal image asset

The SVG stays in its own file, so several pages can reference the same URL. Add width and height to reserve space, and write alt text that replaces the image's meaning. Use an empty alt="" when the image is decorative.

<img src="/icons/search.svg" alt="Search" width="24" height="24" role="img">

Page CSS can size or position the img element, but it cannot select a path inside the referenced SVG. SVG loaded in an image context also has restrictions on scripts and external resources.

Use inline SVG when the markup needs control

Inline SVG becomes part of the page DOM. That lets a stylesheet target paths, use currentColor, respond to component state, and attach an accessible name to the graphic. This control costs HTML weight, especially when the same detailed SVG is repeated many times.

<svg viewBox="0 0 24 24" role="img" aria-labelledby="search-title">
  <title id="search-title">Search</title>
  <path d="..." fill="currentColor" />
</svg>

For React projects, use the SVG to React converter when inline markup should become a reusable component. For a fixed icon library, compare SVG sprites and React icons.

What about object tags?

An object embeds the SVG as a separate document and can contain fallback content. It may suit an interactive diagram that needs document behavior, but it is more involved than an img for ordinary images and less direct than inline SVG for interface icons.

<object data="/graphics/chart.svg" type="image/svg+xml">
  <img src="/graphics/chart.png" alt="Quarterly sales chart">
</object>

Use CSS backgrounds only for decoration

A CSS background does not provide image alt text. Use it for a flourish, texture, or icon that repeats information already written nearby. If the graphic carries meaning, place it in HTML with an img or accessible inline SVG instead.

.download-link::before {
  background-image: url("/icons/download.svg");
  content: "";
}

A tiny, one-off background can also use an encoded value. Read SVG data URI vs SVG file before turning a shared image into a long CSS string.

Accessibility checklist

Give a meaningful img concise alt text. Use empty alt text for decoration.
For meaningful inline SVG, use role="img" and connect a unique title with aria-labelledby.
Hide decorative inline SVG from assistive technology with aria-hidden="true".
Put the accessible name on the button or link when the SVG is only its icon.
Run the result through the SVG accessibility checker, then test it in the page where it will be used.

Performance is a page-level decision

Inline SVG can avoid a separate request, but it also adds markup to the HTML and cannot be cached as a standalone asset. A separate SVG file can be reused across pages. Do not choose from request count alone: test the actual page, including repeated icons, cache behavior, and the size of the SVG markup.

Clean SVG before embedding it

Inline SVG is active page markup, so do not paste unknown code into a site without reviewing it. Start with the SVG cleaner, inspect the result in the SVG viewer, and check that gradients, masks, links, and IDs still work.

A practical decision rule

Choose img when the SVG behaves like a normal reusable image.
Choose inline SVG when the page must style or control elements inside it.
Choose a CSS background only when the graphic is decorative.
Reserve object for cases that need a separately embedded SVG document.

Preview SVG Clean SVG Create a data URI

Inline SVG vs img: which should you use?