SVGs are vector graphics — perfect for logos and icons because they scale to any size without ever blurring. But plenty of places (social uploads, some editors, app stores, email signatures) want a PNG instead. The catch people keep hitting: the exported PNG comes out with a solid white background instead of the transparent one they expected. Here is how to keep it properly see-through.
Why the white box appears
An SVG with no background element is transparent by default. When a converter turns it into pixels (rasterises it), it has to decide what to place behind the artwork. A good converter leaves the empty areas transparent; a careless one paints them white "to be safe." The fix is to use PNG — which supports transparency — and a converter that does not flatten the image onto a background colour.
Step by step
- Open SVG to PNG and drop your
.svgfile in. - Set the output size. Because SVG is vector, you can render at exactly the pixels you need — say 512×512 for an icon — with perfectly crisp edges.
- Export as PNG. The transparent areas stay transparent; there is no white box.
- Check it against a coloured background (drop it onto a dark slide or webpage) to confirm the transparency held.
Pick the right resolution
Render at the size you will actually use, or a little larger. Unlike resizing a photo, scaling a vector up costs nothing in quality — so if you need a 1024×1024 app icon, render it at that size directly rather than enlarging a small PNG afterwards, which would just blur it. If you need several sizes (favicon, app icon, social avatar), export each at its target resolution straight from the SVG.
Common problems
- White background instead of transparent — the converter flattened it; make sure you are exporting PNG (not JPG) with transparency preserved.
- Blurry edges — you rendered too small and scaled up. Re-export at the target size from the SVG.
- Fonts look wrong — SVGs that rely on system fonts can shift; convert text to outlines in your design tool before exporting the SVG.
Where a transparent PNG actually gets used
Knowing the destination helps you pick the right export size up front:
- App and store icons — usually need exact square sizes like 512×512 or 1024×1024 with a transparent or full-bleed background.
- Website logos — a transparent PNG sits cleanly on any header colour; render at roughly twice the displayed size for sharp results on high-DPI screens.
- Slides and documents — a transparent logo drops onto any slide background without an ugly white rectangle around it.
- Email signatures and avatars — small fixed sizes where a crisp, background-free mark looks far more professional.
For each of these, export straight from the SVG at the target size rather than resizing a single PNG up or down afterwards — that keeps every version perfectly sharp.
Other formats and a privacy note
If you want an even smaller transparent file for the web, convert the PNG to WebP. Building a favicon? Use PNG to ICO. And this SVG-to-PNG conversion runs in your browser where supported, so your artwork is not uploaded — which is handy for unreleased logos and client work.
Use the tool: SVG to PNG — free, runs in your browser where supported, no file is uploaded to a server.
Frequently asked questions
Why does my SVG to PNG have a white background?
The converter flattened the transparent areas onto white. Use a converter that outputs PNG with transparency preserved — empty areas stay see-through.
What size should I export the PNG at?
Render at the exact pixels you will use, or larger. SVG is vector, so rendering bigger costs no quality — never enlarge a small PNG afterwards.
Can I keep transparency in a smaller file?
Yes — convert the PNG to WebP, which preserves transparency at a smaller size than PNG.
Why do my SVG fonts look different after converting?
SVGs that use system fonts can shift when rasterised. Convert text to outlines in your design tool before exporting the SVG so the shapes are fixed.