Блог

Я использую белый значок в формате .svg (он отображается правильно — белый, если смотреть прямо на него). Когда я пытаюсь использовать его в своем HTML-коде, он отображается черным.

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

Понятия не имею, что я делаю не так.

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

Цвета в svg могут быть переопределены объявлениями css. В первом фрагменте ниже приведен ваш оригинальный svg с небольшим количеством css, чтобы показать контрастный фон, чтобы показать белый 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>  

Во втором фрагменте fill="#FFFFFF" изменено на fill="currentColor" , чтобы показать, как это заставляет svg использовать цвет текста для содержимого 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>  

И в третьем фрагменте добавлен еще один бит css, чтобы изменить цвет svg на белый, используя один из классов, указанных в вашем исходном css ( text-white хотя это мог быть любой из трех). Здесь важно отметить, что при использовании третьего варианта любой цвет, указанный внутри svg, будет переопределен, даже если используется «currentColor», как показано здесь.

 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>  

Ваша проблема может быть связана с существующим css на вашей странице. Посмотрите, есть ли у вас какие-либо объявления css для классов, указанных внутри svg (.bi, .bi-person, .text-white) или самого svg. Если это так, один из них может указывать черный цвет.

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

узнайте больше об управлении статическими файлами

Ваш код нуждается в некоторых изменениях

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