Aplicação de filtros em escala de cinza no Internet Explorer 10

O Internet Explorer 10 apresenta um desafio para a aplicação de filtros em escala de cinza usando métodos CSS tradicionais. Ao contrário das versões anteriores do IE, filtros DX e filtros de escala de cinza prefixados não são mais suportados.

Solução: sobreposição SVG

Para imagens em escala de cinza no IE10, você pode empregar um SVG sobreposição. Isso envolve o uso de um filtro SVG com uma matriz que converte a imagem em escala de cinza.

Código CSS:

img.grayscale:hover {
    filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale");
}

Considerações adicionais:

• A técnica de sobreposição SVG funciona melhor quando a imagem tem um fundo sólido.
• Para obter mais informações sobre SVG efeitos de filtro no IE10, consulte: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Exemplo:

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}