Применение фильтров оттенков серого в Internet Explorer 10

В Internet Explorer 10 возникает проблема с применением фильтров оттенков серого с использованием традиционных методов CSS. В отличие от предыдущих версий IE, фильтры DX и префиксные фильтры оттенков серого больше не поддерживаются.

Решение: наложение SVG

Для изображений в оттенках серого в IE10 можно использовать SVG наложение. Это предполагает использование SVG-фильтра с матрицей, которая преобразует изображение в оттенки серого.

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");
}

Дополнительные рекомендации:

• Техника наложения SVG работает лучше всего, когда изображение имеет сплошной фон.
• Для получения дополнительной информации о SVG эффекты фильтра в IE10, см.: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Пример:

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