Фильтр SVG в HTML img в IE10

В настоящее время IE не поддерживает фильтры SVG в документах HTML или эффекты фильтров CSS. Он поддерживает только фильтры SVG в документах SVG или фрагменты SVG внутри документов HTML. Если вы хотите, чтобы он работал в IE, вам нужно преобразовать его из документа HTML в документ SVG, включить изображение во фрагмент SVG или включить изображение в файл SVG и вместо этого связать его со страницы HTML. .

Для последнего вы можете создать оболочку SVG вокруг изображения, как показано ниже:

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300"> 

    <filter id="greyscale">
        <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>
    <image x="0" y="0" xlink:href="Lenna.jpg " filter="url(#greyscale)" width="300" height="300"/>
</svg>

Вы можете увидеть это в действии на этом изображении.

Затем из HTML вам нужно вместо этого ссылаться на файл SVG:

<img src="lenna.svg" alt="Lena Söderberg desaturated with SVG" />

Если вы хотите, вы можете включить приведенный выше SVG непосредственно в файл HTML, а не ссылаться на него с помощью элемента img. Вы можете увидеть этот подход в этой демонстрации jsFiddle. Необходимый код SVG точно такой же.

IE5.5–IE9 поддерживают собственные собственные фильтры Microsoft, но они были удалены в IE10.