Search code examples
svggrayscalesvg-filters

How can I make an image grayscaled only 60% with svg?

I was playing with the fecolormatrix primitive, but it grayscales the image 100%, so my question is, how can I do grayscale in other percentage then 100% just like the css3 filter grayscale(60%)?

<feColorMatrix type="matrix" values="
                0.3333 0.3333 0.3333 0 0
                0.3333 0.3333 0.3333 0 0
                0.3333 0.3333 0.3333 0 0
                0 0 0 1 0" />
Solution

  • If amount is the amount of greyscale you want then you need to update the markup below with the calculated values.

    <feColorMatrix type="matrix"
             values="(0.2126 + 0.7874 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
                     (0.2126 - 0.2126 * [1 - amount]) (0.7152 + 0.2848 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
                     (0.2126 - 0.2126 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 + 0.9278 * [1 - amount]) 0 0
                     0 0 0 1 0"/>

    FWIW saturate is

    <feColorMatrix type="saturate"
         values="(1 - [amount])"/>