Menu
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.
391
CSS | invert() Function The invert() function is an inbuilt function that is used to apply a filter to the image to set the invert of the color of the sample image.
CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the filter property. Because the default color of the text is black, the color is inverted into white with filter: invert(100%) syntax.
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 of100%is completely inverted, while a value of0%leaves the input unchanged. Values between0%and100%are linear multipliers on the effect. The lacuna value for interpolation is0.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
