How to Make SVG Background Transparent
SVGs don't have a background by default — but white rectangles and filled backgrounds can sneak in. Here's how to remove them.
Why SVGs Sometimes Have White Backgrounds
Pure SVG has no background — it's transparent by default. White backgrounds appear when: a <rect> element with white fill is included in the SVG code; the SVG was exported from an app that adds a background layer; or an image was vectorized including its white background.
Method 1: Remove the Background in Code
Open the SVG file in a text editor. Look for a <rect> near the top of the SVG code with fill='white' or fill='#ffffff'. Delete that line, save the file. Done.
- Open the SVG in VS Code, Notepad++, or any text editor
- Search for 'fill="white"' or 'fill="#fff"' near a <rect> element
- Delete the entire <rect> element that serves as the background
- Save and verify the SVG now has a transparent background
Method 2: Use Inkscape
In Inkscape, open the SVG, select the background rectangle (usually the bottommost layer), and delete it. Save as Plain SVG.
Method 3: Set background to 'none' in CSS
When embedding SVG inline in HTML, you can override the background with CSS: 'svg { background: none; }'. This works if the background is set via CSS, not via a <rect> element.
Preventing Backgrounds on Conversion
When converting a PNG to SVG using our tool, use a PNG with a transparent background (RGBA/PNG-24) as input. The converter preserves transparency and won't generate a background rectangle. Avoid JPEGs — they don't support transparency and always convert with a background color.
Frequently Asked Questions
Does SVG support transparency by default?
Yes. An SVG file has no background color unless one is explicitly drawn. The background color you see in applications is the app's canvas color, not the SVG itself.
How do I check if my SVG has a transparent background?
Open the SVG file in a browser. If the browser's default white background shows through, the SVG itself is transparent.
Can I add transparency to a specific color in an SVG?
Yes. Set fill-opacity or use rgba() color values on any SVG element to control transparency independently.
Why does my SVG show a white background in Cricut Design Space?
Design Space may be adding a white canvas. Check the SVG code for a <rect fill='white'> element and remove it.
How do I make only part of an SVG transparent?
Use clipPath or mask elements in SVG to make specific regions transparent, or set fill-opacity on individual paths.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free