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

Related Articles

SVG opacity Attribute

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

The opacity attribute specifies the transparency of an object or of a group of objects.

Syntax:

opacity= "opacity"

Attribute Values:

  • decimal: The decimal at which we want to make our element opaque

We will use the opacity attribute for setting the opacity of the element.

Example 1: In this example we will use the opacity attribute for setting the opacity of circle element.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 700 350" 
        xmlns="http://www.w3.org/2000/svg">
          
        <circle cx="50" cy="50" 
            r="40" fill="green" />
          
        <circle cx="150" cy="50" r="40" 
            fill="green" opacity="0.3" />
    </svg>
</body>
  
</html>

Output:

Example 2: In this example we will use the opacity attribute for setting the opacity of rectangle element.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 700 350" 
        xmlns="http://www.w3.org/2000/svg">
  
        <rect height="50" width="50" 
            fill="green" opacity="0.3" />
    </svg>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Last Updated : 31 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials