EN
CSS - change color of SVG images from <img> tag
3
points
In this article, we would like to show you how to change the color of SVG images from <img> tag with CSS.
The solution used in the article changes SVG image color using trick: <img> element combined with filter style property.
Quick solution:
.blue {
/* filter configuration comes from CSS filter generator - check NOTE below */
filter: invert(12%) sepia(63%) saturate(6234%) hue-rotate(246deg) brightness(87%) contrast(156%);
}
Note: use the CSS filter generator to compute
filterstyle property value that is necessary to change<img>element color.
Preview:
Practical example
In this example, we present how to change the color of the SVG icon from <img> tag using CSS filter property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
img {
width: 100px;
height: 100px;
}
.red {
filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);
}
.purple {
filter: invert(5%) sepia(78%) saturate(6858%) hue-rotate(276deg) brightness(97%) contrast(101%);
}
.blue {
filter: invert(12%) sepia(63%) saturate(6234%) hue-rotate(246deg) brightness(87%) contrast(156%);
}
</style>
</head>
<body>
<img src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
<img class="red" src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
<img class="purple" src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
<img class="blue" src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
</body>
</html>