opacity

« SVG Attribute reference home

The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css opacity for further information.

Usage context

Categories Presentation attribute
Value <opacity-value> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
<opacity-value>
The uniform opacity setting to be applied across an entire object, as a <number>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

Example

SVG

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" />
</svg>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" opacity="0.25" />
</svg>

Result

Elements

The following elements can use the opacity attribute

See also

Document Tags and Contributors

 Contributors to this page: jalbertbowden, Jeremie
 Last updated by: jalbertbowden,