Opacity (SVG) | Frontend Practical Guide

Overview

The fill-opacity, and stroke-opacity SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`fill-opacity`	1	≤15	1	4	18	3.2
Other
`css.properties.stroke-opacity` The stroke-opacity CSS property defines the opacity of an SVG shape's stroke. The effect is identical to that of opacity, except it is applied only to the stroke, not to the entire element. If present, it overrides the element's stroke-opacity attribute.	1	≤15	1.5	4	18	3.2
`svg.global_attributes.fill-opacity` The fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to a shape.	≤80	≤80	1	≤13.1	≤80	≤13.4
`svg.global_attributes.stroke-opacity` The stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to the stroke of a shape.	≤80	≤80	1	≤13.1	≤80	≤13.4

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

circle {
  fill: blue;
  fill-opacity: 0.5;
}
path {
  stroke: red;
  stroke-opacity: 0.8;
}

A demo pattern for CSS fill-opacity.

A demo pattern for CSS stroke-opacity.

A demo pattern for overlapping transparency in CSS.

Using Opacity (SVG)
The fill-opacity, and stroke-opacity SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.