Custom coloring sheets: why an SVG center turns solid
If an enclosed opening in an SVG coloring sheet turns black, check the fill rule on the compound path. With two nested contours drawn in the same direction, evenodd leaves the center open, while nonzero fills it. The two files below let you compare that change without moving a single point.
Open and compare the same path twice
Both examples have the same 240 × 240 view box, black fill and one path containing two clockwise squares. The center pixel at (120, 120) is opaque black in the nonzero sample and transparent in the evenodd sample. A point between the squares, at (45, 45), is black in both. The fixtures isolate the fill rule; they are not finished gallery art.
How to check your own file
- Save a copy of the SVG and open it at its natural size. Find the region that should stay open.
- Check whether the outer and inner outlines are parts of one compound path. Two independent filled shapes can cover each other, so a fill rule alone may not fix that setup.
- For one compound path, compare the two fill rules, then inspect other holes and overlaps before keeping the change. Reopen the exported copy in your intended viewer.
For a broken contour that leaks when you use a paint bucket, see the outline gap check. Here both contours are closed; the question is how the renderer fills their interior. If you already have a PNG, compare the transparent and white background samples instead.
SVG fill questions
Why do the two files look different if the paths match?
They use different fill rules. For these two same-direction contours, nonzero paints the center and evenodd leaves it transparent.
Is evenodd always the right setting?
No. Overlaps can become holes under evenodd. Check the other parts of your drawing after changing it.
Can I fix an exported PNG by changing its fill rule?
No. A PNG stores pixels. Change the original vector path, then export a new PNG.
Reference: W3C SVG fill rules. These examples were checked in Chrome, not in a physical print or an external vector editor.