Everything web developers need to know about SVG — three embedding methods, CSS styling, sprite sheets, accessibility, and optimization.

SVG is one of the most useful tools in a web developer's toolkit, yet many developers only use it in its simplest form — as an <img> tag replacement for icons. In reality, SVG can be styled with CSS, animated with JavaScript, generated dynamically, and made fully accessible. This guide covers everything you need to know to use SVG effectively in web projects.

Three Ways to Embed SVG in HTML

Each embedding method has different capabilities:

1. The <img> Tag

<img src="/icons/logo.svg" alt="Company Logo" width="200">

Pros: Simplest method, browser caches the file, good for static images.

Cons: Cannot style internal SVG elements with CSS, cannot animate individual paths, cannot use JavaScript to interact with SVG internals.

2. Inline SVG

<svg viewBox="0 0 24 24" class="icon">
  <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
</svg>

Pros: Full CSS styling control (change colors, add hover effects), JavaScript can modify any element, animations work on individual paths, currentColor inherits text color from parent.

Cons: Not cached separately (lives in the HTML), adds to HTML document size.

3. CSS Background Image

.icon { background-image: url('/icons/arrow.svg'); }

Pros: Easy to use for decorative elements, cached by the browser.

Cons: Cannot be styled or animated, not accessible (no alt text).

Styling SVG with CSS

When SVG is inlined in HTML, every element inside it can be targeted with CSS. The most commonly used SVG-specific CSS properties are:

  • fill — sets the interior color of a shape (equivalent to background-color for HTML elements)
  • stroke — sets the outline color
  • stroke-width — sets the outline thickness
  • opacity — sets element transparency
.icon path {
  fill: #1A56DB;
  transition: fill 0.2s ease;
}
.icon:hover path {
  fill: #F59E0B;
}

The currentColor keyword is especially powerful: set fill="currentColor" in the SVG, and the icon will automatically inherit whatever text color is set on its parent container. This means a single SVG icon works in any color context without modification.

SVG Icons: Build a Sprite Sheet

For sites with many icons, loading each as a separate file creates extra HTTP requests. A common solution is an SVG sprite sheet — a single SVG file containing all icons, referenced individually by ID:

<!-- Hidden sprite sheet (placed once in the HTML) -->
<svg style="display:none">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="M4 6h16M4 12h16M4 18h16"/>
  </symbol>
</svg>

<!-- Use an icon anywhere on the page -->
<svg class="icon"><use href="#icon-search"/></svg>

Making SVG Accessible

SVG images are not automatically accessible to screen readers. To make them accessible:

  • Add role="img" to the <svg> element
  • Add a <title> element inside the SVG with a short description
  • Reference the title with aria-labelledby
  • For decorative SVGs that should be ignored by screen readers, use aria-hidden="true"
<svg role="img" aria-labelledby="logo-title">
  <title id="logo-title">Shape to Vector logo</title>
  <path d="..."/>
</svg>

Optimizing SVG for Production

SVG files exported from design tools often contain unnecessary data — editor metadata, comments, hidden layers, and over-precise coordinates. Before deploying to production, optimize with SVGOMG or the command-line tool svgo. These tools typically reduce SVG file size by 30-70% without any visual change.

Converting PNG Assets to SVG

If you are working with a project that has PNG icons or logos, converting them to SVG improves both performance (smaller files, no need for 2× Retina variants) and flexibility (CSS styling, animation). Use Shape to Vector for quick batch conversion of flat-color PNGs, or Inkscape's Trace Bitmap for more complex images.