How to svg as css data uri vs. external file: when each wins
- Step 1Measure HTTP request overhead — Use Chrome DevTools Network tab to count your SVG-as-image requests. Each request costs 20–50ms on a fast connection, more on mobile.
- Step 2Compare stylesheet size impact — A 2 KB SVG encoded as a data URI adds ~2.5 KB to your CSS file. 50 icons in CSS = 125 KB of CSS — likely worse than 50 separate cached HTTP/2 requests.
- Step 3Apply the right rule for each use case — Use data URIs for above-the-fold background decorations on every page. Use external files for icon sets used on most pages (cached). Use inline SVG for icons needing CSS theming.
Frequently asked questions
Does a data URI SVG get cached by the browser?+
Data URI SVGs are cached as part of the CSS file — not independently. Changing any icon invalidates the entire CSS cache.
Is an SVG data URI faster than an external .svg file?+
For a single uncached load, yes — one HTTP request instead of two. But for repeat visits, external SVG files are served from cache independently, which is usually faster for large icon sets.
How does HTTP/2 affect this decision?+
HTTP/2 multiplexes requests, making separate small files more competitive. The caching advantage of external files still applies regardless of HTTP version.
Can data URI SVGs be used in img src?+
Yes. img src with a data URI SVG works in all modern browsers. The SVG cannot be styled with external CSS, but renders identically to an externally-referenced SVG.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.