Comparing the Five Browser SVG Delivery Methods
| Delivery Method | HTTP Cacheable Separately? | CSS Hover Color? | DOM Node Cost | Best Use Case |
|---|---|---|---|---|
| Inline <svg> | No (ships inside HTML/JS) | Full path-level CSS | Medium–High if repeated | 1–15 unique interactive icons above the fold |
| <img src="file.svg"> | Yes (long-lived CDN cache) | No | 1 node (<img>) | Illustrations, brand logos, flags, 3D icons, image SEO |
| <svg><use href="#id"> | Yes (external) / Per-page (inline) | currentColor + CSS vars | 2 nodes per instance | Icons repeated 10–100× across lists, tables & navs |
| CSS mask-image | Yes (cached inside .css) | Single-color currentColor | 0 extra HTML nodes | External-link arrows, Markdown callouts, form inputs |
| CSS background-image | Yes (cached inside .css) | No (static colors) | 0 extra HTML nodes | Decorative multi-color patterns & dividers |
Three Practical Rules to Keep DOM Nodes Under Control
- Never inline multi-kilobyte illustrations: A 25 KB empty-state scene from SVG Nexus Illustration Studio can contain 400+ path elements. Serve it via
<img src="/art/empty.svg" width="320" height="240" loading="lazy" alt="" />so it caches across routes and stays off the main DOM tree. - Switch repeated table/card icons to sprites or CSS masks: When 50 rows each render a 6-node star icon, 300 DOM nodes vanish by switching to an SVG <symbol> sprite.
- Minify before embedding: Run every custom asset through the browser SVG Optimizer so inline icons stay under ~500–800 bytes.