SVG Background Remover
Remove the background from an SVG and keep it a clean vector — free.
A free SVG background remover that works on the SVG's own markup, not pixels — upload a file and it auto-detects full-canvas background shapes, lets you toggle each one individually, and falls back to a manual color picker for backgrounds it can't detect automatically. The output stays a real, infinitely-scalable vector — no chroma-key edges, no rasterization. Everything runs in your browser; nothing is uploaded. Need a raster copy afterwards? Export one with SVG to PNG.
What does removing an SVG background mean?
Removing an SVG background means deleting the shape that fills the canvas behind the artwork — usually a single <rect> that a design tool added on export. Because an SVG is XML, that shape can be deleted outright rather than erased pixel by pixel, so the remaining artwork keeps its exact vector paths and the area behind it becomes genuinely transparent.
Why remove a background from an SVG, not just chroma-key it?
Design tools like Figma, Illustrator, and Sketch commonly export a full-canvas colored rectangle as the first shape in an SVG — an artboard background that isn't part of the actual artwork. If you rasterize that SVG and chroma-key out the background pixel-by-pixel, you get jagged, resampled edges and lose the file's vector precision. This tool instead removes the background shape directly from the SVG's XML, so the artwork stays a clean, infinitely-scalable vector.
How the auto-detector works
The tool scans the SVG's top-level shapes (and one level inside any <g> group) for a solid-fill <rect>, <circle>, or <ellipse> covering at least 95% of the SVG's viewBox area — including percentage-sized rects like width="100%" height="100%". Each match is listed individually so you can uncheck any that turn out to be intentional artwork rather than a background.
Manual color removal for the rest
Not every background is a simple full-canvas rectangle. Turn on Also remove by color, pick the background's color, and adjust tolerance to catch nearby shades. This is size-gated to shapes covering at least half the canvas, so it won't accidentally delete a small icon detail just because it happens to share the same color.
Untrusted SVGs are sanitized before preview
SVG files can contain embedded <script> tags and event-handler attributes. Before your file is ever rendered in the preview, this tool strips scripts, all on* event attributes, <foreignObject> elements, and any external link reference — only same-document fragment links and data: URIs survive. This all happens locally; nothing is uploaded to a server.
File size and format limits
Input must be an .svg file — raster formats like PNG or JPG can't be processed here, because there is no vector markup to edit. There is no upload size cap, since the file is parsed in your browser rather than sent anywhere; the practical ceiling is your device's memory. The optional PNG export picks a whole-number scale that brings the longest side up toward about 1024 px, and never scales down — so a 24 px icon exports large enough to use, and an already-large SVG exports at its own size. For exact pixel dimensions, use SVG to PNG instead.
Frequently asked questions
How do I remove the background from an SVG?
Upload your SVG and the tool automatically detects large solid-fill shapes that cover most of the canvas — the common pattern exported by Figma, Illustrator, and Sketch as a background rectangle. Each detected shape is listed with a checkbox (checked = removed); uncheck any you want to keep, then download the cleaned SVG.
How does the background detection work?
The tool looks at each top-level rect, circle, and ellipse (including one level inside a <g> group) and flags it as a background candidate if it has a solid fill color and covers at least 95% of the SVG's viewBox area. This catches the vast majority of real-world exported backgrounds without needing full path bounding-box analysis.
What if the auto-detector misses my background?
Turn on "Also remove by color", pick the background color with the swatch, and adjust tolerance to catch nearby shades. This removal is size-gated — it only touches shapes covering at least half the canvas, so a small icon detail that happens to share the same color is never deleted by accident.
Does this work on complex paths, not just rectangles?
Auto-detection currently covers rect, circle, and ellipse shapes — the overwhelming majority of real background layers. Arbitrary <path> or <polygon> background shapes aren't auto-detected in this version; if your background is a complex path, the color-based manual removal is your best option.
Does the output stay a vector, or does it get rasterized?
The primary output is a real SVG — background elements are removed directly from the document's XML, not chroma-keyed out of pixels. That means no jagged edges and the file stays infinitely scalable. A PNG export is also available if you need a raster version.
Is it safe to upload an SVG from an untrusted source?
SVGs can contain embedded scripts and event handlers. Before your file is ever previewed, the tool strips <script> tags, all on* event attributes, <foreignObject> elements, and any external href/xlink:href reference — only same-document fragment links and data: URIs are kept. Everything happens locally; your file is never uploaded to a server.
Related tools
- SVG to PNG — rasterize the cleaned SVG at an exact width
- SVG Minifier — shrink the file once the background is gone
- SVG Viewer — read the markup and see which shapes exist
- ICO Transparency Creator — do the same for an .ico file
- Favicon Generator — turn the transparent artwork into a favicon set
- PNG Color Replacer — swap colors in a raster image instead
