Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

SVG fill Attribute

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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
Last Updated : 31 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials