Inline Hidden Sprite vs External Content-Hashed Sprite
| Trait | Inline <svg style="display:none"> | External /sprites/core.a91f.svg#id |
|---|---|---|
| Extra HTTP request | Zero (streams inside HTML) | 1 request on first page, then 0 (immutable cache) |
| Cross-page caching | Re-sent on every full HTML navigation | Cached once across thousands of pageviews |
| Cross-origin CDN support | Works regardless of CDN domain | Requires same-origin! Browsers block cross-origin <use href> |
| Gradient / filter <defs> | Works reliably in same document | External url(#grad) inside <use> has historic browser quirks |
Partitioning Sprites by Domain (The 20–40 Icon Sweet Spot)
Notice that the SVG Nexus Sprite Sheet Generator caps each generated sprite at 40 files—which actually aligns well with production partitioning! Group your site's global chrome (search, menu, close, chevron, theme toggle, social footer—typically 15–25 icons) into core-shell.svg, and compile feature-heavy subsets (such as billing-icons.svg or editor-toolbar.svg) separately so public marketing pages never pay for dashboard-only symbols.
Understanding the <use> Shadow DOM Boundary
When the browser instantiates <use href="#icon-bell">, it clones the <symbol> contents into a closed Shadow root. Descendant selectors like svg:hover path { stroke: red } cannot cross that boundary! Instead, rely on inherited properties—color (via currentColor) and CSS custom properties (--icon-accent)—which pierce the <use> shadow boundary cleanly in all modern browsers.