Cross browser clientside desaturate

Using brandnew CSS filters in WebKit, proprietary IE filters in IE <= 9 (10 has no filters any more) and SVG-filters in Firefox

by Schepp

HTML

<img src="http://farm8.staticflickr.com/7211/7018621375_e31a1166d8.jpg" alt="">
<img src="http://farm8.staticflickr.com/7211/7018621375_e31a1166d8.jpg" alt="" class="desaturated">

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

CSS

.desaturated {
    filter: url(#desaturate); /* Mozilla */
    filter: gray; /* IE <= 9 */
    -webkit-filter: grayscale(1); /* WebKit */
}