Code and Stuff

Apr 13, 2013

SVG Filters: ColorMatrix

The Matrix you can enter below will be multiplied against all the color vectors of the image on the right below.
RGBA1
R
G
B
A
0 0 0 0 1 1
The SVG filter that is being applied to the image is the following.
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="filterid">
        <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>
</svg>
To apply such a filter to an HTML element one simply has to put the SVG filter somewhere in the page and apply it with the following CSS3 code.
img {
   -webkit-filter: url(#filterid);
   filter: url(#filterid);
}