[filter-effects-1] Clarify equivalent markup for filter functions

[cdoublev]

Hello,

From the definition of saturate():

The markup equivalent of this function is given below.

The related markup:

<filter id="saturate">
  <feColorMatrix type="saturate" values="[amount]"/>
</filter>

But the result of this markup, will be different than saturate(amount) if the root <svg> doesn't set color-interpolation-filters to sRGB (default to linearRGB).

I suggest the following change (as well as for some/all of the other filter functions):

- The markup equivalent of this function is given below.
+ The markup equivalent of this function is given below, considering that `color-interpolation-filters` is set to `sRGB` on the SVG element.

Side note: for the reasons why they are not equivalent by default (which can be questionable), see #3131.

[pepkin88]

(which can be questionable)

I'd like to add a +1 to the questionability of that decision.
This thing bit me today, when I was investigating, why my filter: grayscale(1); produces such poor results.
After some digging, I learned about gamma correction, and ended up with something like this:
filter: url('/gamma.svg#pre') grayscale(1) url('/gamma.svg#post');
which finally looks normal.

Is there still a chance to fix those color filter functions?

[svgeesus]

Yes, clearly all filter examples should state if they depend on a non-initial value of color-interpolation-filters.

[svgeesus]

In general, the fact that the predefined filters work on gamma-encoded space is an unfortunate bug which probably can't be changed now for Web compat, but should never have arisen in the first place. SVG makes the default filter processing linear-light for a reason.

[pepkin88]

Yes, clearly all filter examples should state if they depend on a non-initial value of color-interpolation-filters.

This parameter can just be included in the svg examples:

<filter id="saturate" color-interpolation-filters="sRGB">
  <feColorMatrix type="saturate" values="[amount]"/>
</filter>

[pepkin88]

SVG makes the default filter processing linear-light for a reason.

Yesterday I found out, that this is currently not the case in Chromium browsers (at least for filter: url('some.svg#filter'); stuff), maybe because of #3131, but I guess I'll post a bug report there.

[svgeesus]

In general the descriptions of the predefined filters are under-specified and under-tested.

[cdoublev]

Yesterday I found out, that this is currently not the case in Chromium browsers (at least for filter: url('some.svg#filter'); stuff)

// https://.../filter.html
<svg viewBox="0 0 100 100" color-interpolation-filters="sRGB">
  <defs>
    <filter id="filter">
      <feColorMatrix type="saturate" values="0.5" />
    </filter>
    <rect id="object" width="40%" height="40%" fill="red" />
  </defs>
  <use id="a" href="#object" filter="url(#filter)" />
  <use id="b" href="#object" x="50%" style="filter: url(#filter);" />
  <use id="c" href="#object" y="50%" filter="url(https://.../filter.svg#filter)" />
  <use id="d" href="#object" x="50%" y="50%" style="filter: url(https://.../filter.svg#filter);" />
</svg>

// https://.../filter.svg
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="filter">
    <feColorMatrix type="saturate" values="0.5" />
  </filter>
  <rect id="object" width="40%" height="40%" fill="red" />
</svg>

In Chrome v88, I'm seeing #filter applications (attribute and CSS) on #a and #b processed with sRGB color interpolation, or linearRGB (default) if color-interpolation-filters="sRGB" is removed. #c and #d are blank.

Related issue SVG (filter | fill | stroke | clip-path | mask | marker-*) from external files not applied: https://bugs.chromium.org/p/chromium/issues/detail?id=109212

[svgeesus]

In Chrome v88, I'm seeing #filter applications (attribute and CSS) on #a and #b processed with sRGB color interpolation, or linearRGB (default) if color-interpolation-filters="sRGB" is removed

OK, that is correct.

[pepkin88]

Hmm, I meant something different, where you use filter: url(...); but for a regular html element, which not inside an svg with color-interpolation-filters="sRGB".

Here's a demo/test: https://pepkin88.me/link/chromium-filter-bug/

On a Chromium browser (Chrome Canary v90) I have this:

But on Firefox v84 I have this, as it should be:

[cdoublev]

Oh ok. I can see the same results as with your pngs in Chrome v88, which means it supports referencing a filter from an external file via a CSS property applied on a HTML (vs. a SVG element) and as you correctly pointed out, it incorrectly uses sRGB as the default color interpolation.

[SebastianZ]

In general, the fact that the predefined filters work on gamma-encoded space is an unfortunate bug which probably can't be changed now for Web compat, but should never have arisen in the first place. SVG makes the default filter processing linear-light for a reason.

Worth mentioning that at https://wiki.csswg.org/ideas/mistakes?

Sebastian

[svgeesus]

It's not really a design mistake - more that the definition of the predefined filters was too terse. It was written by SVG people with one set of assumptions, and interpreted by HTML people wit different sets of assumptions and less computer graphics background.