Your logo looks perfect in Illustrator. You put it on the website — and nothing shows. A blank space where your logo should be, or a broken-image icon. No error message that makes sense, and the file works fine everywhere else.

An SVG that will not show is rarely beyond repair. SVG is code, not pixels, so when it does not render, the cause is almost always one of a small set of predictable problems: a missing attribute, a wrong file path, a colour that blends into the background, or a server delivering the file incorrectly. Each one takes about 30 seconds to fix.

This guide walks through all 12, in the order you should check them.

Diagnose it in 30 seconds first

Before touching the file, find out whether the problem is the SVG code or the way it is delivered. Open your page, press F12 to open DevTools, and check two tabs:

Then run the 10-second test: paste your SVG markup into any online SVG preview tool. If it renders there but not on your page, your code is fine — the problem is delivery (path, MIME type, CORS, CSP, or embed method). If it does not render there either, the problem is inside the file.

Fix 1: Add the xmlns namespace declaration

This is the number-one cause. Every standalone SVG needs an XML namespace declaration so the browser knows it is dealing with SVG and not generic XML. Without it, an SVG loaded as a file or through an `<img>` tag often refuses to render at all.

Check the opening tag of your file. It should look like this:

`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">`

If the `xmlns="http://www.w3.org/2000/svg"` part is missing, add it. Inline SVG pasted directly into HTML sometimes works without it, because the HTML parser supplies the namespace — but the same file loaded on its own will not. Always include it.

Fix 2: Check the file path

If you are loading the SVG with `<img src="...">`, a CSS `background-image`, or an `<object>` tag, a wrong path is the most common reason for the broken-image icon. A typo in the folder name, a relative path that points somewhere else after a page move, or a filename with the wrong capitalisation — servers are usually case-sensitive, so `Logo.svg` and `logo.svg` are two different files.

In DevTools, open the Network tab and reload. If the SVG request shows a 404, the path is wrong — fix the path, not the file.

Fix 3: Set width and height — the zero-size trap

An SVG with no explicit size can render at 0 by 0 pixels: loaded correctly, technically visible, and completely invisible on screen. Some browsers default an SVG without dimensions to 300 by 150 pixels; others collapse it to nothing. Either way, the result looks like the file never loaded.

Add explicit `width` and `height` attributes to the root `<svg>` tag, or give the element a size in CSS. Either one breaks the trap. A `viewBox` alone does not fix this — it defines the internal coordinate system, not the size on the page.

Fix 4: Add or correct the viewBox

The `viewBox` tells the browser how the drawing's internal coordinates map to the size on screen. A missing `viewBox` means the artwork cannot scale, and a wrong one crops or squashes it: a `viewBox` smaller than the artwork cuts pieces off, and one with the wrong aspect ratio distorts everything.

A typical correct value looks like `viewBox="0 0 100 100"` — a 100 by 100 coordinate space starting at 0,0. Artwork cut off on one side means the `viewBox` is too small; stretched artwork means the aspect ratio does not match the width and height.

Fix 5: Fix invisible fill and stroke colours

Sometimes the SVG is rendering perfectly — you just cannot see it. A white fill on a white background, a `fill="none"` with no stroke, or a fill colour that matches the page background all produce a blank-looking space.

Give the shapes a contrasting fill temporarily: if the artwork appears, the geometry was fine and only the colours were wrong. Also check for `fill="none"` on shapes meant to be solid, and strokes with a width of zero.

Fix 6: Check CSS that hides it

Global CSS rules are a quiet SVG killer. A rule like `display: none` on the element or one of its parents, `opacity: 0`, `visibility: hidden`, or a width and height of zero all hide an SVG that loaded fine. Broad rules such as `* { transition: all ease 0.3s }` have also been reported to break SVG rendering in Chrome.

Inspect the element in DevTools and look at the computed styles.

Fix 7: Serve the correct MIME type

If your server sends the SVG with the wrong Content-Type header, browsers may refuse to render it or display raw XML instead of the graphic. The correct MIME type is `image/svg+xml` — a common gap on shared hosting, where `.svg` is not a recognised file type.

On Apache, add this line to your `.htaccess` file:

`AddType image/svg+xml svg svgz`

On other servers, add the same mapping in the server configuration. You can verify the header in DevTools: click the SVG request in the Network tab and check the Response Headers.

Fix 8: Check Content Security Policy

A Content Security Policy (CSP) can block an SVG from loading, and the error only shows in the Console tab — the page itself just shows a blank space. If your site sets a CSP header, it must allow the SVG's source: `img-src` for SVGs loaded as images, and `object-src` for SVGs loaded with `<object>`.

