CODEWITHSUNDEEP
cssimagesvgcss-filters
ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

Invert svg image using css?

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.

Upvotes: 55

Views: 94778

Answers (1)

Engkus Kusnadi
Engkus Kusnadi

Reputation: 2506

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.

Upvotes: 103

Related Questions