How-to guide

How to make an SVG background transparent

Remove the white box behind your vector, for good.

SVGs are transparent by default — so a white or coloured background almost always means a background rectangle got traced along with your artwork. Here is how to find it and remove it.

Try the playground free →

What you need

  • ▸The SVG file, or the PNG/JPG you want to convert
  • ▸A text editor or vector editor

Steps

  1. 01
    Understand where the background came from

    SVG has no background of its own. If yours looks white, either a rect element covers the canvas, or the source image had an opaque background that the trace faithfully reproduced.

  2. 02
    Trace from a transparent source

    The cleanest fix is upstream. Convert a PNG that already has a transparent background in VectorDrop — transparency is preserved, so no background shape is created in the first place.

  3. 03
    Find the background rectangle

    Open the SVG in a text editor. Look near the top for a rect or path whose dimensions match the full width and height, with a white or solid fill.

  4. 04
    Delete it

    Remove that element entirely, or set its fill to "none". Save and reopen — the artwork should now sit on a checkerboard in your editor, meaning transparent.

  5. 05
    Or remove it visually

    In Figma or Illustrator, click the background shape (it is usually the bottom-most layer), confirm it covers the whole canvas, and delete it.

  6. 06
    Verify it

    Open the SVG in a browser over a coloured page background, or place it on a dark layer in your design tool. Any remaining white will be obvious.

Tips

  • ▸Set fill="none" rather than fill="white" — white is a colour, not transparency
  • ▸If the background is a gradient or photo, remove it from the raster image before tracing
  • ▸Trim the viewBox after deleting the background so the SVG has no dead space around the art
  • ▸Check in both a light and a dark context before shipping the asset

Frequently asked questions

Do SVGs support transparency?

Yes, natively. An SVG with nothing behind the artwork is fully transparent, and it also supports partial transparency through fill-opacity and opacity.

Why does my converted SVG have a white background?

The source image almost certainly had an opaque white background, so the tracer converted that area into a shape. Start from a transparent PNG, or delete the resulting background element.

Will a transparent SVG work in Cricut Design Space?

Yes. Cricut reads the vector paths, and a transparent background means no unwanted extra cut layer.

Ready to vectorise your image?

Upload a PNG, JPG, or WebP and get a clean SVG in seconds. Free and browser-based.

Open the playground →