If the console shows a CSP violation mentioning your SVG file, update the policy to allow that source. This is a security feature working as designed — the fix is to permit the file, not to remove the policy.

Fix 9: Fix CORS on cross-domain files

Loading an SVG from a different domain — a CDN, a subdomain, another site — triggers the browser's cross-origin rules. The file may load as a plain image, but the moment you try to manipulate it with JavaScript, use it in a canvas, or load it in an `<object>` tag, the browser blocks access unless the hosting server sends the right CORS headers.

The fix is on the server hosting the SVG: it must send an `Access-Control-Allow-Origin` header permitting your site. If you cannot change that server, host the SVG on your own domain instead.

Fix 10: Pick the right embed method

The three ways to put an SVG on a page behave very differently, and the wrong choice looks like a broken file:

If your SVG shows as an `<img>` but parts are missing — fonts wrong, colours off, animations dead — it is not broken. It is sealed. Inline it instead.

Fix 11: Validate the XML

SVG is XML, and XML is strict. One unclosed tag, one stray `&`, one mismatched quote, and the whole file fails to parse — the browser shows nothing at all rather than a partial image. Hand-edited files and files stitched together from snippets are the usual offenders.

Paste the markup into an XML validator or an SVG preview tool. It will point at the exact line with the error. Fix the tag, save, and the image appears.

Fix 12: Check external references and the cache

Two last traps. First, an SVG that references external resources — a linked stylesheet, a web font, another image — loses all of them when loaded through `<img>`, because the sealed context blocks external loads. Embed the styles and fonts inside the file, or inline the SVG. Second, browsers cache aggressively: after fixing anything above, hard-refresh (Ctrl+Shift+R or Cmd+Shift+R) or the browser may keep showing the old broken version.

When the SVG file itself is the problem

If the markup is valid, the path is right, the server is configured — and the file still misbehaves — the artwork itself may be the issue. Auto-traced SVGs are the usual suspects: thousands of unnecessary anchor points, an embedded raster image hiding inside the `.svg` wrapper, or a white background shape baked in during tracing. No attribute fix repairs a file that was never a clean vector. That is a rebuild job, not a settings job. AiLogoFix's raster to vector service hand-redraws pixel artwork as clean vector files — AI, EPS, SVG, and PDF — from $10. If the logo needs a fresh start, the logo design service creates original logos from $30, plus custom offers. For the basics of the format, see Understanding SVG: The Complete Guide for Designers & Developers.

FAQ

Why does my SVG show in one browser but not another?

The file is usually valid but relies on something one browser tolerates and another does not — most often a missing `xmlns`, a missing `viewBox`, or a filter that renders inconsistently. Fix 1 and Fix 4 cover most of these cases.

Why does my SVG show as raw code instead of an image?

Your server is sending the wrong MIME type. The browser received the file as text and displayed it as text. Set the Content-Type header to `image/svg+xml` (Fix 7) and it will render as a graphic.

Why is my SVG invisible even though it loads?

Almost always colours or size: a white fill on a white background, a `fill="none"` with no stroke, or zero width and height. Check Fix 3 and Fix 5 first.

Can I use SVG in emails?

Mostly no. Many email clients, including Outlook, do not support SVG images, and inline SVG is blocked as a security measure. For email, export a PNG version of the artwork instead.

Does an SVG need width and height if it has a viewBox?

The `viewBox` defines the internal coordinate system, not the size on the page. Without width and height (or CSS sizing), some browsers render the SVG at zero size. Give it both and the problem disappears.

Conclusion

A missing SVG is almost never a mystery — it is one of twelve ordinary causes, each taking about 30 seconds to check. Start with DevTools, run the preview test to separate code problems from delivery problems, then work through the list. Nine times out of ten, the fix is in the first four.

And if the file itself turns out to be the problem — a messy auto-trace, a fake SVG with pixels inside — stop patching attributes and get the artwork rebuilt properly. A clean vector file does not need workarounds.

Your SVG should just work — get a clean vector file, not a workaround.

If your logo keeps breaking on the web, the file is probably the problem, not your code. AiLogoFix's specialist team rebuilds your artwork by hand into a clean, production-ready SVG — real paths, correct viewBox, no hidden junk — so it renders perfectly in every browser. Every order includes refinements within your selected package and agreed brief, and full commercial rights.

Get a Clean SVG of Your Logo →

Not sure what is wrong with your file? Message the team — send your SVG and we will tell you exactly what it needs, for free.