fill

The fill property in CSS is for filling in the color of a SVG shape.

.eyeball {
  fill: red;
}

Remember:

• This will override a presentation attribute <path fill="#fff" ... />
• This will not override an inline style e.g. <path style="fill: #fff;" ... />

Values

The fill property can accept any CSS color value.

• Named colors — orange
• Hex colors — #FF9E2C
• RGB and RGBa colors — rgb(255, 158, 44) and rgba(255, 158, 44, .5)
• HSL and HSLa colors — hsl(32, 100%, 59%) and hsla(32, 100%, 59%, .5)

As a bonus, fill also accepts the patterns of SVG shapes that are defined inside of a defs element:

.module {
  fill: url(#pattern);
}

See the Pen fill property by CSS-Tricks (@css-tricks) on CodePen.

A Use Case

A common use case for fill is changing the color of an SVG on hover, much like we do with color when styling link hovers.

.icon {
  fill: black;
}

.icon:hover {
  fill: orange;
}

See the Pen fill property by CSS-Tricks (@css-tricks) on CodePen.

Another Use Case

The fill property is one of many reasons SVG is a much more flexible option than typical image files. Let’s take icons, as an example.

We might have the same set of icons but in two different color schemes. Typical image files (such as JPG, PNG and GIF) would require us to make two versions of each icon — one for each color scheme.

SVG, on the other hand, allows us to paint the icons in using the CSS fill property:

.icon {
  fill: black;
}

.icon-secondary {
  fill: orange;
}

Now we can repurpose the same SVG file for multiple scenarios by changing the class name of the path or shape:

See the Pen fill property by CSS-Tricks (@css-tricks) on CodePen.

More Information

• SVG 1.1 Spec
• MDN on Fills and Strokes
• Cascading SVG Fill Color
• SVG Fill Patterns by Jacob Jenkov

Browser Support