How to Make an SVG Background Transparent

Quick answer

Open the SVG in SVGSketch and look for the object or style that creates the backdrop. It is usually a full-viewBox rectangle at the bottom of the layer stack, but it can also be a fill on the root <svg> element or a CSS background-color outside the SVG. Delete the backdrop shape, set its Fill type to "No Fill", or clear the document fill. For raster export use PNG or WebP, which keep the alpha channel; JPEG cannot.

Steps at a glance

Open the SVG

Drag the .svg onto SVGSketch.

Find the background shape

Inspect the bottom of the Elements panel for a full-viewBox rectangle or path.

Delete it or stop it painting

Delete a pure backdrop shape, or set the Fill Type to "No Fill" in the Appearance panel if the object still matters structurally.

Check the root SVG

Clear any fill or background style on the root <svg> via the XML Inspector (F12).

Export

For PNG, WebP or ICO, leave "Transparent background" checked - it is on by default. JPEG has no alpha channel.

Where the background actually comes from

The backdrop is usually a shape The same two-shape drawing, rendered with and without a full-viewBox rectangle behind it. The checkerboard is this card’s own - an SVG has no backdrop of its own to show.

A solid canvas is not a background SVGSketch paints its own theme color behind your document and draws no checkerboard, so artwork with nothing behind it still looks solid while you work. The color on the left is the editor’s real canvas token.

Only some raster formats keep alpha The same export rasterized twice. PNG, WebP and ICO carry the alpha channel through; JPEG has nowhere to put one, so the empty area is flattened onto solid white before encoding.

Step 1: Understand SVG transparency

An SVG does not need a background. Empty areas remain transparent unless something paints behind the artwork.

That paint source is usually one of three things: a full-size rectangle or path, a fill on the root <svg> element, or a CSS background-color applied by the page or viewer around the SVG.

Before hunting for it, rule out the fourth possibility: nothing is painting at all and you are looking at the viewer. SVGSketch draws its own theme color behind your document and shows no checkerboard, so a file with nothing behind it still looks solid on the canvas. So does an image preview, a file manager thumbnail and most browsers on a blank page. Drop the file onto a colored page before you delete anything.

Step 2: Find the background shape

Open the Elements panel. Start at the bottom of the layer stack and look for a rectangle or path that covers the full viewBox, often a <rect> with x="0", y="0", and width and height set to 100% or to the viewBox dimensions. Select it and confirm that the highlight covers the whole canvas.

Step 3: Delete it, or set its fill to No Fill

If the shape only exists as a backdrop, delete it. If the file depends on that object for alignment, grouping, masks, or bounds, keep the object and stop it painting instead: open the Appearance panel and set the Fill Type to "No Fill", which writes fill="none". The panel spells out what that means - "No fill. Shape interior is transparent."

Step 4: Check the SVG element itself

If no full-size shape is selected but the SVG still appears to have a backdrop, check the root <svg> element itself: open the XML Inspector (F12) and look for a fill attribute or a background style on the root, and clear it there. If the SVG only looks white in a browser or image viewer, test it on a colored page before changing more artwork; the viewer may be supplying the white background.

Step 5: Export with transparency

For SVG export, transparency comes from the markup: if nothing paints a pixel, that pixel is transparent. There is no background setting on an SVG export because there is nothing to set.

For PNG, WebP and ICO, the Export panel offers a "Transparent background" checkbox and it is on by default - flattening is the lossy choice, so it is the one you have to ask for. The preview in the settings dialog switches to a checkerboard while it is checked, which is the fastest way to confirm what you are about to write. JPEG has no alpha channel at all, so the checkbox is absent for it and empty areas are flattened onto white.

FAQ

Why does my SVG still have a white background after I deleted the rectangle?

The root <svg> element may still have a fill or background style, or the app viewing the file may be drawing a page behind it. Clear the root attribute in the XML Inspector (F12), then test the SVG on a colored background to confirm whether the solid area is real. That includes SVGSketch itself: the canvas paints the theme color behind your document and draws no checkerboard, so nothing about how it looks while you work tells you whether the file has a backdrop.

Does SVGSketch have a transparent-canvas mode or a checkerboard?

No. The workspace color comes from the light or dark theme and there is no setting for it. The checkerboard appears in one place - the preview inside the Export Settings dialog, once "Transparent background" is checked for a PNG or WebP - so that is where to confirm a raster export before you write it.

Can a JPEG have transparency?

No. JPEG has no alpha channel. Use PNG or WebP if you need a transparent raster export.

How do I add transparency back if I removed the wrong shape?

Use Ctrl+Z if you are still editing. If you need to recreate the backdrop later, draw a rectangle the size of the viewBox, give it a fill, and send it behind the artwork.

Is fill="none" the same as deleting the shape?

No. Both can look transparent, but fill="none" leaves the object in the file. That object can still affect selection, grouping, masks, exported bounds, or downstream scripts. Delete it when it is only a backdrop.

My SVG has multiple backgrounds. How do I remove them all?

Inspect the lower layers for repeated full-viewBox shapes, grouped rectangles, and CSS rules that apply fills by class. Remove the paint source that belongs to the backdrop without deleting artwork, masks, or clipping paths that the visible design depends on.