Invert svg image using css?

css image svg css-filters

GAME ON · Sep 29, 2016 · Viewed 41k times · Source

I'm trying to invert an image file with .svg extension using css. I know .png and .jpg files can be inverted using css webkit properties. I am new on svg images. Is it possible to invert .svg images using css?

I tried using

-webkit-filter:invert(1);
        filter:invert(1);

but it did not work.

Answer

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.

Invert svg image using css?

Answer

Related questions