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