SVG Fill

Fill Example
Fill and Stroke Example
fill-opacity
fill-rule

Jakob Jenkov
Last update: 2014-06-15

The fill of an SVG shape defines the color of the shape inside its outline. The surface of the SVG shape, in other words. The fill is one of the basic SVG CSS properties you can set for any SVG shape.

Fill Example

The fill of an SVG shape is the filling inside the outline of the shape. Here is an SVG fill example:

<circle cx="50" cy="50" r="25"
        style="stroke: none; fill: #0000ff;" />

This example defines a circle with a blue (#0000ff) fill color and no stroke color. Here is the resulting image:

Fill and Stroke Example

You can combine SVG stroke and fill colors for SVG shapes. Here is an SVG stroke and fill example:

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: #3333ff;" />

This example defines a circle with a darker blue (#000066) stroke color, and a lighter blue (#3333ff) fill color. Here is the resulting image:

fill-opacity

The SVG fill-opacity CSS property is used to set the opacity of the fill color of a shape. The fill-opacity takes a decimal number between 0 and 1. The closer to 0 the value is, the more transparent the fill is. The closer to 1 the value is, the more opaque the fill is. The default fill-opacity is 1, meaning the fill color is fully opaque.

Here is an SVG fill-opacity example containing two circles with different fill-opacity:

<text x="22" y="40">Text Behind Shape</text>

<circle cx="50" cy="50" r="25"
        style="stroke: none; fill: #0000ff;
               fill-opacity: 0.3;  " />
<circle cx="120" cy="50" r="25"
        style="stroke: none; fill: #0000ff;
               fill-opacity: 0.7;  " />

Here is the resulting image.

Notice how the text behind the right circle is less visible than behind the left circle. That is because the right circle has higher fill-opacity than the left.

fill-rule

The fill-rule determines how complex shapes are filled. There are two different values that fill-rule can take. These are:

nonzero
evenodd

In general the two values are rules for determining what is inside and outside of a shape. Only the inside is filled. For a circle this is simple, but for more complex shapes this is not so easy. Look at this <path> example:

<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
         style="stroke: #000000;
         fill: #6666ff;
         fill-rule: nonzero;
      " />

<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
         style="stroke: #000000;
         fill: #6666ff;
         fill-rule: nonzero;" />

These two path examples consist of 8 lines each, drawn in diamond shape, with a smaller diamond inside the bigger. In the left path, the inner diamond is drawn from left towards right (clockwise). In the right path, the inner diamond is drawn from right to left (counter-clockwise). Here is the resulting image when drawn using the non-zero fill-rule:

As you can see, the nonzero rule considers the inner diamond inside or outside the shape depending on the direction the inner diamond is drawn. The nonzero rule for determining if a point is inside or outside of a shape is:

Draw a line (ray) from the point to infinity in any direction. For each time a path in the shape crosses this ray, add 1 to a counter if the path crosses the ray from left to right, and subtract 1 from the counter if the path crosses the ray from right to left. Having counted all the paths that cross the ray, if the total count is zero then the point is considered outside the path. If the total count is nonzero, then the point is considered inside the path.

Here is the same path examples but using the fill-rule evenodd:

<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" />

<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" />

Here is the resulting image:

The evenodd rule for determining if a point is inside or outside the shape is:

Draw a line (ray) from the point to infinity in any direction. For every time the path crosses the ray, increment a counter. If the total count is an even number, the point is outside. If the total count is an odd number, the point is inside the shape.

Next: SVG Viewport and View Box

Tweet
	Jakob Jenkov