Inline SVG vs External SVG File
Inline SVG and external SVG files serve different purposes — here's how to choose the right approach for icons, logos, and illustrations on the web.
Comparison
Each SVG embedding method has distinct trade-offs.
| Factor | Inline SVG | <img src='*.svg'> | <object>/<embed> |
|---|---|---|---|
| CSS styling | ✅ Full access | ❌ Shadow DOM only | ❌ Shadow DOM only |
| Caching | ❌ Not cached | ✅ Browser cache | ✅ Browser cache |
| JavaScript access | ✅ Full DOM access | ❌ No | Limited |
| Load impact | Increases HTML size | Separate HTTP request | Separate HTTP request |
| Accessibility | ✅ Best control | ✅ Good (alt attr) | ⚠️ Limited |
When to Use Each Method
Match the method to the use case for optimal results.
- Inline SVG: icons, logos that need CSS theming (currentColor), SVG animations, interactive SVG maps
- img src SVG: decorative illustrations, SVGs that don't need JS/CSS interaction, images that should be cached
- CSS background-image SVG: repeating patterns, decorative backgrounds
- SVG sprite (<use>): icon systems with many repeated icons — one file, many uses
Frequently Asked Questions
Why doesn't CSS work on my <img src='icon.svg'>?
External SVG loaded via <img> is isolated in its own context — your page CSS can't reach inside. For CSS control (color changes, hover effects), embed the SVG inline in your HTML instead.
Does inline SVG hurt page performance?
For small icons: negligible. For large/complex SVGs: increases HTML transfer size and parsing time. Gzip compression reduces SVG by 60–80%. For large SVGs: prefer <img> with cache headers.
What's the best method for a site-wide icon system in 2026?
SVG sprite: one sprite.svg file containing all icons as <symbol> elements, referenced with <use href='sprite.svg#icon-name'>. The sprite is cached by the browser after first load, and each icon usage adds only a <use> element.
Can I use currentColor in an external SVG?
Only in limited cases — <img> SVGs are isolated. However, you can force color on an <img> SVG with CSS filter: brightness(0) and then colorize with saturate/hue-rotate. For currentColor to work naturally: inline the SVG.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free