Creating a hole in an SVG shape is achieved by using the fill-rule attribute set to evenodd or nonzero on a single path containing multiple subpaths. This tells the renderer that inner contours should be treated as transparent, effectively punching out the center of your graphic without needing complex masking techniques.
Understanding Fill Rules
The core mechanism for creating holes in Scalable Vector Graphics relies on how the browser interprets the interior of a path. By default, most simple shapes are filled entirely. However, when you define a single path with multiple distinct segments, you need to instruct the rendering engine on which areas constitute "inside" and which constitute "outside." This is controlled by the fill-rule property.
There are two primary values for this attribute: nonzero and evenodd. The nonzero rule is the default behavior. It determines fill status by drawing a ray from a point inside the shape to infinity and counting the intersections with path edges. If the count is odd, the point is filled; if even, it is not. The evenodd rule simply checks if the number of intersections is odd or even, regardless of direction. For most standard geometric holes, either works, but evenodd is often more intuitive for nested shapes.
Why Separate Paths Fail
A common misconception is that you can create a hole by layering two separate elements, such as a white circle over a black square. While this visually mimics a hole, it does not actually remove the underlying pixels from the first shape. This approach fails when you need to export the graphic as a stencil, use it for CSS clip-paths, or apply filters that rely on the alpha channel of the original shape. To truly create a hole, the geometry must be part of a single contiguous vector object.
Implementing the Solution
To fix this issue, you must combine your outer boundary and your inner cutout into one <path> element. You do this by chaining multiple M (move) commands within the d attribute. Each segment defines a closed loop. When combined with the correct fill rule, the renderer treats the second loop as a void.
<svg width="100" height="100">
<path d="M10,10 H90 V90 H10 Z M30,30 H70 V70 H30 Z"
fill="blue"
fill-rule="evenodd" />
</svg>In this example, the first command draws a large square. The second command draws a smaller square inside it. Because fill-rule="evenodd" is applied, the area covered by the second square is excluded from the fill, resulting in a blue frame with a transparent center. If you omit the fill-rule attribute, some renderers may default to nonzero, which might still work depending on the winding order of your points, but explicitly setting it ensures cross-browser consistency.
Common Pitfalls
Even with the correct syntax, developers often encounter issues where the hole does not appear. One frequent cause is incorrect winding order. In SVG, the direction in which you trace a path matters for the nonzero rule. If both loops are drawn clockwise, they might cancel each other out or behave unpredictably. Ensuring consistent orientation or switching to evenodd usually resolves these edge cases.
Another issue arises when using tools that export SVGs automatically. Some design software exports overlapping shapes as separate <g> groups rather than merging them into a single path. If you see multiple <path> tags instead of one, you will need to manually merge them or use the fill-rule on each individual path if they are meant to be independent. However, for a true hole, merging is essential.
Advanced Techniques
If you cannot merge paths due to dynamic data constraints, you might consider using masks. An SVG mask uses another graphic to define transparency. While powerful, this adds complexity and DOM nodes. For static designs or simple UI icons, the single-path method is superior because it is cleaner, lighter, and universally supported across all modern browsers and older versions of Internet Explorer.
For more details on general code troubleshooting strategies that apply to vector graphics debugging, you might find Odin Project: Troubleshooting Code That Doesn't Work helpful. Additionally, if you are dealing with complex path generation logic, reviewing Troubleshooting SVG Path Creation: Why Can't I Create a Hole? can provide deeper insights into path data structures.
Frequently Asked Questions
Can I use CSS to create a hole in an SVG?
No, CSS cannot modify the internal geometry of an SVG path. You must define the hole in the d attribute of the path itself. CSS can only control the appearance, such as color or opacity, of the already-defined shape.
What happens if I forget the fill-rule attribute?
Without the fill-rule attribute, the browser defaults to nonzero. Depending on the winding direction of your subpaths, the hole might not render correctly, or the entire shape might become transparent. Explicitly setting it prevents ambiguity.
Is there a performance difference between masks and fill-rule?
Yes, using fill-rule on a single path is significantly more performant than using masks. Masks require additional rasterization or compositing steps in the browser's rendering pipeline, whereas a single path with a fill rule is processed directly as vector geometry.
Why does my hole disappear when I zoom in?
This is rarely a geometry issue but often a rendering artifact. Ensure your SVG has proper viewBox attributes. If the hole appears at specific zoom levels, check if anti-aliasing is causing thin lines to vanish. Using shape-rendering="crispEdges" can sometimes help, but usually, ensuring precise coordinate alignment fixes the issue.
Can I create holes in text using this method?
Yes, text elements can be converted to paths. Once converted, you can treat the letterforms like any other shape, adding subpaths to punch holes through letters like 'O' or 'A'. This is commonly used in logo design to create intricate cutouts.