Figma SVG Transparent Background: Remove White Without Deleting Artwork

A Figma SVG can look transparent on the design canvas and still arrive with a solid white box in your website, app, or print workflow. The dangerous fix is deleting every fill="#FFFFFF" you can find—because that can erase white lettering, highlights, counters, and intentional parts of the logo too.

The fast rule:

Remove the full-canvas background layer, not the color white. Then preview the export over light, dark, and checkerboard backgrounds before optimizing it.

If you need a clean result now, inspect the layer stack in Figma, disable the frame fill or background rectangle, export the smallest correct selection, and test the SVG in SVG Editor. If the asset is a PNG or JPG pretending to be vector, use Image to SVG instead of deleting markup blindly.

How do you export an SVG with a transparent background from Figma?

To export a transparent SVG from Figma, select the actual artwork, remove or hide any background rectangle, disable the selected frame's fill when that fill is not part of the design, and export as SVG. Figma's canvas color is not the problem; visible filled layers inside the exported selection are.

Use this 60-second checklist:

1. Select the frame, component, group, or vector you plan to export.
2. In the Layers panel, look for a bottom rectangle named Background, BG, Surface, or Rectangle.
3. Check whether the selected frame itself has a Fill in the Design panel.
4. Hide the suspected background and confirm the intended artwork remains visible.
5. Export the smallest correct selection as SVG at 1x.
6. Preview the file over white, black, and a bright color.
7. Only then run cleanup or optimization.

Figma documents SVG as a vector export format and exposes SVG-specific options in its export settings. Those settings do not automatically distinguish an unwanted white rectangle from intentional white artwork, so the layer decision still belongs to you. See Figma's export formats and settings for the current export controls.

If the whole export is blank, clipped, or malformed rather than merely white-backed, use the broader Figma SVG export troubleshooting guide. If the exported canvas is too large, repair the bounds with the Figma SVG viewBox guide.

Why does a Figma SVG export have a white background?

A Figma SVG export has a white background when some part of the exported content paints white across the canvas. The usual causes are a filled frame, a full-size rectangle behind the artwork, flattened vector geometry, an embedded raster image, or CSS outside the SVG. SVG itself does not require a background.

A transparent SVG is an SVG with no painted shape covering the background area. Transparency is the default state of unpainted SVG pixels; it is not a special export effect that needs to be added.

Use the symptom to find the cause:

What you see	Most likely cause	First check
White box matches the frame exactly	Frame fill or full-size rectangle	Figma frame Fill and bottom layer
White area has an irregular outline	White vector path is part of the artwork	Inspect paths rather than deleting by color
Entire SVG looks white only on one website	Parent CSS or image preview background	Place it over a colored test element
Photo or texture includes white pixels	Embedded PNG/JPG	Inspect <image> and source asset
Background returns after flattening	Flatten merged the background into paths	Undo and export layered vectors
White appears after optimization	Optimizer rewrote styles or masks	Compare the original and optimized files

One useful test is to open the SVG as text and search for:

fill="#fff"
fill="#ffffff"
fill="white"
<rect
<image
background

That search locates suspects; it does not prove which element should be removed.

How do you remove the white background without deleting white artwork?

Remove a white SVG background by identifying the shape that covers the canvas, not by replacing every white fill with none. A true background usually spans the exported width and height, sits first in the paint order, and forms a simple rectangle. White logo details are typically smaller paths higher in the stack.

For example, this root-sized rectangle is probably a background:

<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
  <rect width="800" height="400" fill="#FFFFFF"/>
  <path d="..." fill="#2563EB"/>
  <path d="..." fill="#FFFFFF"/>
</svg>

Delete only the first <rect> after confirming it is not an intentional panel. Keep the smaller white path if it is lettering or a highlight:

<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="#2563EB"/>
  <path d="..." fill="#FFFFFF"/>
</svg>

If the background is controlled by CSS, you may see a class instead of an inline fill:

<style>.background { fill: #fff; }</style>
<rect class="background" width="800" height="400"/>

Remove the background element or change that specific rule to fill: none; do not globally rewrite .white or every white hex value. For a visual cleanup pass without hand-editing code, open the file in SVG Editor, select the background object, and delete it there.

Should you disable the frame fill or delete a rectangle in Figma?

Disable the frame fill when the frame only defines export bounds and the artwork should float transparently. Delete or hide a rectangle when that rectangle was added as a temporary backdrop. Keep either one when the colored surface is an intentional part of the asset, such as a badge, app icon tile, or card illustration.

Use this decision rule:

Design intent	Correct action
Standalone logo or icon	Remove frame fill and background rectangle
App icon with a required tile	Keep the tile background
White wordmark for dark surfaces	Keep white paths; remove only canvas-sized background
Illustration inside a card	Keep the card if the card is part of the deliverable
Asset exported for flexible themes	Prefer transparent canvas and themeable fills
Screenshot or photo composition	Do not expect vector transparency from embedded raster pixels

The key question is: Should this colored area travel with the asset wherever it is used? If yes, it is artwork. If no, it is a preview surface and should not be exported.

Why does the SVG still look white after the background is removed?

A transparent SVG may still look white because most browser tabs, file previewers, CMS media libraries, and page containers use white as their own background. Put the SVG over an obvious color before concluding that the file contains white pixels.

Try this browser test:

<div style="background:#0f172a; padding:32px">
  <img src="logo.svg" alt="Logo transparency test" width="320" />
</div>

If the rectangle disappears, the SVG was transparent all along. If the white box remains, inspect the file for a root-sized <rect>, a full-canvas <path>, or an embedded <image>.

Also check external CSS:

img,
.logo,
.asset-preview {
  background: white;
}

When an SVG is embedded inline, a site stylesheet can also override classes or generic selectors inside it. A standalone file opened through <img> is more isolated. MDN's SVG tutorial explains the markup model, while the SVG fill reference documents how painted interiors are controlled.

What is the safest transparent SVG handoff for developers?

The safest handoff includes the untouched source, the final transparent SVG, a visual reference, and one test showing the asset over both light and dark surfaces. Keep the viewBox, preserve intentional white details, use descriptive filenames, and avoid aggressive optimization until the design is approved.

Before committing the file:

• Confirm there is no accidental full-canvas fill.
• Confirm white details remain visible on a dark test surface.
• Keep the viewBox so the asset scales correctly.
• Remove fixed width and height only if responsive CSS will control size.
• Preserve gradients, masks, filters, and their referenced IDs.
• Add accessible alt text where the SVG conveys meaning.
• Test the exact embed method: <img>, CSS background, inline SVG, or React.
• Compare the optimized output with the original at small and large sizes.

For production markup and React cleanup, follow the Figma SVG clean-code guide. If the file needs smaller markup after it renders correctly, use SVG Optimizer with conservative settings rather than deleting definitions manually.

FAQ about transparent Figma SVG exports

Does SVG support transparency?

Yes. Any SVG area that is not painted by a shape remains transparent. Individual fills and strokes can also use opacity, but you do not need to set opacity to make an empty background transparent.

Does Figma export its canvas color into SVG?

No. A visible background in the export normally comes from a filled frame, rectangle, path, embedded image, or CSS—not the infinite Figma canvas around the selection.

Can I replace white with fill="none"?

Only on the confirmed background element. Replacing white globally can erase meaningful logo text, icons, highlights, and negative-space details.

Why does my SVG have a checkerboard background?

A checkerboard is usually a preview convention that represents transparency. It should not be part of the file unless it was deliberately added as vector shapes or baked into an image.

What is the fastest way to verify the fix?

Open the SVG over three surfaces: white, near-black, and a saturated color. If the asset has no rectangular box and all intentional light and dark details remain visible, the background removal worked.

Make the background transparent, then clean the code

Do not solve a background problem by destroying every white shape. Remove the single layer that paints the canvas, test the SVG over contrasting surfaces, and keep the design details that belong to the mark.

Open the export in SVG Editor to select and remove the background visually. Once the artwork is correct, run SVG Optimizer and validate the final file before shipping it.