opacity vs fill-opacity in svg

Question

What is the difference in opacity vs fill-opacity in SVG?

I referred the docs for fill-opacity and opacity but I am confused what is meant by

Answer 1

The difference is exactly what the name indicates :). fill-opacity is applicable only to the fill of the element (or in other words, just its background), stroke-opacity is applicable only to the stroke whereas the opacity is applicable to both.

The opacity is kind of a post-processing operation. That is, the element (or group) as a whole (the fill + stroke) is rendered and then the transparency is adjusted based on the opacity setting whereas the fill-opacity and stroke-opacity are intermediate steps, so the transparency is individually added to the stroke and fill. So when stroke-opacity and fill-opacity are used together, the result would still not be the same as using opacity (because the transparency on the fill will let the fill color show through wherever they overlap). You can see the difference visually in the first two elements below.

Also as indicated by Robert (in comments), fill-opacity doesn't apply to image whereas opacity does work.

svg {
  width: 100vw;
  height: 100vh;
}
body {
  background: url(http://lorempixel.com/600/600/nature/1);
  height: 100vh;
}
polygon {
  stroke-width: 3;
}

---

In the CSS world you can think of it as something like in the below snippet. (Note that I am not saying they are equal, there are subtle differences between SVG and CSS. It is just an attempt to explain what those SVG attributes would translate to in 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;
}