One path, several loops
A path can contain more than one subpath: the letter “O” is two loops, a die-line with a window is two loops, a five-pointed star drawn in one continuous stroke is one loop that crosses itself. In every case the renderer has to answer a question that is not obvious: for any point on the page, is it inside the shape or outside it?
There are two answers in general use, and they disagree.
Non-zero winding
Fire an imaginary ray from the point out to infinity. Every time the ray crosses a subpath, add 1 if that subpath is running left-to-right across the ray, subtract 1 if it is running right-to-left. If the total is anything other than zero, the point is inside.
The word doing the work is direction. Two circles drawn the same way (both clockwise) give a winding number of 2 in the inner region, which is not zero, so it fills. You get a disc. Reverse the inner circle and the counts cancel to zero: a hole.
Even-odd
Count crossings and ignore direction. Odd is inside, even is outside. Two nested circles always give 2 crossings in the middle, which is even, which is outside. You always get a hole.
Why this matters more than it sounds
Take a five-pointed star drawn as one self-intersecting path, the one you draw without lifting the pen. The central pentagon has a winding number of 2.
- Under non-zero, 2 ≠ 0, so the pentagon fills. You get a solid star.
- Under even-odd, 2 crossings is even, so the pentagon is outside. You get a star with a pentagonal hole in the middle.
Same geometry, same file, two completely different printed results. Neither program is broken.
Both SVG and PDF default to non-zero. In PDF the two operators are literally f and f*; in SVG it is fill-rule="nonzero" or "evenodd". Illustrator’s default is non-zero; Inkscape’s default is non-zero; CorelDRAW’s is even-odd for some legacy objects, which is one reason CDR imports fill strangely.
The fixes, in each program
- Reverse the inner subpath. Inkscape: select the node-tool, click a node on the inner loop, Path ▸ Reverse (Shift+R). Illustrator: Attributes panel ▸ Reverse Path Direction. CorelDRAW: Shape tool, select a node on the subpath, then the reverse button on the property bar.
- Switch the object to even-odd. Inkscape: Fill & Stroke ▸ the two small buttons beside the fill swatch. Illustrator: Attributes panel ▸ Even-Odd Fill Rule.
Reversing is the more portable fix, because direction is stored in the geometry and travels with the file. The fill rule is an attribute that some importers drop.
See the direction
You cannot fix what you cannot see. Turn on direction markers:
- Inkscape: node tool, then Edit ▸ Preferences ▸ Tools ▸ Node ▸ show path direction on outlines.
- Illustrator: View ▸ Show Edges plus the Document Info panel, or select the path and look at where the start point sits.
- Any program: apply a dashed stroke with an arrow marker at the end. Crude and instant.
Compound path, group, clip: three different things
People use these interchangeably and they are not.
- A compound path is one object made of several subpaths, sharing one fill and one stroke, and subject to a winding rule. This is what a letter “O” or a die-line window is. Make one: Ctrl+8 in Illustrator, Path ▸ Combine (Ctrl+K) in Inkscape, Object ▸ Combine (Ctrl+L) in CorelDRAW.
- A group is several independent objects moved together. Each keeps its own fill. Grouping two circles never produces a hole.
- A clip hides everything outside a shape. It does not remove it, which is the subject of the next lesson.
The practical consequence: if you send a die-line to a cutting machine as a group of two circles, the machine cuts both outlines and the middle falls out. As a compound path with the inner loop reversed, it is one object with a hole, and the operator’s software reads it as one closed cut with an interior.
Where you will meet this again
A logo with counters that fill solid after import. A map where the lakes print as land. An envelope die-line whose window prints as a block. A vinyl cut where the inside of every “e” is cut as a separate piece. All the same rule.
Every lesson here is open. Your progress is recorded once you pass the Editing an Image exam.
Check your understanding
A five-pointed star is drawn as a single path without lifting the pen, so the path crosses itself and the central pentagon has a winding number of 2. It renders as a solid star in one application and as a star with a pentagonal hole in another. Why?
Pick the one you would defend. Your answer stays private.
Stuck on something?Ask Nazia, your AI tutor