SVG Not Showing in Browser? 12 Fixes That Actually Work

You've added an SVG to your page, but it's not showing up. Just a blank space where your beautiful vector graphic should be.

This is one of the most frustrating web development issues—SVGs that work perfectly in some contexts but refuse to render in others. Let's fix it.

Quick Diagnosis

Before diving into solutions, identify your situation:

Is the SVG showing as:

Completely blank/invisible?
A broken image icon?
Wrong size (too small/large)?
Missing parts (partial render)?
Correct in one browser, broken in another?

Each symptom points to different causes. Let's tackle them all.

Fix 1: Add the xmlns Attribute

The most common cause of SVG not rendering.

Your SVG needs the XML namespace declaration:

<!-- Won't work reliably -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

<!-- Will work -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

Why this matters:

When SVG is inline in HTML5, browsers usually forgive the missing xmlns
When loaded as an external file (<img src="file.svg">), xmlns is required
Some browsers are stricter than others

Fix: Add xmlns="http://www.w3.org/2000/svg" to your opening <svg> tag.

Fix 2: Check the File Path

A classic mistake—the SVG file isn't where you think it is.

<!-- Common path mistakes -->
<img src="logo.svg">           <!-- Relative to current page -->
<img src="/logo.svg">          <!-- Relative to root -->
<img src="./images/logo.svg">  <!-- Relative to current directory -->
<img src="../images/logo.svg"> <!-- Up one level, then into images -->

Debugging steps:

Open browser DevTools (F12)
Go to Network tab
Reload the page
Look for your SVG file—is it showing 404?
Click the failed request to see the attempted URL

Fix: Correct the path. Use absolute paths when unsure:

<img src="/assets/images/logo.svg">

Fix 3: Set Width and Height

SVGs without dimensions may render at 0x0 pixels.

<!-- Might render as invisible -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

<!-- Explicitly sized -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

When using <img>:

<img src="icon.svg" width="50" height="50" alt="Icon">

With CSS:

.svg-icon {
  width: 50px;
  height: 50px;
}

Why this happens:

SVGs are scalable—they need to know how big to scale
Without width/height, browsers may default to 0 or unexpected sizes
viewBox alone isn't always enough

Fix 4: Add a viewBox

The viewBox defines the SVG's internal coordinate system.

<!-- Without viewBox - may not scale correctly -->
<svg width="100" height="100">
  <circle cx="500" cy="500" r="400"/>  <!-- Way outside visible area! -->
</svg>

<!-- With viewBox - content is visible -->
<svg width="100" height="100" viewBox="0 0 1000 1000">
  <circle cx="500" cy="500" r="400"/>
</svg>

How viewBox works:

viewBox="minX minY width height"
Defines what portion of the SVG canvas to show
Content scales to fit the SVG's actual dimensions

Common issue: viewBox is set, but coordinates don't match content:

<!-- Content is at coordinates outside viewBox -->
<svg viewBox="0 0 100 100">
  <circle cx="200" cy="200" r="50"/>  <!-- Not visible! -->
</svg>

Fix: Ensure viewBox encompasses all your SVG content. Use SVG Editor to visualize and adjust.

Fix 5: Check Fill and Stroke Colors

Your SVG might be rendering—but in the same color as the background.

<!-- Invisible on white background -->
<svg viewBox="0 0 100 100">
  <rect width="100" height="100" fill="white"/>
</svg>

<!-- Invisible because no fill -->
<svg viewBox="0 0 100 100">
  <rect width="100" height="100"/>  <!-- Default fill is black, but... -->
</svg>

<!-- Visible -->
<svg viewBox="0 0 100 100">
  <rect width="100" height="100" fill="#6366f1"/>
</svg>

Check for:

fill="none" on shapes you expect to see
fill="white" on white backgrounds
fill="transparent" or fill="rgba(0,0,0,0)"
Missing fill attribute (relies on CSS that might not load)

Fix: Explicitly set fill colors on all visible shapes.

Fix 6: Verify CSS Isn't Hiding It

CSS rules might be making your SVG invisible.

Common culprits:

/* Display none */
svg { display: none; }

/* Zero dimensions */
svg { width: 0; height: 0; }

/* Invisible */
svg { opacity: 0; }
svg { visibility: hidden; }

/* Off-screen */
svg { position: absolute; left: -9999px; }

/* Overflow hidden on parent */
.container { overflow: hidden; }

Debugging:

Open DevTools
Select the SVG element
Check Computed styles
Look for display, visibility, opacity, dimensions

Fix: Override problematic CSS or remove conflicting rules.

Fix 7: Fix Content Security Policy Issues

If SVGs load locally but not in production, CSP might be blocking them.

Check browser console for:

Refused to load the image 'https://...' because it violates the following
Content Security Policy directive: "img-src 'self'"

Solutions:

For external SVG files:

Content-Security-Policy: img-src 'self' https://trusted-cdn.com;

For inline SVG with scripts:

Content-Security-Policy: script-src 'self' 'unsafe-inline';

For data URI SVGs:

Content-Security-Policy: img-src 'self' data:;

Fix: Update your CSP headers to allow SVG sources.

Fix 8: Check MIME Type (Server Configuration)

SVG files need the correct MIME type to render as images.

Required MIME type: image/svg+xml

Symptoms of wrong MIME type:

