W3C Grayscale SVG Filters

css, html, svg, svg-filters

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>

Problem

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

Original source