SVG filter on HTML img in IE10

Question

I've got this filter that works in Chrome and Firefox, but I can't get it working in IE

http://codepen.io/anon/pen/lwpbo

IE10 should support SVG filters, so whats wrong?

Answer 1

IE currently doesn’t support SVG filters in HTML documents or CSS Filter Effects. It only supports SVG filters in SVG documents or SVG fragments inside HTML documents. If you want it to work in IE, you’d need to convert it from a HTML document to a SVG document, include the image inside an SVG fragment, or include the image in an SVG file and link to that instead from the HTML page.

For the latter you can make an SVG wrapper around the image like shown:

<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>

You can see this in action with this image

Then from the HTML you need to link to the SVG file instead:

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

If you’d like you can include the SVG above directly in the HTML file, rather than linking to it with an img element. You can see that approach in this jsFiddle demo. The SVG code needed is exactly the same.

IE5.5–IE9 support Microsoft’s own proprietary filters, but these were dropped in IE10.