Languages
[Edit]
EN

CSS - change color of SVG images from <img> tag

0 points
Created by:
sienko
323

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 bases on the trick that specific filters change the SVG color.

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 from Codepen to convert hex color to the SVG color.

Preview:

CSS - set SVG images color from style
CSS - set SVG images color from style

 

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>
    
    .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>

See also

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join