SVG downloads instead of displaying
Shows as text/code
Security errors in console

Apache (.htaccess):

AddType image/svg+xml svg svgz

Nginx:

types {
    image/svg+xml svg svgz;
}

Node.js/Express:

express.static('public', {
  setHeaders: (res, path) => {
    if (path.endsWith('.svg')) {
      res.setHeader('Content-Type', 'image/svg+xml');
    }
  }
});

Fix 9: Handle CORS for External SVGs

Loading SVGs from different domains triggers CORS restrictions.

Error message:

Access to image at 'https://other-domain.com/logo.svg' from origin
'https://your-site.com' has been blocked by CORS policy

Solutions:

Option 1: Host the SVG on your own domain

Option 2: Configure CORS on the server hosting the SVG:

Access-Control-Allow-Origin: *

Option 3: Use a proxy to fetch the SVG server-side

Option 4: Embed the SVG inline instead of referencing externally

Fix 10: Fix SVG Inside `<img>` Tag Limitations

When using <img src="file.svg">, certain SVG features don't work:

What doesn't work in <img> tags:

External CSS stylesheets referenced in SVG
JavaScript inside the SVG
External resources (images, fonts)
CSS animations (in some browsers)

<!-- This SVG won't work properly via <img> -->
<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url('external-styles.css');  <!-- Won't load -->
  </style>
  <script>console.log('test')</script>   <!-- Won't run -->
  <image href="photo.jpg"/>              <!-- Won't load -->
</svg>

Fix: Use inline SVG or convert to self-contained SVG:

Embed CSS directly in <style> tags
Remove JavaScript
Embed external images as data URIs
Use SVG Editor to make SVGs self-contained

Fix 11: Debug Invalid SVG Syntax

Malformed SVG code causes rendering failures.

Common syntax errors:

Unclosed tags:

<!-- Broken -->
<svg>
  <rect width="100" height="100"
</svg>

<!-- Fixed -->
<svg>
  <rect width="100" height="100"/>
</svg>

Invalid attributes:

<!-- Broken - HTML attributes in SVG -->
<svg>
  <rect class="box" style="color: red;">  <!-- 'color' doesn't work -->
</svg>

<!-- Fixed - SVG attributes -->
<svg>
  <rect class="box" fill="red"/>
</svg>

Wrong nesting:

<!-- Broken -->
<svg>
  <rect><circle/></rect>  <!-- Can't nest shapes -->
</svg>

<!-- Fixed -->
<svg>
  <rect/>
  <circle/>
</svg>

Debugging:

Paste your SVG into SVG Playground
Use an XML validator
Check browser console for parsing errors

Fix 12: Browser-Specific Issues

Some SVG features have inconsistent browser support.

Safari Issues

Problem: CSS transforms on SVG elements behave differently. Fix: Use transform attribute instead of CSS transform:

<!-- More compatible -->
<rect transform="rotate(45 50 50)"/>

Problem: href vs xlink:href Fix: Include both for maximum compatibility:

<use href="#icon" xlink:href="#icon"/>

Firefox Issues

Problem: SVG fonts don't render. Fix: Use web fonts or outline text.

Internet Explorer/Old Edge

Problem: Many SVG features unsupported. Fix: Use PNG fallbacks or feature detection:

<picture>
  <source srcset="image.svg" type="image/svg+xml">
  <img src="image.png" alt="Fallback">
</picture>

Diagnostic Checklist

When your SVG won't show, check these in order:

[ ] Does the file exist at the specified path? (Check Network tab)
[ ] Does the SVG have xmlns="http://www.w3.org/2000/svg"?
[ ] Are width and height specified (or CSS sizing)?
[ ] Does viewBox match the content coordinates?
[ ] Are fill/stroke colors visible against the background?
[ ] Is CSS hiding the element? (Check computed styles)
[ ] Any console errors? (CSP, CORS, parsing)
[ ] Is the MIME type correct? (Should be image/svg+xml)
[ ] Is the SVG valid XML? (No unclosed tags, valid attributes)
[ ] Are you using features that don't work in <img> tags?

Tools for Debugging SVGs

Browser DevTools

Inspect element to see if SVG is in DOM
Check Network tab for loading errors
View Console for JavaScript/parsing errors
Test CSS in Styles panel

SVG Genie Tools

SVG Playground - Test SVG code with live preview
SVG Editor - Edit and fix SVG structure
SVG Minify - Clean up and validate SVGs

Online Validators

W3C Markup Validator
SVGOMG for optimization and validation

When All Else Fails

If you've tried everything and the SVG still won't render:

Option 1: Recreate it Use AI SVG Generator to create a fresh, clean version of your graphic.

Option 2: Convert to PNG Use SVG to PNG as a reliable fallback.

Option 3: Simplify Complex SVGs with many features are more likely to break. Simplify the design.

Option 4: Check the source If the SVG came from a tool or export, try a different export method or tool.

Key Takeaways

Add xmlns - The #1 cause of SVG not rendering
Set dimensions - SVGs need width/height or CSS sizing
Check colors - Invisible might mean wrong color, not missing
Verify paths - 404 errors are common and easy to miss
Use DevTools - Network and Console reveal most issues
Test cross-browser - SVG support varies

Most SVG display issues have simple fixes. Work through this checklist and you'll identify the problem quickly.

Related Articles: