SVG fill-rule: evenodd, nonzero and holes

Start with one compound path

A hole belongs to the filled geometry of a shape. The fill-rule property decides which regions count as inside when a path crosses itself or contains several subpaths. It does not cut a hole through every unrelated object beneath it. If two separate rectangles overlap, changing a group's fill rule does not turn one rectangle into a subtraction operation.

For a simple rectangular frame, put the outer and inner boundaries in the same path. Each capital M begins a new subpath, and each Z closes its boundary. The path command guide explains those commands if the geometry is unfamiliar.

Use evenodd for alternating inside and outside regions

With evenodd, crossing each boundary alternates between outside and inside. One enclosing boundary produces fill; two enclosing boundaries produce a hole. The direction in which those boundaries were drawn does not change that odd-or-even decision. The W3C fill-rule definition describes the crossing-count method.

Here is a complete document. Both rectangular subpaths run in the same direction, but the centre stays transparent because the path explicitly uses evenodd. Paste it into the editor as a small controlled example before altering a complicated illustration.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 140" width="400" height="280">
  <title>A blue rectangular frame with a transparent centre</title>
  <path d="M10 10 H190 V130 H10 Z
           M60 45 H140 V95 H60 Z"
        fill="#2f6fed" fill-rule="evenodd" />
</svg>

Use nonzero when winding direction matters

nonzero is the default rule. It accounts for the direction of boundary crossings rather than only their number. Nested boundaries drawn in the same direction can therefore remain filled. Reversing the inner boundary allows the contributions to cancel, leaving the centre outside the shape.

In the example above, change only fill-rule to nonzero. The centre fills. Then replace the inner subpath with M60 45 V95 H140 V45 Z. This traces the same inner rectangle in the opposite direction, so the hole returns. You have changed traversal direction, not the rectangle's location.

The MDN fill-rule reference includes examples of both rules. Neither rule is universally better: choose the one that matches how your compound geometry should be interpreted.

Check separate objects before changing attributes

If a supposed cutout is a separate white shape placed over a coloured object, it is a painted cover, not transparency. It may look correct on a white page and appear as a white patch on a dark background. Temporarily changing the page background is a quick way to reveal that difference.

Inspect the source and layer structure in SVG Vector Lab. Determine whether the opening is an inner subpath, an overlapping object, a clip or a mask. Preserve the original before restructuring it. The clipping and masking guide is the appropriate next step when the intended effect concerns several objects rather than the fill of one path.

Inspect CSS and inherited values

A presentation attribute can be overridden by a CSS declaration. If changing fill-rule="evenodd" appears to do nothing, inspect rules applied to the path, its classes and ancestors. MDN notes that the CSS property takes priority when both a corresponding CSS property and presentation attribute are supplied.

For diagnosis, reduce the document to the shape and the styles it needs. Keep the path data unchanged while you compare the two fill rules. Changing the geometry, fill, stylesheet and grouping simultaneously makes it much harder to identify which change affected the hole.

Clipping uses the related clip-rule property on the shapes defining the clip. Do not assume a fill-rule change on the painted object fixes a clip path. Check the rule at the actual definition, then return to the complete document and verify references.

Verify the exported result on more than one background

Download an SVG checkpoint and reopen that exact file. Test on a light background and a dark or coloured background so that genuine transparency is distinguishable from a painted cover. If you also export PNG, inspect the chosen background option and verify the raster result separately.

A fill-rule adjustment should not require changing the viewBox or moving control points. If the drawing becomes cropped or displaced, inspect those independent settings. Keep an editable copy so a later export or optimization step can be compared against the intended source.

1. Identify the shape that owns the hole.
2. Confirm that its inner boundary is a subpath when a compound path is intended.
3. Compare evenodd and nonzero without changing geometry.
4. Check winding direction, CSS overrides and clipping definitions.
5. Reopen the exported SVG and inspect transparency.

This example and the linked specifications were reviewed September 8, 2026. A successful rendering check confirms this drawing's output; it does not prove that every importer preserves every SVG feature.