SVG fill-opacity Attribute Last Updated : 31 Mar, 2022 Improve Improve Like Article Like Save Share Report The fill-opacity attribute is a presentation attribute defining the opacity of the paint applied to a shape. Syntax: fill-opacity="colour" Attribute Values: decimal: Decimal value at which we want to make our element opaque. percentage: Percentage at which we want to set the fill-opacity attribute. We will use the fill-opacity attribute for setting the opacity of fill-color. Example 1: <!DOCTYPE html> <html> <body> <svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="35" fill="green"/> <circle cx="150" cy="50" r="35" fill="green" fill-opacity="0.7" /> </svg> </body> </html> Output: Example 2: <!DOCTYPE html> <html> <body> <svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="40" fill="black"/> <circle cx="150" cy="60" r="40" fill="black" fill-opacity="25%" /> </svg> </body> </html> Output: Like Article Suggest improvement Previous SVG fill Attribute Next SVG filter Attribute Share your thoughts in the comments Add Your Comment Please Login to comment...