Fix SVGs Not Displaying in Browsers
A blank space where your SVG should be comes down to a short list of causes — check them in this order.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
File-Level Causes
First: the xmlns attribute. An SVG without xmlns='http://www.w3.org/2000/svg' renders in some contexts but blanks when loaded via <img> or as a background. Second: server MIME type — SVGs served as text/plain won't render; servers must send image/svg+xml. Third: a missing viewBox with zero or missing width/height collapses the SVG to nothing.
- xmlns attribute is mandatory for <img> and CSS background use
- Server must send Content-Type: image/svg+xml
- No viewBox + no dimensions = zero-size render
Page-Level Causes
If the file is fine, the page is hiding it: CSS setting svg { width: 0 }, a parent with display:none or zero height, currentColor fills inheriting white-on-white, or a Content Security Policy blocking external SVGs. DevTools' element inspector shows computed size and fill instantly — check there before editing the file.
- Inspect computed width/height — collapsed parents are common
- White fill on white background looks identical to 'not displaying'
- CSP rules can silently block externally-loaded SVGs
Frequently Asked Questions
The SVG opens fine directly but not in my page — why?
Direct viewing is lenient; embedded contexts are strict. Usually it's the missing xmlns attribute (breaks <img> usage) or CSS collapsing the element's size. DevTools inspection settles it in seconds.
Why does my SVG render locally but not on the live server?
MIME type. Your local setup serves image/svg+xml; the production server is sending something else. Add the SVG MIME mapping to the server config.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG