Как изменить цвет svg вставленной тегом img?

Question

[Василий Хрягин]

Или тут только svg тегом прийдется вставлять?

Answer 1

[WapSter]

Вставленное svg при помощи тега img или фоном, стилизовать нельзя.

Answer 2

[Viacheslav Gordeiko]

Нужно чтобы тег img представлялся в DOM как svg, это можно сделать с помощью JS/jQuery.
Вставь это в свой JS:

jQuery('img.img-svg').each(function(){
  const $img = jQuery(this);
  const imgClass = $img.attr('class');
  const imgURL = $img.attr('src');
  jQuery.get(imgURL, function(data) {
    let $svg = jQuery(data).find('svg');
    if(typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    $svg = $svg.removeAttr('xmlns:a');
    if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
      $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
    }
    $img.replaceWith($svg);
  }, 'xml');
});

* Если jQuery определен как $, то естественно в коде заменить "jQuery" на "$".

Добавь класс тегу img:
<img src="test.svg" alt="" class="img-svg" />
После чего можно настраивать цвет и остальные параметры:

.img-svg {
     max-width: 30px;
}
 .img-svg path {
     fill: #535353;
}

Comments

[Василий Хрягин]

гениально