Remove the background from an SVG

Why an SVG has a white box behind it

Some traced SVGs keep the photo’s background as one shape the size of the whole canvas, filled with the colour behind the artwork, often white, with every other shape drawn on top of it. When they do, that first shape is the white box you see in Cricut Design Space, on a dark web page or on a coloured slide.

For a cutting machine it is more than a look: Cricut Design Space can import that full-canvas rectangle as a cuttable shape, which may give you an unwanted square cut around your design. Once it is deleted, that shape is gone from the file. Before you cut, still check the Layers panel and the Make preview, or run the file through the SVG cut file checker.

When the box is a filled shape and not a setting, no export option hides it. The fix is to delete that one shape, which is what this tool does. A background set with CSS works differently; the next section says which kind the tool removes.

How this tool decides what the background is

It looks at the first shape drawn, the bottom of the stack, and checks how much of the canvas it really fills, holes subtracted: a frame the size of the page is not a background, and neither is a backdrop with holes covering more than 5% of the canvas. The 95% line is a rule of thumb, not a guarantee. If the shape fills at least 95% of the canvas and is white or near-white (each of red, green and blue at 230 or more), it is removed. Transforms on groups and a viewBox that does not start at 0,0 are taken into account, and class styles from the file’s own <style> sheet are read for fill and visibility. Separately, CSS background, background-color and background-image declarations in the root <svg> element’s inline style attribute are removed; a background set in a <style> sheet or by the page that shows the SVG is not.

A dark or coloured shape that fills the canvas is kept unless you say otherwise, because it is often the design itself: a full-bleed badge, tag or sticker. The tool tells you it found one and offers Remove this coloured shape. In the 119 example SVGs published on pic2svg, 54 start with a shape that fills the canvas: 43 are white or near-white and are removed, 11 are dark or coloured and are kept until you confirm. These are pic2svg’s own traced examples, not a sample of every SVG in the wild: they show how the rule behaves, not how often it is right on your file.

Only that bottom shape is removed, plus the next layer if you ask for it. A white shape painted above other artwork, such as a highlight, a white letter or a white sticker border drawn as its own shape, is artwork and stays. The tool cuts the shape’s own text out of your file and edits nothing else apart from those background declarations on the <svg> tag: the viewBox, size, ids, gradients, styles and every other path are unchanged, character for character. Unchanged markup does not always mean an unchanged look: a CSS rule such as :first-child, or a reference to the removed shape’s id, can change how the rest is drawn, so compare the previews before you download.

If the next shape in the stack also covers the canvas, for example a coloured panel placed on a white page, the tool tells you and lets you remove that layer as a separate step, after you have checked the preview.

White inside letters and shapes stays white

In a traced logo, the white inside an O, A, e or 8 is often its own white shape drawn on top of the letter, not a hole. Removing the backdrop does not touch those shapes, so on a dark background they still show white. That is usually what you want on a sticker; for a stencil or a cut file it is not.

When the removed backdrop is a solid colour, the tool then estimates how much of the area that showed that colour is still painted. It renders the original and the result at 256 × 256 pixels, takes the pixels that were opaque and within 10 levels of the backdrop colour on red, green and blue in the original, and counts the share that is still at least half opaque after the removal. The number does not say what paints those pixels: usually white letter interiors or highlights drawn above the backdrop, but it can also be an embedded picture, a translucent shape or an anti-aliased edge. Switch the preview to Dark to see them. It is not a score for how well the background was removed. To make the inside of a letter see-through, select the white shape together with the letter below it and use Path › Difference in Inkscape: Difference cuts the upper object out of the lower one, so the white shape must sit above the letter, and text or other objects that are not paths need Path › Object to Path first. Deleting the white shape alone shows the letter colour underneath instead of a hole. You can also trace the original image again with a transparent background.

Remove the background in Inkscape, Illustrator or Canva

Inkscape: open the SVG, open the Layers and Objects dialog (Ctrl+Shift+L), expand any groups and select the bottom-most object that is the size of the page. The bottom entry can also be a group holding the whole design, or a page-sized shape that belongs to it, so hide it first with its eye icon: if only the background disappears, delete it, then use File › Save As and choose Plain SVG.

Adobe Illustrator: open the SVG, open Window › Layers, expand the layer and its groups and select the object that covers the artboard. Hide it first with its eye icon: if only the background disappears, delete it, then use File › Export › Export As and choose SVG. If no object covers the artboard, check the artboard’s fill setting before you export: depending on the version and export workflow, Illustrator can include an artboard fill in the SVG.

Canva: Canva’s help says an uploaded SVG graphic can only be resized or recoloured and its shapes cannot be changed, so there is no way to delete the background shape inside an uploaded SVG there. Remove the background here first, then upload the downloaded SVG to Canva.

When the background is inside a picture

Some files saved as .svg are really a PNG or JPG wrapped in an <image> tag. When that picture is the bottom layer, its background is part of the picture’s pixels and deleting vector shapes cannot remove it; the tool tells you so and does not offer a download. You can remove the background from the picture itself, or trace it into vector paths with the PNG to SVG converter, which can change how a photo or a detailed illustration looks. If a separate white shape sits under the picture, the tool removes that shape as usual.

Privacy and limits

The file is read and edited in your browser; it is not sent to pic2svg’s servers. The preview shows your SVG as an image, so scripts in the file do not run on this page. Files up to 2 MB are accepted; DOCTYPE and entity declarations are refused.

Edges traced from a white photo can carry a thin light rim of their own colour; on a dark background it may look like a faint halo. That rim is part of the artwork shapes, so this tool keeps it. Shapes under a clip, mask, filter or CSS transform, nested <svg> elements and <use> clones are not mapped: the tool then says so and leaves the file unchanged.

One case looks like a background but is not: artwork that runs to the edges of the canvas, such as a full-bleed badge or a pattern. A tracer may then draw the artwork colour as the bottom shape and the gaps as shapes on top, so removing the bottom shape removes your design. A dark or coloured bottom shape is therefore kept by default, and when anything still touches the canvas edge after a removal the tool warns you. Compare the two previews before you download.

Questions

Sources and next steps

• Convert a PNG to SVG
• Check an SVG cut file before Cricut or a laser
• Split an SVG into one file per colour
• Inkscape manual: Path › Difference
• Inkscape: keyboard shortcuts (Layers and Objects dialog)
• Adobe: exporting artwork from Illustrator
• Canva: what you can edit in an uploaded SVG