svg feComponentTransfer linear function

Question

The SVG feComponentTransfer linear function isn't working as I expect it to. A slope of -1 and intercept of 1 applied to a grayscale image should invert the image: black -> white, white-> black, 25% gray -> 75% gray, 50% gray unchanged, and so on.

My expectation is based on http://www.w3.org/TR/filter-effects/#feComponentTransferElement, which says "C' = slope * C + intercept" where "C is the initial component (e.g., ‘feFuncR’), C' is the remapped component; both in the closed interval [0,1].".

The following filter

<filter id="linear">
  <feComponentTransfer>
    <feFuncR type="linear" slope="-1" intercept="1" />
    <feFuncG type="linear" slope="-1" intercept="1" />
    <feFuncB type="linear" slope="-1" intercept="1" />
  </feComponentTransfer>
</filter>

maps black to white and white to black, but intermediate values are off, e.g. 50% gray maps to 90% gray and 75% gray maps to 98% gray. See http://jsfiddle.net/Rpjs2/ for a simple example. I get the same results in Firefox and Safari.

This is my first attempt at SVG filters, so I suspect I'm misunderstanding the specs. Can someone correct me?

Answer 1

Filters generally work in the linearRGB colour space. This use case wants sRGB so you just need to set color-interpolation-filters="sRGB" on the filter element