svg matrix color filter doesn't seem to work properly

Question

I'm trying to apply an SVG filter that turns the colors to a shade of red (207, 42, 39). The matrix converts black (0, 0, 0, 1) to (207, 42, 39, 1).

I must be doing something wrong because the 2 colors should be the same but they are not

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="red">
        <feColorMatrix in="SourceGraphic" type="matrix" values="
            	0.18823529411764706 0 0 0 0.8117647058823529
                0 0.8352941176470589 0 0 0.16470588235294117
                0 0 0.8470588235294118 0 0.15294117647058825
                0 0 0 1 0" />
    </filter>

    <g filter="url(#red)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(207, 42, 39, 1)" />
    </g>
</svg>

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="superred">
        <feColorMatrix in="SourceGraphic" type="matrix" values="
            1 0 0 0 1
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0" />
    </filter>

    <g filter="url(#superred)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(255, 0, 0, 1)" />
    </g>
</svg>

Does anyone have any ideas?

Answer 1

The feColorMatrix filter runs in the linearRGB colour space by default and not the sRGB colour space. I've changed the filter below to run in the sRGB colour space which would appear to be what you want.

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="red">
        <feColorMatrix in="SourceGraphic" color-interpolation-filters="sRGB" type="matrix" values="
            	0.18823529411764706 0 0 0 0.8117647058823529
                0 0.8352941176470589 0 0 0.16470588235294117
                0 0 0.8470588235294118 0 0.15294117647058825
                0 0 0 1 0" />
    </filter>

    <g filter="url(#red)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(207, 42, 39, 1)" />
    </g>
</svg>

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="superred">
        <feColorMatrix in="SourceGraphic" type="matrix" values="
            1 0 0 0 1
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0" />
    </filter>

    <g filter="url(#superred)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(255, 0, 0, 1)" />
    </g>
</svg>