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

Shekhar K. Sharma picture Shekhar K. Sharma · Jul 26, 2013 · Viewed 15.8k times · Source

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?

Answer

Michael Mullany picture Michael Mullany · Jul 29, 2013

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