0

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?

Mordad khezerlou
  • 107
  • 1
  • 7
  • 2
    I think you want to eat soup with a fork :) – mehmet Feb 26 '22 at 17:12
  • 1
    No, no, no, he wants to eat soup from a can **without** opening the can. JavaScript **is** required to open the can: https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd – Danny '365CSI' Engelman Feb 26 '22 at 18:12

1 Answers1

2

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

However, when 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

DvdRom
  • 738
  • 4
  • 13