Menu
I have a svg image where I want to change the color of the svg using the css filter property.
body {
background-color: #dadada;
}
.custom-1 {
filter: invert(0.5);
}<img src="https://image.flaticon.com/icons/svg/62/62945.svg" class="standard" width="50" height="50" alt="img">
<img src="https://image.flaticon.com/icons/svg/62/62945.svg" class="custom-1" width="50" height="50" alt="img">How can I make the svg image as white color.
346
Very easy when using the hue-rotate() filter. Make your images red, which has a hue value of 0, then use a hue chart to grab the colours you require for the hue rotation. Use the filter:grayscale(1) to set all images to grey, then on hover, set the grayscale to 0 and adjust the colour values.
If the product team was kind enough to also provide a white version of the image, you can simply toggle the image's src on hover. This can be done using JavaScript. You can use an onmouseover function that sets the image's src to white. png and then an onmouseleave function that sets the image's src to black.
To set image brightness in CSS, use filter brightness(%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter.
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.
You can combine filter properties like this.
brightness(0) invert(1);
body {
background-color: #dadada;
}
.custom-1 {
filter: invert(0.5);
}
.custom-2 {
filter: brightness(0) invert(1);
}<img src="https://s.cdpn.io/3/kiwi.svg" class="standard" width="50" height="50" alt="img">
<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-1" width="50" height="50" alt="img">
<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-2" width="50" height="50" alt="img">EDIT - 25th May 2021:
This answer has been quite popular, thus I want to warn you that filter is not supported by Internet Explorer and Opera Mini. The good news is that Microsoft is slowly phasing out IE.
Take care!
172
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
