Discrete values (0/1) from grayscale

Question

I created a filter plug-in for Snap that is meant to return discrete values 1 for pixel with values(>=0.5,>=0.5,>=0.5) and 0 for values (<0.5,<0.5,<0.5)

As an aid for debugging I am using a linear gradient from white to black.

In this gradient, left-most pixels are (1,1,1), right-most pixels are (0,0,0) and center pixels are (0.5,0.5,0.5)

Therefore, I expected the applied plugin to dissect the gradient in the middle leaving half of it completely white, and half of it completely black, yet my output returns the wrong values as shown in the image below:

As you can see, about a third of the gradient is white, and 2 thirds are black instead of having an equal proportion of black and white.

Here is my code:

Snap.filter.discrete()

Snap.filter.discrete = function () {
    var str = "0 1"
    return Snap.format('<feComponentTransfer>' +
    '<feFuncR type="discrete" tableValues="' + str + '"/>' +
    '<feFuncG type="discrete" tableValues="' + str + '"/>' +
    '<feFuncB type="discrete" tableValues="' + str + '"/>' +
    '</feComponentTransfer>');
};

Where did I go wrong?

Fiddle: https://jsfiddle.net/z7a49npn/1/

Answer 1

This is caused by a mismatch between the default color spaces used for gradients and filters in SVG: sRGB and linearRGB respectively. If you add

color-interpolation-filters="sRGB"

to your filter element - everything should work.