fill-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2020⁩.

Thefill-opacity attribute is a presentation attribute defining the opacity of the paint server (color,gradient,pattern, etc.) applied to a shape.

Note:As a presentation attribute,fill-opacity also has a CSS property counterpart:fill-opacity. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

Example

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">  <!-- Default fill opacity: 1 -->  <circle cx="50" cy="50" r="40" />  <!-- Fill opacity as a number -->  <circle cx="150" cy="50" r="40" fill-opacity="0.7" />  <!-- Fill opacity as a percentage -->  <circle cx="250" cy="50" r="40" fill-opacity="50%" />  <!-- Fill opacity as a CSS property -->  <circle cx="350" cy="50" r="40" /></svg>

Usage notes

Value	`[0-1]` \|<percentage>
Default value	`1`
Animatable	Yes

Note:SVG2 introduces percentage values forfill-opacity, however, it is not widely supported yet (SeeBrowser compatibility below) as a consequence, it is best practices to set opacity with a value in the range[0-1].