SVG TROUBLESHOOTING – HUB
SVG not showing? Start here.
An invisible SVG has a short list of causes – and each one has a fast test. Work through this checklist top to bottom and you’ll find yours; the related pages go deep on the trickiest cases.
The 10-second diagnosis
Paste your SVG’s code into the Studio. Renders fine here → your file is good and the problem is how it’s embedded. Renders blank here too → the file itself is broken, and the live editor shows you where.
100% FREE · RUNS IN YOUR BROWSER · NO SIGNUP
File or embedding?
The single most useful split. A standalone render test (above) instantly tells you which half of the checklist applies.
Copy-paste fixes
Each cause below comes with the exact attribute, header, or CSS to change – no “try clearing your cache” filler.
Covers every context
Browser, HTML embed, CSS background, WordPress, email, and app uploads each fail differently – all mapped.
STEP BY STEP
The invisible-SVG checklist
- Test the file standalone Open the .svg directly in a browser tab (drag it in). Renders? File is fine – skip to step 3. Blank? Continue to step 2.
- Fix the file Common file-level causes: missing
xmlns="http://www.w3.org/2000/svg"(required when opened as a file), zero-size or missing viewBox, fills set to white orcurrentColorwith no color context, or malformed XML. Paste into our editor to fix live. - Fix the embedding Via
<img>: check the path (case-sensitive on servers!) and that the server sendsContent-Type: image/svg+xml. Inline: check CSS isn’t setting width/height to 0 ordisplay:none. CSS background: URL-encode the markup. - Fix the platform WordPress, email clients, and many apps block SVG uploads by design (security). Convert to PNG or WebP for those targets.
The causes, ranked by how often they’re the answer
- Wrong MIME type – server sends
text/plain; browsers refuse to render. Fix server config or host the file somewhere sane. - Missing xmlns – fine when inlined in HTML, blank when loaded as a file or in
<img>. - Sizing collapse – no width/height and no viewBox = 0×0 render in some contexts. See the resizer guide.
- Invisible styling – white fills on white pages, or
currentColorresolving to the background color. Related: SVG appears black. - Platform blocks SVG – WordPress/email/apps reject the format silently. Not a bug; convert for those targets.
- Broken markup – truncated download or encoding damage. See fixing broken SVGs.
SVG TROUBLESHOOTING
Every svg troubleshooting tool, in one place.
FAQ
Frequently asked questions
Why is my SVG not showing in the browser?
Run the standalone test: open the file directly in a tab. Blank → fix the file (xmlns, viewBox, fills). Fine → fix the embedding (path, MIME type, CSS). The checklist above walks each branch.
Why does my SVG show in HTML but not as an img src?
Two classic causes: the file lacks xmlns (required outside inline HTML), or the server serves it with a wrong MIME type. Both are five-minute fixes.
Why won’t WordPress show my SVG?
WordPress blocks SVG uploads by default for security. Use a sanitizing plugin (e.g. Safe SVG) or upload a PNG version instead.
My SVG shows on desktop but not mobile?
Usually a sizing issue – the SVG lacks a viewBox so it can’t scale responsively, or a hover-only style hides it on touch. Add a proper viewBox first.
Why is my SVG not showing in email?
Most email clients (Gmail, Outlook) strip SVG entirely. Email is a raster world – send PNG at 2× resolution.
KEEP EXPLORING
Related tools & guides
SVG Black Color Fix
Four causes of black-rendering SVGs, four quick fixes.
SVG Broken Fix
Diagnose and repair corrupted SVG files in a live editor.
SVG Upload Error
Platform-by-platform upload rejections, solved.
SVG Rendering Issues
Fix blurry, clipped, and inconsistent SVG rendering.
SVG to PNG
Export SVGs as high-resolution PNGs with transparency.
Design, convert, and ship SVGs in one place.
The full Free SVG Online studio – catalog, visual editor, and code inspector. No account, no limits, free forever.