Search code examples
htmlcsssvgsvg-filters

W3C Grayscale SVG Filters


I'm trying to alter the W3C greyscale filter found here: http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent

This is ridiculously simple on webkit, but I'm only even using this because Gecko only supports calling the filters through filters:url(filter.svg) in the CSS. I don't have much experience with SVG, and the few times I have messed with them they had pretty clear values in percentages, but it's a little more complex with the grayscale one.

So here's the code in the SVG file.

 <svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <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"/>
</svg>

Specifically I'm looking to greyscale it to 90%, so that only 10% of the color is visible, but I have no idea how this filter works. I found this document here http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent which is supposed to make sense


Solution

  • An easier way to do this is to just use the saturation type for feColorMatrix (although the math to do what you want with a matrix isn't hard - if you can do arithmetic you should be able to follow that spec.)

    <svg xmlns="http://www.w3.org/2000/svg">
      <filter id="grayscale">
        <feColorMatrix type="saturate" values="0.10"/>
      </filter>
    </svg>