CODEWITHSUNDEEP
htmlsvg
Jorhanc
Jorhanc

Reputation: 350

Svg shows wrong color in html <img> tag

I'm using white icon in .svg format (it shows correctly- white if looked directly onto it). Hovewer when I try to use it in my html code it shows black.

<img src="{% static '/img/person.svg' %}" width="45" height="45" alt="Profile-Icon">

No idea what I am doing wrong.

<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="#FFFFFF" color="white" xmlns="w3.org/2000/svg">
  <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>

Upvotes: 1

Views: 896

Answers (2)

Rob Moll
Rob Moll

Reputation: 3453

The colors in the svg can be overridden by css declarations. In the first snippet below is your original svg with just a bit of css to show a contrasting background to show the white svg...

div {
  font-size: 3rem;
  background: orange;
  color: blue;
}
<div>test
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="#FFFFFF" xmlns="w3.org/2000/svg"> <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/> </svg>
</div>

In the second snippet, fill="#FFFFFF" is changed to fill="currentColor" to show how that forces the svg to use the text color for the containing div...

div {
  font-size: 3rem;
  background: orange;
  color: blue;
}
<div>test
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="currentColor" xmlns="w3.org/2000/svg"> <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/> </svg>
</div>

And in the third snippet one more bit of css is added to change the svg color to white using one of the classes specified in your original css (text-white - it could have been any of the three though). It's important to point out here that when using the third option, any color specified inside the svg will be overridden even if "currentColor" is used as shown here.

div {
  font-size: 3rem;
  background: orange;
  color: blue;
}

.text-white {
  fill: white;
}
<div>test
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="currentColor" xmlns="w3.org/2000/svg"> <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/> </svg>
</div>

Your issue might stem from existing css in your page. See if you have any css declarations for the classes specified inside the svg (.bi, .bi-person, .text-white) or the svg itself. If so, one of them may be specifying color black.

Upvotes: 2

Monu Rohilla
Monu Rohilla

Reputation: 665

<img src="{% static "my_app/example.jpg" %}" alt="My image">

learn more about Managing static files

Your code need some changes

<img src="{% static "/img/person.svg" %}" width="45" height="45" alt="Profile-Icon">

Upvotes: 0

Related Questions