Your logo looks perfect on your white website. Then you put it on a dark header, a coloured banner, or a product photo — and a white box appears around it, like a sticker that was never cut out properly. The logo is fine. The white box is not part of the logo. It is part of the file.

Here is the fact that explains everything: by default, an SVG has no background at all. There is no such thing as an SVG with a background colour, because there is no background to colour — the file is just shapes floating in empty space. So if your SVG shows white behind the artwork, something put a white shape in there. Usually it is one rectangle, sitting behind everything else, and deleting it fixes the problem completely.

Why the white box is there

Four things put a white background into an SVG:

The good news: in every case, the fix is removing one thing — not rebuilding the whole logo.

How to confirm it before you fix anything

Do not trust your eyes on a white page: a white box on a white page looks exactly the same as no box at all. Open the SVG in a browser and put it on a dark or coloured background, or open it in an editor and turn on the transparency grid (the checkerboard pattern). If a solid white rectangle appears behind your artwork, that is the background shape. If the checkerboard shows through everywhere except the artwork itself, the file is already transparent and the white box is coming from somewhere else — check the CSS of the page instead.

Fix 1: Delete the background shape in the code

The fastest fix, and the most exact. Open the SVG in any text editor and look near the top of the file for the first shape — usually a rectangle covering the full canvas, like `<rect width="100%" height="100%" fill="#ffffff"/>` or `<rect width="100%" height="100%" fill="#fff"/>`. Delete that one element and save. The file becomes transparent immediately, and the artwork is untouched — unlike raster background removal, which guesses pixel by pixel, deleting an SVG background shape is exact.

If the first shape is a giant `<path>` instead of a `<rect>`, it is the same idea: the background is one big shape underneath everything else. Delete it, preview the file, and use Undo if you removed the wrong one.

Fix 2: Delete it in a vector editor

If you would rather not touch code, open the file in Illustrator, Inkscape, or Figma. The background shape is the bottom layer — in Figma it shows up as an extra layer you can click and delete; in Illustrator, use the Layers panel to find the bottom rectangle and delete it. In Illustrator, turn on View, then Show Transparency Grid first, so you can see whether a white rectangle is really sitting behind the artwork — without the grid, a white background and a transparent background look identical on screen.

Save or export as SVG again, and check the result on a dark background before you call it done.

Fix 3: Re-trace with the white background removed

If the white box came from tracing — your SVG was made from a JPG or a white-background PNG — the cleanest fix is upstream: re-trace the original and tell the tracer to ignore the white. Most tracing tools have a setting for this, usually called "make white background transparent" or similar, and it is often on by default — check that it has not been switched off.

With the setting on, white areas that touch the edge of the image are dropped, along with the pale fringe around the artwork, and the SVG holds only the logo shapes. Two caveats: a light grey or cream background is not white, so the setting may keep it as its own shape — in that case delete it by hand. And white inside the logo itself, like the centre of a ring, is protected: only white connected to the edge is removed.

If your logo is a single colour, trace it in black-and-white mode instead: that style only draws the dark parts, light pixels become empty space, and there is no white shape to remove at all.

Fix 4: Export it correctly from Illustrator

When the SVG comes from Illustrator, the white background is usually a rectangle the designer added while working, or the artboard itself. Before exporting, enable the transparency grid (View, then Show Transparency Grid) and look for a white rectangle behind the artwork. Delete it if it is there.

There is no transparency colour to choose in SVG export, because there is no background colour — if the file still shows white after export, a shape is causing it, not a setting. One working trick while designing: set both transparency grid colours to the colour of the page the graphic will sit on, so you can see how it will really look. But never ship the grid as a shape — delete any background rectangle before export.

Fix 5: Convert to the right format — JPG can never be transparent

Sometimes the white box appears one step later, when the SVG is converted for a destination that cannot use SVG. JPG has no transparency at all: converting a transparent SVG to JPG forces the converter to fill the empty areas with something, and white is the default. That is not a bug in your SVG — it is a property of JPG.

If the destination needs transparency, export PNG instead: PNG supports a full alpha channel and keeps the transparent areas transparent. Only use JPG when the image genuinely sits on a solid background, and pick the background colour deliberately — white by default, or the colour of the slide or page it will sit on. And remember the reverse rule too: a JPG logo can never become a transparent SVG by converting it. The white has to be removed by tracing or redrawing, not by changing the file extension.

The dark-mode test your file must pass

The classic symptom is a logo that looks fine on a white site and ships inside an ugly white rectangle on a dark theme. That rectangle was always there — invisible white-on-white. Before you ship any SVG, preview it on three backgrounds: white, black, and a mid-grey. If it passes on all three, it is genuinely transparent. If it only passes on white, go back to Fix 1.

This matters beyond websites. The same white box shows up on dark presentation slides, on product mockups, on packaging proofs, and in print files. One clean master file, checked properly, prevents the same embarrassment everywhere the logo goes.

When to get the file rebuilt instead

Deleting a background rectangle takes a minute when the rest of the file is clean. But if the SVG is a messy auto-trace — thousands of anchor points, a white shape fused into the artwork, colours split into dozens of near-identical shades — cleaning it by hand costs more time than rebuilding it. The same applies if the source was a low-resolution JPG: the white background is only one of its problems.

AiLogoFix's raster to vector service hand-redraws your logo as a clean vector with true transparency — AI, EPS, SVG, and PDF — from $10, so the file you get back has no background shape to delete and no white box waiting to appear. If the logo itself needs changes first — colours, text, layout — the logo modify service fixes the artwork from $15. For the white-halo version of the same problem on product photos, see White Halo Around Product Cutouts: Causes and a 5-Step Fix.

FAQ

Why does my SVG look fine on my website but show a white box in dark mode?

Because the white rectangle was always in the file — invisible on your white site, obvious on a dark background. Delete the background shape (Fix 1) and the box disappears everywhere.

Can a JPG logo be converted to a transparent SVG?

Not by converting alone. JPG cannot hold transparency, so its white background is real image data. The file must be traced with the white ignored, or redrawn by hand with true transparency.

Why does my SVG turn white when I convert it to JPG?

JPG has no transparency, so the converter must fill the empty areas with a solid colour — white by default. If you need transparency, export PNG instead.

I deleted the white rectangle but the box is still there. Why?

Check for a second background shape — some exports add both a rectangle and a full-canvas path — or a white fill on the page CSS behind the image. Preview the SVG file on its own, on a dark background, to see whether the file or the page is the cause.

Does an SVG need a background colour at all?

No. By default an SVG has no background — the artwork floats over whatever is behind it. That is the whole point of the format, and the reason a white box in an SVG is always a shape someone or something added.

Conclusion

A white background in an SVG is never a property of the format. It is one shape — a rectangle or a full-canvas path — sitting behind your artwork, put there by an export, a tracer, or a designer who forgot to delete it. Find it, delete it, and the file is transparent. Re-trace with the white ignored if the file came from a JPG, export correctly from Illustrator, and never expect JPG to hold transparency it cannot hold.

Check every SVG on a dark background before you ship it. The white box you cannot see on white is the one your visitors will see everywhere else.

No more white boxes — get a logo file that is truly transparent.

Your logo should float cleanly over any background — dark headers, coloured banners, product photos. AiLogoFix's specialist team rebuilds your logo by hand as a clean vector with true transparency, so the white box never comes back. Every order includes refinements within your selected package and agreed brief, and full commercial rights.

Get a Clean, Transparent Vector Logo →

Not sure where the white is coming from? Message the team — send your SVG and we will tell you exactly what it needs, for free.