The fill attribute can be used in two things. For shapes and text, it's a presentation attribute that defines the color used to paint the element. For animation it defines the final state of the animation.
Syntax:
fill= "colour"
Attribute Values:
- paint: The color in which we want to paint the element.
We will use the fill attribute for setting the color of the element.
Example 1: In this example, we will use the fill attribute for setting the color of rect element.
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 700 350"
xmlns="http://www.w3.org/2000/svg">
<rect height="70" width="60"
fill="green" />
</svg>
</body>
</html>
Output:
Example 2: In this example, we will use the fill attribute for setting the color of circle element.
<html>
<body>
<svg viewBox="0 0 700 350"
xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50"
r="40" fill="green" />
</svg>
</body>
</html>
Output: