Even-Odd vs Non-Zero Fill Rules for SVG Icons

You draw a ring: a big circle, a smaller circle inside it, Path -> Make Compound Path. In IconVectors it looks right. Then the same file shows up as a solid disc in a browser, or in an Android build, and the hole is gone. Nothing was lost. The renderer answered the question "what is inside this shape?" with a different rule than the one you had in mind.

SVG has two such rules, nonzero and evenodd, and IconVectors 2.0+ lets you pick one per compound path with Path -> Fill Rule. This article explains what the two rules do, which one to reach for in icon work, and where the setting lives, with examples you can paste into a file.

How a renderer decides what is inside

For any point, imagine a ray from that point out to infinity and count the edges it crosses on the way. The evenodd rule counts crossings: an odd number means inside, an even number means outside. A point inside both circles of a ring crosses two edges on its way out, two is even, so the point is a hole. The direction the circles were drawn in plays no part.

The nonzero rule, which is what SVG uses when the attribute is missing, counts direction. Each crossing adds one for an edge running one way and subtracts one for an edge running the other way, and the point is inside when the total is anything but zero. Two circles drawn in the same direction give a total of two inside the small circle: still inside, no hole, solid disc. Draw the inner circle the other way round and the total is one minus one, zero, and the hole comes back.

The three shapes above are live SVG, not pictures. The first two share one path: an outer circle of radius 10 and an inner circle of radius 6, both drawn clockwise (the arc sweep flag is 1 in both), and only fill-rule differs.

<!-- both circles clockwise; nonzero fills the middle, evenodd leaves it open -->
<path fill="currentColor" fill-rule="evenodd"
      d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z
         M12 6 A6 6 0 1 1 12 18 A6 6 0 1 1 12 6 Z"/>

The third shape flips the inner circle to counterclockwise (sweep flag 0). Now the winding count inside it is zero, so nonzero produces the ring too, and either rule gives the same picture:

<!-- inner circle counterclockwise; both rules render a ring -->
<path fill="currentColor" fill-rule="nonzero"
      d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z
         M12 6 A6 6 0 1 0 12 18 A6 6 0 1 0 12 6 Z"/>

Which rule to pick for icons

For holes and cutouts, evenodd is the predictable choice. It gives you the hole whatever direction the sub-paths were drawn in, which matters when the paths came from a font, from a bitmap trace, from another tool, or from a boolean operation you did not think about at the time. Counters (the inside of an O, the middle of a ring, the eye of a needle) are the classic case.

nonzero earns its place when sub-paths overlap on purpose and you want the overlap to stay solid: a badge built from two overlapping discs, or a shape assembled from pieces that happen to cross. Under evenodd every overlap of two filled pieces turns into a hole, which is rarely what you meant. If the goal is one solid shape, though, a boolean union is the better tool than a fill rule, because it also removes the overlapping geometry.

One rule per compound path is the whole vocabulary. When one shape needs both behaviors, split it into two compound paths.

Setting the fill rule in IconVectors 2.0+

Select the shapes and press Ctrl+Q (Path -> Make Compound Path) to turn them into one compound path; Shift+Ctrl+Q (Path -> Release Compound Path) takes it apart again. With the compound path selected, choose Path -> Fill Rule -> Non-Zero or Path -> Fill Rule -> Even-Odd. The rule you pick also becomes the default for the next compound paths you create, so set it once for a project and forget it.

The attribute round-trips. IconVectors reads fill-rule when it opens an SVG and writes it back when it saves or exports, and the Source Code window (F3) shows it on the path element as you switch, which is a quick way to check what other tools will see. All sub-paths share one fill and one stroke, and the Path Edition Tool still edits the anchors of each sub-path on its own.

When a fill rule is not the answer

A fill rule is a rendering instruction; the geometry underneath does not change, and every consumer of the file has to honor the instruction. If the hole needs to exist as geometry, because a downstream format ignores fill rules or the shape will get a stroke later, cut it out instead: keep the outer and inner shapes as separate paths and use the boolean subtract operation, which produces a single outline with the hole baked in. The trade-off is that a baked shape is harder to adjust later. The boolean operations tutorial walks through union, subtract, intersect and exclude.

And when a compound path does something odd, release it with Shift+Ctrl+Q, look at the pieces, fix the one that is wrong, and compound them again.

Fill rules in other targets

The SVG attribute is fill-rule with the values nonzero and evenodd, and that is what IconVectors writes. Other formats spell the same idea differently: Android VectorDrawable has android:fillType with nonZero and evenOdd, and XAML geometry has a FillRule of EvenOdd or Nonzero. IconVectors generates those targets from the same document, so before you rely on a hole in one of them, open the matching tab in the Source Code window and check what came out rather than assuming.

To see the three examples rendered live, download the IconVectors 2.00 trial for Windows, paste the ring markup into a new document, and switch Path -> Fill Rule while watching the canvas.