[Edit]

CSS change color of SVG images from <img> tag

774

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
<head>
  <style>
    
    .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 class="red" src="https://dirask.com/static/bucket/1632934722_loupe.svg" style="height:100px;"/>
  <img class="purple" src="https://dirask.com/static/bucket/1632934722_loupe.svg" style="height:100px;"/>
  <img class="blue" src="https://dirask.com/static/bucket/1632934722_loupe.svg" style="height:100px;"/>
</body>
</html>