Browser Caching Strategies for SVG Sprites

Browser Caching for SVG Sprites

Proper caching configuration can make SVG sprites virtually free after the first page load. Here is how to set up effective caching for sprite files.

Cache-Control Headers

For external SVG sprite files, set aggressive caching with content-based filenames:

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

• public — Allows CDN and proxy caching
• max-age=31536000 — Cache for 1 year (365 days)
• immutable — Tells the browser not to revalidate even on page reload

This works because you change the filename when the sprite content changes (content hashing).

Content Hashing

Include a hash of the file content in the filename:

sprite.a1b2c3d4.svg

Build tools like Webpack, Vite, and Next.js can generate these hashes automatically. When you add or modify an icon, the hash changes, creating a new URL that bypasses the cache.

Server Configuration

Nginx:

location ~* \.svg$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    gzip on;
    gzip_types image/svg+xml;
}

Apache (.htaccess):

<FilesMatch "\.svg$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
AddOutputFilterByType DEFLATE image/svg+xml

Vercel (vercel.json):

{
  "headers": [
    {
      "source": "/assets/(.*).svg",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

CDN Caching

When using a CDN (CloudFront, Cloudflare, Fastly), ensure:

1. The CDN respects your Cache-Control headers
2. SVG content type (image/svg+xml) is configured for compression
3. CORS headers are present if the sprite is on a different subdomain

Preloading

Combine caching with preloading for the best first-visit experience:

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

Service Worker Caching

For progressive web apps, cache the sprite in a service worker:

const CACHE_NAME = "icons-v1";
const SPRITE_URL = "/assets/sprite.svg";

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.add(SPRITE_URL))
  );
});

This ensures icons are available even offline.

Inline vs External Caching

Inline sprites cannot be cached separately — they are part of the HTML document. This is the key tradeoff: inline sprites have zero-latency on every page load but no cross-page caching. External sprites have a one-time download cost but are then cached for subsequent pages.