Colorized Photos with SVG Filter 1

The feColorMatrix SVG filter element changes colors based on a transformation matrix. First we take the color we want in rgb format and next we divide each value for 255.

feColorMatrix =
[
[r,0,0,0,0], // red
[0,g,0,0,0], // green
[0,0,b,0,0], // blue
[0,0,0,1,0], // multiplyer
]

For Example for RED COLOR:

rgb = {r: 255, g: 0, b: 0, opacity: 1}
And replace each value / 255 in Matrix.

"1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0"

This Matrix is used as value of feColorMatrix

<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="jsx-715889512 background fade-in" style="width: 100%; height: 100%;">
    <filter id="red">
        <feColorMatrix type="matrix" values="1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0" color-interpolation-filters="sRGB"></feColorMatrix> 
    </filter>
    <image width="100%" height="100%" filter="url(#red)" xlink:href="https://blackwhite.pictures/media/c/0904/fishing-rope-texture-2874.jpg"></image>
</svg>

For Example for BLUE COLOR:

rgb = {r: 0, g: 0, b: 255, opacity: 1}
And replace each value / 255 in Matrix.

"0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0

This Matrix is used as value of feColorMatrix

<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="jsx-715889512 background fade-in" style="width: 100%; height: 100%;">
    <filter id="blue">
        <feColorMatrix type="matrix" values="1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0" color-interpolation-filters="sRGB"></feColorMatrix> 
    </filter>
    <image width="100%" height="100%" filter="url(#blue)" xlink:href="https://blackwhite.pictures/media/c/0904/fishing-rope-texture-2874.jpg"></image>
</svg>

For this examples we use b&w images for better visual result from blackwhite.pictures

Next time we will show you how to combine these colors to get duotone images.