SVG transparency: transparent backgrounds and opacity
An SVG has a transparent background unless a shape covers it. How to check, remove or add a background colour, and how opacity makes shapes see-through.
Published
Yes, an SVG is transparent by default. The format has no background of its own: wherever no shape is drawn, whatever lies behind the image shows through. If an SVG appears to have a white background, either the program showing it has put white behind it, or the file contains a white rectangle the size of the whole drawing. Single shapes are made see-through with the opacity, fill-opacity and stroke-opacity properties.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="teal"/>
</svg>This file paints a disc and nothing else. The four corners of the square are empty, and on a web page the page’s own colour shows there.
How to check whether an SVG is transparent
Open the file in the SVG viewer. It draws the picture on a checked background, so transparent areas show the checks and painted areas do not. A dark background can be switched on for light artwork.
To be certain, look at the code. A background is nearly always a <rect> near the top of the file that is as large as the viewBox:
<rect width="100%" height="100%" fill="#ffffff"/>It may be written with numbers in place of percentages, or as a <path> that traces the four corners.
Why an SVG looks white
| Cause | How to tell | Fix |
|---|---|---|
| It is being shown on white | A browser tab, a file preview or a white page behind it | Nothing is wrong. Place it on a colour to see |
| The file has a background rectangle | The viewer shows no checks. The code has a full-size <rect> | Delete that element |
| It was converted to JPG | JPG cannot hold transparency | Convert to PNG instead |
| A style on the root element | style="background: ..." on the <svg> tag | Remove the style |
Background rectangles come from the way a file was made. Some export settings and converters add one, and tracing a picture in colours normally produces a shape for the background colour along with the rest.
How to remove a background
In the code. Paste the SVG into the viewer’s code box, delete the background <rect> element, and save. The picture updates at once, so a wrong deletion is obvious.
In a vector editor. Click the background, check that only the large rectangle is selected, and delete it. If the whole drawing is selected instead, it is grouped: ungroup it, or in Inkscape double-click to step into the group.
From a traced picture. The image to SVG converter in black and white mode writes only the dark shapes, with nothing behind them. In colours mode it writes a rectangle in the commonest colour as the first element, which is the one to delete for a transparent result.
How to add a background colour
There are three ways, and they differ in where they work.
1. A rectangle as the first shape. It is part of the drawing, so it appears in every program:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" fill="ivory"/>
<circle cx="50" cy="50" r="40" fill="teal"/>
</svg>Shapes are painted in file order, so the rectangle must come before the rest. Match it to the viewBox: if the viewBox is -50 -50 100 100, the rectangle needs x="-50" y="-50" as well.
2. CSS on the SVG element. <svg style="background-color: ivory"> colours the whole box the SVG occupies. Browsers honour this. Other software often ignores it, since it is a web page style and not a shape.
3. CSS on the page. Give the <img> or the element around it a background-color. The file stays transparent and can be reused on any colour.
For a file that will be sent to other people or programs, use the rectangle. For a web page, leave the SVG transparent and colour the page.
Opacity: making shapes see-through
| Property | What it fades |
|---|---|
opacity | The whole element: fill and stroke together. On a group, the group as one |
fill-opacity | The fill only |
stroke-opacity | The stroke only |
Each takes a number from 0 (invisible) to 1 (solid), and can be written as an attribute or in CSS. The fragments below go inside an <svg> element.
<circle cx="40" cy="50" r="30" fill="teal" opacity="0.5"/>
<circle cx="60" cy="50" r="30" fill="gold" fill-opacity="0.5" stroke="black" stroke-width="4"/>The first circle is half see-through all over. The second has a half see-through fill inside a solid black outline.
Opacity on a group is applied after the group is drawn:
<g opacity="0.5">
<circle cx="40" cy="50" r="30" fill="teal"/>
<circle cx="60" cy="50" r="30" fill="teal"/>
</g>The two circles fade as a single shape, and the overlap is no darker than the rest. With opacity="0.5" on each circle separately, the overlap would be darker.
Opacity is not inherited, but it multiplies: a shape at 0.5 inside a group at 0.5 ends up a quarter solid.
Browsers also accept transparency inside a colour, as in rgba(0, 128, 128, 0.5) or the eight-digit hex #00808080. Other software often does not, so in a file the separate opacity properties are the safer choice. SVG fill and stroke explains the difference between fill="none" and a transparent fill.
For an edge that fades away gradually, use a gradient whose last stop has stop-opacity="0", described in SVG gradients, or a mask.
Keeping transparency when converting
- To PNG: transparency is kept. SVG to PNG leaves the background transparent unless a colour is chosen.
- To JPG: transparency is lost, because the format has none. SVG to JPG fills the empty areas with a chosen colour, white unless changed.
Transparency and cutting machines
A cutting machine works from outlines, not from what is visible. A background rectangle is a shape like any other, and a cutting program will normally treat it as a piece to cut: delete it in the file or in the program. In the same way, a shape made invisible with opacity="0" is still in the file and may still be cut. Remove what should not be cut, do not hide it.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| A white box behind the image on a coloured page | A background rectangle in the file | Delete it |
| White background after converting | The target was JPG | Use PNG |
| A background set with CSS is missing elsewhere | A style on the <svg> tag is not part of the drawing | Use a <rect> |
| The background rectangle misses part of the image | The viewBox does not start at 0,0 | Set the rectangle’s x and y to the viewBox’s first two numbers |
opacity="50" has no effect | The scale is 0 to 1, and larger numbers count as 1 | opacity="0.5" |
| Overlapping shapes look darker where they cross | Opacity is set on each shape | Put the shapes in a <g> and set opacity on that |
| Transparent areas appear black | The program showing the file paints transparency black | Check in a browser or the viewer. Add a background if that program must be used |
Questions
Is an SVG or a PNG better for a transparent picture? Both hold transparency. SVG suits drawn shapes, PNG suits photographs and painted artwork.
Can a single colour be made transparent, as in a photo editor? There are no pixels to pick from. Find the shapes with that fill and delete them, or set their fill-opacity.
Does fill="transparent" work? In browsers, yes. For files going to other software, fill="none" is more widely understood.