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
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>