SVG fill-rule: nonzero vs evenodd Explained

The SVG fill-rule attribute determines how the browser decides which areas of a complex, overlapping, or self-intersecting path lie “inside” the shape to receive a fill color and which areas lie “outside” to remain transparent. The two primary values for this attribute are nonzero and evenodd. While nonzero calculates fill status based on both the number of boundary crossings and the drawing direction (winding order) of the path segments, evenodd determines fill status solely by counting the total number of boundary crossings, ignoring path direction completely.

The nonzero Rule

The nonzero value is the default behavior in SVG. It uses the mathematical “non-zero winding rule” to establish whether a point is inside or outside a shape.

To determine if an enclosed region should be filled: 1. A ray is drawn from a point inside that region outward to infinity in any direction. 2. The algorithm tracks the path segments that cross this ray, starting with a count of zero. 3. Every time a path segment crosses the ray from left to right (clockwise relative to the point), the count increases by +1. 4. Every time a path segment crosses the ray from right to left (counter-clockwise relative to the point), the count decreases by -1. 5. If the final sum is anything other than zero (count !== 0), the region is considered inside and is filled. If the sum is zero (count === 0), the region is considered outside and remains transparent.

Because nonzero relies on segment direction, creating cutouts or holes (such as in a donut shape) requires the inner path to be drawn in the opposite direction of the outer path. If both subpaths are drawn in the same direction, the entire shape—including the center—will be filled.

The evenodd Rule

The evenodd value uses the “even-odd rule,” which is simpler and independent of path direction.

To determine if an enclosed region should be filled: 1. A ray is drawn from a point inside that region outward to infinity in any direction. 2. The algorithm counts the total number of path segments that the ray crosses, regardless of their direction. 3. If the total number of crossings is an odd number (1, 3, 5, etc.), the point is inside the shape and is filled. 4. If the total number of crossings is an even number (0, 2, 4, etc.), the point is outside the shape and remains transparent.

With evenodd, nested overlapping shapes alternate between filled and unfilled states automatically. A path drawn inside another path will always create a cutout or hole, regardless of whether it was drawn clockwise or counter-clockwise.

Key Differences Summary

• Path Direction Sensitivity: nonzero depends strictly on the direction the path vectors are drawn; evenodd completely ignores path direction.
• Creating Holes: Under nonzero, an inner cutout requires an opposite winding direction relative to the outer boundary. Under evenodd, any overlapping boundary automatically toggles the fill state from filled to unfilled.
• Complex Intersections: In self-intersecting shapes like a 5-pointed star drawn with a continuous line, nonzero will fill the entire star including the central pentagon, whereas evenodd will leave the central pentagon empty because rays cast from the center cross an even number of boundaries (two).