'How to use a svg file and change its color? [duplicate]

The difference between my question and other questions is that other questions are solved using JQuery or JavaScript. But I want my problem to be solved only with html.

My main goal in this question is to get a piece of html code to use the svg file and change it to my own favorite color!

I have home.svg file. I am using this file as follows and I made this attempt to change its color.

<img src="home.svg" style="color: white" />

default color for svg is black, but i want change that color to white or other colors!

how can i solved this problem?

htmlsvg


Solution 1:[1]

You can only change the color of an inline svg and would use fill: instead of color:.

However, using fill: currentColor; it will use the color of the element.

svg {
  fill: currentColor;
  color: red;
}
  
svg:hover {
  color: blue;
}
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" />
</svg>

If you don't want to inline the svg, alternatively you can href (formerly xlink) it https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DvdRom

Related Questions