How to Invert a White image to Black using SVG Filters?

css, svg, svg-filters

Solution

You can invert using an SVG Filter:

<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 
                                                              0 -1 0 0 1 
                                                              0 0 -1 0 1
                                                              0 0 0 1 0"/>

For more detail see the docs on feColorMatrix at MDN

Problem

Is there a way to invert a white image to black using SVG filters? In CSS Filter, we do `-webkit-filter:invert(1);` which does not work in IE10. I am applying SVG filters as fallback. Any one can help?

Original source