Så gör du gråskaliga bilder cross-browser med CSS

Har ni som jag svurit över att det inte funnits något smidigt sätt att göra svartvita / gråskaliga bilder utan att behöva skapa dom i Photoshop?
Här har ni lösningen som är cross-browser säker nere till IE6 vilket är mer än bra.
Jag skapade här ett exempel med hover-effekt och lade även på CSS3 transition (nej, det är inte cross-browser) för en mjukare övergång.

Hoppas det kan spara hår och tid för någon annan.

img.gray { 
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

    -webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

img.gray:hover { 
    filter: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);
}

jsFiddle: http://jsfiddle.net/jarnesjo/ys2Lf/5/
jsFiddle resultat: http://jsfiddle.net/jarnesjo/ys2Lf/5/embedded/result/