Where am I going wrong with feColorMatrix to invert colours?

Question

I'm drawing objects and using a filter to invert the colours. However, the colours aren't coming out correctly.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="441" height="433">
<defs>
<filter id="f1">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="220.5" cy="86" r="30" style="stroke-width:1;fill:rgb(255,200,145);stroke:rgb(255,200,145)" filter="url(#f1)"/>
</svg>

The colour should look like this. The R channel should go from 255 to 0. G from 200 to 55. B from 145 to 110. Instead they get mapped to 0, 174, 220 respectively.

Answer 1

You need to set color-interpolation-filters="sRGB". Otherwise, the filter would use linearRGB.

"Linear" does not refer to the numbers used for encoding web colors, but linear chromaticities. CSS color encoding happens in the sRGB color space with non-linear chromaticity values. If the linearRGB color space is used, the filter computation would first convert the incoming sRGB values, then execute the color matrix operation, then convert back. This results in the non-obvious numbers you see.

Setting the filter execution to sRGB avoids that, but that is not to say one result is more "correct" than the other. It is just another interpretation of what is the opposite of a color.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="441" height="433">
<defs>
<filter id="f1" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="220.5" cy="86" r="30" style="stroke-width:1;fill:rgb(255,200,145);stroke:rgb(255,200,145)" filter="url(#f1)"/>
</svg>