External SVG Sprite Files

External SVG Sprite Files

An external SVG sprite is a standalone .svg file that contains all your <symbol> definitions. Instead of embedding the sprite in every page, you reference it from an external URL:

<svg width="24" height="24">
  <use href="/assets/sprite.svg#icon-home"/>
</svg>

File Structure

The external sprite file looks identical to an inline sprite:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
    <path d="m21 21-4.3-4.3"/>
  </symbol>
</svg>

Note: No style="display:none" is needed since the file is not embedded in the page.

Browser Caching

The main advantage of external sprites is caching. The browser downloads sprite.svg once, caches it, and reuses it across all pages. For multi-page sites with large icon sets, this can save significant bandwidth compared to inline sprites.

Set appropriate cache headers:

Cache-Control: public, max-age=31536000, immutable

Use content hashing in the filename (e.g., sprite.abc123.svg) for cache busting when icons change.

Cross-Origin Restrictions

External <use> references must comply with same-origin policy. The sprite file must be served from the same domain as the page, or the server must include CORS headers:

Access-Control-Allow-Origin: *

CDN-hosted sprites need CORS configured. Without it, the icons will not render.

Browser Support

External SVG sprite references work in all modern browsers. IE 11 and older do not support external <use> references. If you need IE support, use the svgxuse polyfill or the svg4everybody library:

<script src="svg4everybody.min.js"></script>
<script>svg4everybody();</script>

Fragment Identifiers

The #icon-home part of the URL is a fragment identifier. It tells the browser which <symbol> to render from the file. The browser fetches the entire sprite file but only renders the referenced symbol.

Preloading

For performance-critical applications, preload the sprite file:

<link rel="preload" href="/assets/sprite.svg" as="image" type="image/svg+xml">

This tells the browser to start downloading the sprite file early, before any <use> references are encountered in the HTML.