SVG — Production & Sprites

Shipping SVG well: strip the bloat with SVGO, reuse with <symbol> + <use>, theme with currentColor, and make it accessible.

1 · optimization (SVGO) — before / after

Design tools export verbose SVG: editor metadata, comments, redundant attributes, excessive decimals. SVGO strips it losslessly — often cutting 40–70% of bytes.

exported by a design tool

size: bytes

after SVGO

size: bytes — saved

Never optimize blindly: keep viewBox, keep ids you reference, and keep title/desc for accessibility. SVGO is configurable per-plugin.

2 · sprite: <symbol> + <use> + currentColor

Define each icon once as a <symbol>, then stamp it anywhere with <use href="#id">. Paint with fill="currentColor" so icons inherit text color — one click re-themes them all.

define once, use many, theme with CSS

<svg style="display:none">
  <symbol id="i-star" viewBox="0 0 24 24">
    <path fill="currentColor" d="…"/>
  </symbol>
</svg>

<svg class="icon"><use href="#i-star"/></svg>
.icon { color: #c8ff00; }   /* currentColor follows this */

✓Decorative icon? Add aria-hidden="true" and skip the label — don't make screen readers announce noise.
✓Meaningful icon/graphic? Add role="img" + a <title> (and <desc> for detail), referenced via aria-labelledby.
✓Interactive? Use a real <button> wrapper, give it an accessible name, and ensure focus styles.
✓Inline data viz? Provide a text alternative (table/summary) — SVG charts aren't readable by AT on their own.
✓Contrast & motion. Meet color contrast, and respect prefers-reduced-motion for animated SVG.

an accessible standalone graphic

<svg role="img" aria-labelledby="t d" viewBox="0 0 24 24">
  <title id="t">Favorite</title>
  <desc id="d">A filled star indicating this item is saved</desc>
  <path d="…"/>
</svg>

SVG — Production & Sprites

1 · optimization (SVGO) — before / after

2 · sprite: <symbol> + <use> + currentColor

3 · accessibility checklist