SVG Background Remover — Remove a Background, Keep It Vector
Auto-detect and remove background shapes from an SVG, or strip any element by color — stays a clean vector.
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.
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.
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: ICO Transparency Creator · Favicon Generator · PNG Color Replacer
