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.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

The fill-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
<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" style="fill-opacity: .25;" />
</svg>

Usage notes

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

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

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# FillOpacity

Browser compatibility

See also