5 Ways to Use SVG in Web Pages

The same SVG can behave very differently depending on how it is embedded. An icon loaded with <img> is easy to cache and isolate. An inline SVG can inherit CSS and respond to JavaScript. A sprite can reduce repeated markup but needs an accessible label and a predictable build step.

1. Inline SVG for editable interface graphics

Inline SVG places the markup in the document:

<button class="nav-button" type="button">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M3 10.5 12 3l9 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5z" />
  </svg>
  <span>Home</span>
</button>

.nav-button { color: #334155; }
.icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.nav-button:hover, .nav-button:focus-visible { color: #2563eb; }

This is a good option when the page needs to recolor, animate, or inspect individual elements. It also makes the markup part of the document's accessibility tree, so add a title for meaningful standalone graphics and hide decorative icons.

2. `<img>` for a self-contained asset

Use <img src="/icons/search.svg" alt="Search"> when the SVG is a standalone image that does not need page CSS to reach its internal paths. The browser can cache the file independently of the page, and the asset is isolated from the document's DOM and CSS. Provide useful alternative text, or use an empty alt for a purely decorative image.

Do not put important text only inside the SVG while also giving the image a generic alt value. The alternative text should communicate the same purpose as the visual asset.

3. CSS backgrounds for decoration

background-image: url('/shape.svg') works well for non-semantic decoration such as a pattern or a small visual accent. It is not a substitute for an informative image because assistive technology does not receive an accessible name from a background. Keep the semantic label in HTML and use the background only for presentation.

4. Data URIs for small, stable assets

A short SVG can be embedded in CSS or HTML as a data URI. This can avoid a request for a tiny decoration, but it makes caching and debugging less convenient and can make the CSS bundle larger. Encode the value carefully, keep it free of untrusted input, and use an external file when the asset is shared by many pages.

5. SVG sprites for repeated icons

A sprite stores several symbols in one file and references them with <use>:

<svg class="icon" aria-hidden="true">
  <use href="/icons/sprite.svg#search"></use>
</svg>

Give an icon button an accessible name in the button or link. If the symbol itself conveys essential information, add a <title> and test it with the screen readers and browsers your project supports. Make sure the sprite's IDs are stable and that a content security policy does not block the reference.

Security and maintenance

Treat SVG as executable-capable markup, not just as a harmless image. Remove scripts, event-handler attributes, unsafe external references, and unexpected namespaces from files that come from users or remote URLs. Sanitize before inserting an SVG into the DOM, and do not bypass the sanitizer just to preserve an unfamiliar element.

Keep viewBox values stable, use meaningful groups, and avoid converting simple shapes to unnecessarily long paths. Review the generated file in source control so accidental changes to an icon are easy to identify. If the artwork includes fonts or raster images, document the dependencies and their licenses.

Choosing the method

Use inline SVG when the page needs control over the artwork, <img> for a reusable self-contained image, a CSS background for decoration, a data URI only for small stable values, and a sprite when many icons share a common delivery path. Test keyboard focus, screen-reader output, high-density displays, and dark mode before shipping.

SVGDO can be used as a small review step: paste or open the source, inspect the DOM and attributes, make a controlled change, and export the file only after the preview and accessibility labels look correct.