[filter-effects] SVG filter for invert not working properly

[blakegearin]

Hello, I noticed that the SVG filter for invert does not appear to be working properly.

<feComponentTransfer>
  <feFuncR type="table" tableValues="[amount] (1 - [amount])"/>
  <feFuncG type="table" tableValues="[amount] (1 - [amount])"/>
  <feFuncB type="table" tableValues="[amount] (1 - [amount])"/>
</feComponentTransfer>

An amount of 0.5 on black appears over-lightened (approximately #bcbcbc instead of #808080). Unless I'm mistaken that an amount of 0.5 is equivalent to a CSS filter's 50%...?

I found that using feFuncA instead of feFuncR, feFuncG, and feFuncB appears to work correctly. But that's because an opacity of 50% is functionally equivalent to an invert of 50%, so will only work on black.

Comparison:

<p>Original Color</p>
<div class="base"></div>
<p>CSS filter invert</p>
<div class="base" style="filter: invert(50%);"></div>
<p>SVG filter invert on W3</p>
<div class="base" style="filter: url(#w3-invert)"></div>
<svg>
  <filter id="w3-invert">
    <feComponentTransfer>
      <feFuncR type="table" tableValues=".5 .5"/>
      <feFuncG type="table" tableValues=".5 .5"/>
      <feFuncB type="table" tableValues=".5 .5"/>
    </feComponentTransfer>
</filter>
</svg>

<style>
.base {
  height: 100px; 
  width: 100px; 
  background-color: #000000;  
}
</style>

Image preview:

[blakegearin]

As a side note, it would be nice if this spec was consistently using [1 - amount] or (1 - [amount]) instead of both variations.

[blakegearin]

It appears you must specify sRGB to resolve this issue: <filter color-interpolation-filters="sRGB">...</filter>

[BigBadaboom]

Yes, that's correct. The SVG spec says that <filter> elements default to the linear colorspace. Whereas the CSS spec specifies that filter functions always operate in the sRGB colour space.

References:

https://www.w3.org/TR/SVG11/single-page.html#painting-ColorInterpolationFiltersProperty

color-interpolation-filters has an initial value of linearRGB

https://drafts.fxtf.org/filter-effects/#FilterProperty

color-interpolation-filters has no affect for Filter Functions. Filter

Functions must operate in the sRGB color space.

On Mon, 25 Jul 2022 at 17:46, Blake Gearin @.***> wrote:

It appears you must specify sRGB to resolve this issue: <filter color-interpolation-filters="sRGB">...

— Reply to this email directly, view it on GitHub https://github.com/w3c/fxtf-drafts/issues/462#issuecomment-1193607490, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGNEYC5EA6HC6S4BU4IP7LVVYS25ANCNFSM54QME5GQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[svgeesus]

An amount of 0.5 on black appears over-lightened (approximately #bcbcbc instead of #808080).

Which is why filter operations are carried out in linear-light sRGB, which is defined here:

https://drafts.csswg.org/css-color-4/#predefined-sRGB-linear

Whereas the CSS spec specifies that filter functions always operate in the sRGB colour space.

Which is dumb, and will need to be fixed at some point. The spec even implies at points that arithmetic operations will be linear:

Applies a linear multiplier to input image, making it appear more or less bright.

[svgeesus]

That wording was added in 2017.

The few tests for invert on WPT are kind of vague, eg this one whose reference also uses the invert() function!!

[mfreed7]

That wording was added in 2017.

The few tests for invert on WPT are kind of vague, eg this one whose reference also uses the invert() function!!

In my defense, that test compares backdrop-filter to filter to make sure they do the same thing. Using other filter functions such as blur for that causes flakiness due to sub-pixel stuff.