Languages
[Edit]
EN

CSS - change color of SVG images from style (<svg> tag)

0 points
Created by:
Elias999
489

In this article, we would like to show you how to change the color of SVG image from style with CSS.

Quick solution:

svg {
  fill: red;
}

 

Practical example

In this example, we present how to change the SVG graphic color using CSS fill property.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    svg {
      fill: green;
    }
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height:100px;">
    <path d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
  </svg>
</body>
</html>

See also

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