Why SVG Holes Fill In (and How to Restore Them)

An SVG hole fills in when the file or destination stops treating the inner contour as outside the filled shape. The usual causes are a released compound path, an inner contour stored as a separate filled object, a changed fill rule or path direction, an importer that drops the relationship, or a raster trace that closed the opening before the SVG was made.

Start by opening the SVG in a browser. If the hole is already filled there, repair the file. If the browser looks right but another app fills the hole, the import step is the likely fault.

First find where the hole disappeared

Use two renderers before changing the geometry:

1. Save a duplicate of the SVG.
2. Open the duplicate directly in Chrome, Safari, Firefox, or another browser.
3. Place it over both a light and dark background.
4. Open the same file in the destination app.
5. Compare the exact hole, not just the overall silhouette.

This comparison separates a bad SVG from a destination-specific import problem. It also prevents random path operations from damaging a file that was correct before import.

A white shape is not a hole

A real hole shows whatever sits behind the SVG. A white shape only looks empty on a white canvas.

To test it, add a temporary dark rectangle behind the artwork. If the supposed hole remains white, select that inner object. You can keep it as a deliberate white design element, but do not expect a cutter, engraving tool, browser overlay, or 3D importer to interpret it as empty space.

For a transparent opening, use a compound path or subtract the inner shape from the outer one. A mask can also create transparency, but many production apps handle simple path geometry more reliably than masks.

Compound paths carry the hole relationship

A letter O, a ring, and a logo with a punched-out center often use one path element with multiple closed subpaths. The outer contour defines the silhouette; an enclosed subpath defines the counter or cutout. The SVG path model permits multiple subpaths inside one path.

That is why Ungroup, Break Apart, and Release Compound Path are not interchangeable. Releasing the compound path can turn the inner contour into an ordinary filled object. The geometry is still present, but its relationship to the outer contour is gone.

Restore it on a duplicate:

1. Select the outer boundary and only the contours that should be holes.
2. Use Make Compound Path, Combine, or the equivalent command.
3. Apply one fill to the resulting object.
4. Check the fill rule.
5. Reopen the saved SVG in a browser and the destination app.

Adobe's current compound-path documentation uses this same model: constituent paths determine filled and transparent regions through a fill rule.

Restore the relationship, not just the appearance

Check nonzero versus evenodd

SVG has two fill rules. The SVG 2 painting specification sets nonzero as the initial value and defines evenodd as the other option.

• nonzero uses signed path crossings. An inner contour with the wrong direction can add to the fill instead of canceling it.
• evenodd counts crossings. A point enclosed twice is outside, so a simple nested contour becomes a hole regardless of contour direction.

This minimal path contains two same-direction rectangles. With evenodd, the center stays transparent:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Changing the rule is useful when it matches the design, but it is not a universal repair. The two contours must still be evaluated as subpaths of the same shape. Setting fill-rule="evenodd" on two unrelated objects does not make one cut through the other.

If you keep nonzero, reverse only the inner contour when your editor provides that command. Illustrator exposes both fill-rule choices and a path-direction control for compound paths. Save a copy before reversing anything, because self-intersections and multiple nested counters can produce a different result than a simple ring.

When the SVG is right but the importer is wrong

Some cutting, CAD, 3D, and animation tools support only a practical subset of SVG. A browser may render the compound path correctly while the destination imports each contour as a solid object.

Use this repair order:

1. Save a simplified copy from the source editor.
2. Convert live text to outlines in that copy when text import is the weak point.
3. Replace masks, clips, and appearance effects with plain path geometry only where needed.
4. Keep each intended hole with its outer contour as one compound path.
5. Test evenodd and nonzero deliberately rather than switching repeatedly.
6. If the importer still fills the opening, import both boundaries and subtract the inner profile in the destination.

For an extrusion workflow, the destination must also recognize a selectable closed profile. The SVG extrusion diagnosis covers open endpoints, duplicates, and profile validity after the hole survives.

When tracing closed the opening

A tracer can close the counter in a small letter or merge a narrow gap when the raster source is tiny, blurred, or low contrast. That is a geometry problem, not a fill-rule problem: the inner boundary never made it into the SVG.

Return to the raster source and:

• enlarge or recapture it without adding blur;
• increase separation around the important opening;
• remove compression noise near the gap;
• reduce smoothing or color merging if the tool exposes those controls;
• compare the new trace at the final output size.

This is the branch where PerfectVector can help. Use the image-to-vector workflow when you have the original raster and need a fresh SVG trace. Inspect every counter and negative space before download. If the SVG was correct until an editor released its compound paths, repair that SVG instead; retracing will not recover the lost edit history.

The same source-first approach is useful for lettering. The hand-lettering vector guide shows how to keep small counters open without stripping the character from the whole drawing.

A safe final check

Before sending the repaired SVG:

• view it on light, dark, and transparent backgrounds;
• select the target and confirm it is one intended compound path;
• inspect the fill rule in the editor or SVG source;
• check every letter counter, ring, and enclosed negative space;
• reopen the exported file instead of trusting the unsaved canvas;
• test the exact destination app;
• keep the editable source and the simplified delivery copy separate.

If the object now behaves as one selection, that may be correct. A compound path is one object by design. Use the SVG ungrouping guide before breaking it apart again.

FAQ

Why did the holes fill after I used Break Apart? Break Apart separated the inner contours from the outer compound path. The former holes became ordinary filled objects. Undo the command or recombine each outer contour with the correct inner contours, then verify the fill rule.

Should I use fill-rule="evenodd" for SVG holes? evenodd is often convenient for nested contours because contour direction does not decide the result. It still works within one shape; it does not subtract a separate object. Keep nonzero when your source and destination preserve the intended contour directions.

Why does the SVG look correct in a browser but solid in my app? The destination importer may not preserve the compound path, fill rule, mask, or contour direction. Simplify a copy to plain paths, then test again. If necessary, import the outer and inner boundaries and subtract the hole in the destination.

Can I make a hole by putting a white shape on top? It only fakes a hole on a white background. The white object remains filled, so it can print, cut, or import as another solid. Use a compound path, subtraction, or another transparency structure when the background must show through.

Can PerfectVector fix filled holes in an existing SVG? PerfectVector is useful when you can return to a suitable raster source and create a new trace with the intended openings visible. It does not repair a compound path that an editor released or an importer ignored. Fix those relationships in a vector editor or the destination app.

Sources

1. W3C — SVG 2 Painting — Defines nonzero, evenodd, and the initial fill-rule value.
2. W3C — SVG Paths — Defines paths, subpaths, and closed path geometry.
3. Adobe Illustrator — Create compound paths — Documents compound holes, fill rules, and reversing constituent path direction.
4. PerfectVector — Image to Vector — The current raster-to-SVG workflow used in the conditional retracing branch.

If the opening was lost during raster tracing, make a fresh vector from the clean source and inspect every counter before delivery. If the browser version is already correct, keep that geometry and repair only the failing import.