SVG Not Showing — Troubleshooting Guide
SVG blank, broken, or invisible? Step-by-step fixes for the most common SVG display problems.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Check 1: Missing viewBox or Zero Dimensions
If an SVG has width='0' height='0' or no viewBox, it renders as invisible. Open the SVG in a text editor and check the root <svg> element.
- Must have: viewBox='0 0 [width] [height]'
- Ensure width and height are greater than 0
- If missing viewBox, add one matching the content dimensions
- In CSS: svg { display: block; width: 100%; height: auto; }
Check 2: MIME Type Error (Server Configuration)
SVGs served with the wrong MIME type may be blocked by browsers. The correct MIME type is image/svg+xml.
- Apache: add 'AddType image/svg+xml .svg .svgz'
- Nginx: add 'application/x-font-svg svg svgz;'
- Check DevTools Network tab: look for the Content-Type response header
- If hosting on S3/CDN, set the Content-Type metadata on the file
Check 3: CORS Errors for External SVG
SVGs loaded from a different domain via <img> may be blocked if the server doesn't send CORS headers. Check the browser console for CORS errors.
- Add 'Access-Control-Allow-Origin: *' to the server serving the SVG
- Or host the SVG on the same domain as the page
- Inline SVG in HTML avoids CORS entirely
Check 4: Content Security Policy Blocking SVG
Strict CSP headers may block SVG data URIs or inline SVG. Check the browser console for CSP violations.
- For inline SVG: ensure 'script-src' or 'img-src' doesn't block 'self'
- For data URI SVGs: add 'img-src data:' to the CSP header
- Check the console — CSP violations are logged as errors
Check 5: Malformed SVG XML
SVG is XML — a single unclosed tag or invalid attribute causes the entire file to fail. Validate your SVG using the W3C validator.
- Paste SVG code at validator.w3.org/nu
- Look for 'Stray end tag' or 'attribute value not allowed' errors
- Common issues: unclosed <path> elements, invalid characters in text content, wrong namespace
Frequently Asked Questions
My SVG displays in Chrome but not in Firefox — why?
Firefox has stricter SVG rendering. Common differences: Firefox requires explicit width/height or a viewBox; Firefox handles some CSS properties differently on SVG elements. Test with W3C validator.
SVG shows in browser but not in an <img> tag — why?
SVG loaded via <img> is sandboxed — external resources, CSS, and scripts inside the SVG are blocked. Ensure the SVG is self-contained with no external font or image references.
My SVG is blank in Internet Explorer — how do I fix it?
IE11 has limited SVG support. Ensure there are no CSS properties IE doesn't understand. Use inline SVG or provide a PNG fallback using <picture> with <source type='image/svg+xml'>.
SVG works on desktop but not on mobile — why?
Check for JS errors on mobile that prevent SVG injection. Also verify the server sends the correct SVG MIME type. Some mobile browsers have stricter MIME type enforcement.
How do I provide a PNG fallback for SVG?
Use: <picture><source type='image/svg+xml' srcset='logo.svg'><img src='logo.png' alt='Logo'></picture>. Browsers that support SVG use the source; others fall back to PNG.
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