Just style the SVG element directly
svg {
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
From IE9 and above you can use SVG in <img src="" />
element.
img { /* svg on an img tag */
-webkit-filter: invert(.75); /* safari 6.0 - 9.0 */
filter: invert(.75);
}
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />
You can set the amount as percentage or as number as this docs says
The amount of the conversion, specified as a <number>
or a
<percentage>
. A value of 100%
is completely inverted, while a value of
0%
leaves the input unchanged. Values between 0%
and 100%
are linear
multipliers on the effect. The lacuna value for interpolation is 0
.