The CSS fill property is used to define the color inside the graphical elements of an SVG (Scalable Vector Graphics). It specifies the fill color for shapes such as circles, paths, and rectangles.
Syntax
fill: <paint>Property Values
- paint: It is used to set the color of the fill property. This paint be defined using color names, hex, rgb or hsl values. The default value is black. It can also be used with patterns using the url() function.
Here are examples of the CSS fill property:
Example 1: Color Fill Using CSS fill Property
This example demonstrates how to apply different fill colors to SVG shapes (circles) using CSS. Various color formats such as color names, hex values, RGB, and HSL are used to fill each circle with a unique color.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | fill Property
</title>
<style>
.opacity1 {
/* using color names */
fill: green;
}
.opacity2 {
/* using hex values */
fill: #ff0000;
}
.opacity3 {
/* using rgb values */
fill: rgb(0, 0, 128);
}
.opacity4 {
/* using hsl values */
fill: hsl(24, 100%, 60%);
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>CSS | fill</b>
<div class="container">
<svg height="250px"
width="600px"
xmlns="https://www.w3.org/2000/svg"
version="1.1">
<circle class="opacity1" cx="100" cy="100" r="50" />
<circle class="opacity2" cx="250" cy="100" r="50" />
<circle class="opacity3" cx="400" cy="100" r="50" />
<circle class="opacity4" cx="550" cy="100" r="50" />
</svg>
</div>
</body>
</html>
Output:
Example 2: Pattern Fill Using CSS fill Property
This example illustrates how to use patterns to fill SVG shapes. Two circles are filled with different patterns—one with a circular pattern and the other with a rectangular pattern—using the url() function to reference the defined patterns.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | fill property
</title>
<style>
.opacity1 {
fill: url(#pattern1);
}
.opacity2 {
fill: url(#pattern2);
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | fill
</b>
<div class="container">
<svg height="250px"
width="600px"
xmlns="https://www.w3.org/2000/svg"
version="1.1">
<defs>
<pattern id="pattern1"
viewBox="0, 0, 10, 10"
width="10%" height="10%">
<circle r="10" />
</pattern>
<pattern id="pattern2"
viewBox="0, 0, 10, 10"
width="10%" height="10%">
<rect height="5"
width="5"
fill="green" />
</pattern>
</defs>
<circle class="opacity1" cx="100" cy="100" r="50" />
<circle class="opacity2" cx="250" cy="100" r="50" />
</svg>
</div>
</body>
</html>
Output:
Supported Browsers
The browsers supported by fill property are listed below:
Note: Ensure your SVG elements are properly structured, as browser versions may handle certain SVG features differently.