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:
xxxxxxxxxx
1
.blue {
2
/* filter configuration comes from CSS filter generator - check NOTE below */
3
filter: invert(12%) sepia(63%) saturate(6234%) hue-rotate(246deg) brightness(87%) contrast(156%);
4
}
Note: use the CSS filter generator to compute
filter
style property value that is necessary to change<img>
element color.
Preview:

In this example, we present how to change the color of the SVG icon from <img>
tag using CSS filter
property.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
img {
7
width: 100px;
8
height: 100px;
9
}
10
11
.red {
12
filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);
13
}
14
15
.purple {
16
filter: invert(5%) sepia(78%) saturate(6858%) hue-rotate(276deg) brightness(97%) contrast(101%);
17
}
18
19
.blue {
20
filter: invert(12%) sepia(63%) saturate(6234%) hue-rotate(246deg) brightness(87%) contrast(156%);
21
}
22
23
</style>
24
</head>
25
<body>
26
<img src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
27
<img class="red" src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
28
<img class="purple" src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
29
<img class="blue" src="https://dirask.com/static/bucket/1632934722_loupe.svg" />
30
</body>
31
</html>