Open In App

SVG fill Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads