I have myself been totally confused by SVG masks and filters. They are always presented in a completely obtuse way, with too many complications and ridiculous extra flourishes to impress. So I decided to take the code from Firefox OSX used to make all icons black, simplify the heck out of it and get it to just change icon colors. Here is a sample of what I've learned, using the feColorMatrix:matrix model:
Basic SVG:
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" height="0">
<filter id="green"
color-interpolation-filters="sRGB"
filterUnits="objectBoundingBox"
x="0" y="0" width="100%" height="100%">
<feColorMatrix type="matrix" in="SourceGraphic"
values = "0.4 0.0 0.0 0.0 0.0
0.3 0.8 0.3 0.0 0.0
0.0 0.0 0.3 0.0 0.0
0.0 0.0 0.0 1.0 0.0"
/>
</filter>
</svg>
Basic CSS:
Code: Select all
#back-button:not([disabled="true"]) > .toolbarbutton-icon,
#forward-button:not([disabled="true"]) > .toolbarbutton-icon {
filter: url(chrome://customskin/skin/filters.svg#green)!important;
}
The color Matrix works like this (roughly): each value in the matrix represents an RGBA value from 0 to 1 respresenting percentages. In it's most basic sense the grid is this:
R 0 0 0 0
0 G 0 0 0
0 0 B 0 0
0 0 0 A 0
Modifiying the grid outside of the RGBA positions results in greater saturation, but honestly I don't really understand how it works. It's a brilliant example of advanced mathematics stuffed into web code for no apparent reason other than the people coming up with these standards must be EXCEPTIONALLY bored. Anyway, matrix filter has the advantage of being able to force grayscale images into color. There are other basic methods available as well:
saturate: de-saturates an image by a value from 0 to 1:
<feColorMatrix type="saturate" in="SourceGraphic" values = "0.5"/>
hueRotate: shifts the color of the image in degrees around the Hue circle. This would be a simple way to change a green icon to blue... note that it shifts *all* hues by the amount of degrees. It also isn't any good for forcing grayscale icons into a color, because it's only shifting existing hues:
<feColorMatrix type="hueRotate" in="SourceGraphic" values = "175"/>
Pretty much everything else in SVG begins to get immensely complicated and my brain starts to get fuzzy. But these three basic bits are enough to accomplish quite a few interesting things in themes. I'm building a sample theme that shows off matrix filtering.