SVG filters allow for color manipulation of SVG images. The feColorMatrix filter type is particularly useful in this regard, as it allows for the adjustment of RGBA values.
Consider an SVG image with a circle element:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
To manipulate its colors using an SVG filter, we can apply the feColorMatrix filter like so:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="colorFilter">
<feColorMatrix type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0 "/>
</filter>
</defs>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" filter="url(#colorFilter)"/>
</svg>
In the matrix, each row corresponds to R, G, B, A and bias respectively. Changing these values will alter the image’s colors accordingly.
