softening colors in a matrix svg filter for images

Question

I need to use an image filter that soften red at 90%, green at 80% and blue at 70%. For example, I need to transform

rgb(255,255,255)  

to

rgb(229,204,178)

(229=90%*255, 204=80%*255, 178=70%*255). So, I have defined a svg filter as follows:

<feColorMatrix in="SourceGraphic" type="matrix" values="0.9 0 0 0 0
        0 0.8 0 0 0
        0 0 0.7 0 0
        0 0 0 1 0"/>

Unfortunately, the filter doesn't work as expected since it transforms a white image in a lighter colored image than that described by color rgb(229,204,178). See JSFiddle code and result.

Maybe I haven't well understood as a matrix filter works. How can I obtain the described effected? (red, green and blue reduced at 90%, 80% and 70%)

Answer 1

You need to specify sRGB as the colorspace. Add:

color-interpolation-filters="sRGB" 

to your filter element and everything works just fine.