Skip to content
Related Articles

Related Articles

SVG fill Attribute

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 31 Mar, 2022

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!