The difference is exactly what the name indicates :). fill-opacity applies only to the fill element (or, in other words, only its background), stroke-opacity applies only to stroke , while opacity applies to both.
opacity is a post-processing operation. That is, the element (or group) as a whole (fill + stroke) is displayed, and then the transparency is adjusted based on the opacity parameter, while fill-opacity and stroke-opacity are intermediate steps, so transparency is individually added to the stroke and fill. Therefore, when stroke-opacity and fill-opacity are used together, the result will still not be the same as using opacity (since transparency on the fill will allow the fill color to show wherever they overlap). Visual visualization can be seen in the first two elements below.
Also, as pointed out by Robert (in the comments), fill-opacity does not apply to image , while opacity works.
svg { width: 100vw; height: 100vh; } body { background: url(http://lorempixel.com/600/600/nature/1); height: 100vh; } polygon { stroke-width: 3; }
<svg viewBox='0 0 40 190'> <polygon points='10,10 30,10 30,30 10,30' fill='steelblue' stroke='crimson' opacity='0.5' /> <polygon points='10,40 30,40 30,60 10,60' fill='steelblue' stroke='crimson' fill-opacity='0.5' stroke-opacity='0.5' /> <polygon points='10,70 30,70 30,90 10,90' fill='steelblue' stroke='crimson' fill-opacity='0.5' /> <polygon points='10,100 30,100 30,120 10,120' fill='steelblue' stroke='crimson' stroke-opacity='0.5' /> <image xlink:href='http://lorempixel.com/100/100/nature/3' x='8.5' y='130' width='23' height='23' stroke='crimson' opacity='0.5' /> <image xlink:href='http://lorempixel.com/100/100/nature/3' x='8.5' y='160' width='23' height='23' stroke='crimson' fill-opacity='0.5' /> </svg>
In the CSS world, you can think of it as something like the snippet below. (Note that I'm not saying they are equal, there are subtle differences between SVG and CSS . This is just an attempt to explain what these SVG attributes translate into CSS.)
div { height: 20vh; width: 20vh; margin: 30px auto; font-family: Verdana; font-size: 2vw; } div:nth-of-type(1) { opacity: 0.5; background: rgba(70, 130, 180, 1); border: .35vw solid rgba(220, 20, 60, 1); } div:nth-of-type(2) { background: rgba(70, 130, 180, 0.5); border: .35vw solid rgba(220, 20, 60, 1); } div:nth-of-type(3) { background: rgba(70, 130, 180, 1); border: .35vw solid rgba(220, 20, 60, 0.5); } body { background: url(http://lorempixel.com/600/600/nature/1); height: 100vh; }
<div></div> <div></div> <div></div>