Understanding the SVG fill-rule Property
The SVG fill property paints the interior of a graphic with a solid color, gradient, or pattern. Using SVG inline enables full control of such properties on elements throughout the SVG document fragment within HTML.
In most cases what is considered to be the “inside” of a graphic is straightforward. However, when the graphic involves more complex compound paths such as those that intersect or enclosed shapes, what defines the inside of the shape becomes less clear.
The fill-rule property can then be included to further define our intentions for what is to be considered the inside of our complete shape.
This article will review the fill property and then describe the algorithm rules associated with fill-rule. Understanding the reasoning behind these rules can help eliminate any surprises when rendering your graphics in the browser.
The fill Property
Before jumping into fill-rule it’s important to understand the function of the fill property in general.
fill paints the interior of a specific graphical element, and is included within the code of the element to be filled. The interior of a shape is determined by examining all sub-paths and specifications spelled out within the fill-rule, and this space is then painted. “Paint” refers to the action of applying colors, gradients, or patterns to graphics through fill and/or stroke.
When filling a shape or path, fill will paint open paths as if the last point of the path connected with the first, even though a stroke color would not render on this section of the path.
To demonstrate the effect of fill on an open path let’s take a look at two basic SVG polylines:
See the Pen SVG Polyline Fill Example by SitePoint (@SitePoint) on CodePen.
While the first polyline has a fill value of white, the second is painted with a solid yellow, allowing us to see that the paint server is assuming a connection between the first and last points on the path and filling in the “inside” of this path as a result.
The fill-rule Property
The fill-rule property indicates the algorithm to be used in determining what parts of the canvas are included inside more complex shapes.
The accepted values here are nonzero, evenodd, and inherit.
What exactly is going on behind the scenes with this property and how is it determining the “insideness” of the shape? This can be quite complex and not overly obvious, so we will review the algorithm used for each rule.
Value: nonzero
A value of nonzero determines the inside of a point on the canvas by drawing a line from the point in question through the shape in any direction. The areas where a segment of the shape cross this line are then examined and painted accordingly.
What is being considered as the shape’s “inside” is being determined by starting with a count of zero. One is then added each time a path segment crosses the line from left to right (clockwise) and one is subtracted each time a path segment crosses from right to left (counterclockwise).
Whether or not the interior path is drawn clockwise or counterclockwise will have a significant impact on the final count.
Once these crossings are counted and we are left with a result of zero, then the point is outside the path. If we are left with a number other than zero, the path is considered inside the shape.
The star and Sun images below consist of clockwise drawn paths and both have a fill-rule of nonzero:
See the Pen SVG clockwise nonzero fill-rule Example by SitePoint (@SitePoint) on CodePen.
The star is made up of one intersecting path and the image of the Sun consists of one long compound path. The “inside” of each shape is not initially clear and could vary depending on the author’s intentions. fill-rule permits for further clarification in these instances.
In the next example let’s take a closer look at what exactly is happening when the nonzero algorithm is being applied to similar graphics but the interior paths are drawn clockwise versus counterclockwise.
Both graphics consist of one unified path and the interior shape of the graphic on the right was drawn counterclockwise, changing the result of the algorithm:
See the Pen SVG counterclockwise nonzero fill-rule Example by SitePoint (@SitePoint) on CodePen.
The arrows in the diagrams below represent the direction in which the path was drawn:
Value: evenodd
A value of evenodd determines the inside of a point on the canvas by drawing a line from the area in question through the entire shape in any direction. The path segments that cross this line are then counted. If the final number is even, the point is outside; if it’s odd, the point is inside.
The star and Sun images below both have a fill-rule of evenodd:
See the Pen SVG clockwise evenodd fill-rule Example by SitePoint (@SitePoint) on CodePen.
As a comparison to nonzero, let’s take a closer look at what exactly is happening when this algorithm is being applied to these graphics when the interior paths are drawn clockwise versus counterclockwise.
See the Pen SVG counterclockwise evenodd fill-rule example by SitePoint (@SitePoint) on CodePen.
Given the specific algorithm of the evenodd rule, the drawing direction of the interior shape in question is irrelevant, unlike with nonzero, as we are simply counting the paths as they cross the line.
Conclusion
While the use of the fill-rule property is not always necessary, gaining insight into its basic behavior ensures more thorough control when filling less straightforward graphics, rendering them exactly as intended on your screen.
Understanding the algorithm being used within these rules aids in eliminating any unexpected outcomes when painting SVG.
