Tinted monotone image with SVG filters

Question

In CSS, I can make an image greyscale with something similar to:

.greyscale {
  filter: url("data:image/svg+xml;utf8,<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'/></filter></svg>#grayscale");
}

I'd like to have a monotone image where the dark color is say #11224F instead of black. Is there a way to do something like this with a SVG filter?

Answer 1

The first row (five values) provides the equation components for red. The next for green, then blue, then alpha.

Those five values are the multipliers for r, g, b and alpha, then the offset to add.

So to produce a red component that has a base offset of 0x11, you need to convert that to decimal. 0x11 = dec 17, so the value for the offset is 17/255 = 0.0667. Assuming you want equal contribution of r,g & b to the grey value, just divide the remainder into three and make it the multiplier for all three. So the first five values in the matrix will be:

0.3111 0.3111 0.3111 0 0.0667

The zero means we don't want alpha to contribute to the calculation.

Now do the same for green and blue and you get:

"0.3111 0.3111 0.3111 0 0.0667
 0.2889 0.2889 0.2889 0 0.1333
 0.2301 0.2301 0.2300 0 0.3098
 0      0      0      1 0"

Demo here

Answer 2

Yes, you can use recolor as freely as you want using feColorMatrix. For example

values=" .8 .8 .8 0 0 .1 .1 .1 0 0 .1 .1 .1 0 0 0 0 0 1 0" will give you a heavy red tint. I built an interactive feColorMatrix demo - fork it and try values to get the results you want:

http://codepen.io/mullany/pen/qJCDk