Как правильно произвести замену img на svg?

#javascript #css #svg

Есть изображение img svg, которое вставлено на страницу с помощью тега img 




Задача: изменить fill для данного изображения 

Как вариант сделать замену inline img на svg

Может есть другие варианты решения данной задачи?
    

Ответы

Ответ 1

Задача: изменить fill для данного изображения 


То есть нужно поменять цвет svg изображения. Это можно сделать с помощью css или
svg фильтров

CSS фильтры

Исходное svg изображение жёлтого колокольчика добавленное из сети в HTML с помощью
тега  



img 
{
width:100px;
height:100px;
}





С помощью различных css фильтров меняем цвет 



.twa-bell {
  background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

  
  
  
  





SVG фильтры

SVG фильтры имеют более широкую поддержку по сравнению CSS filter
Фильтров SVG, которые могут быть использованы для изменения цвета, достаточно много. 

Ниже пример использования feColorMatrix    

Более подробно и доходчиво о настройках и использовании feColorMatrix
 смотрите  в топике нашего сайта     

Первый фильтр id="dodgerFilter" сразу перекрашивает иконку с жёлтого цвета на синий.  

При наведении срабатывает второй фильтр id="redFilter", который даёт красный цвет. 



.img1 
{
width:50px;
height:50px;
filter:url(#dodgerFilter);
transition: all 0.8s ease-in;
}
.img1:hover 
{
filter:url(#redFilter);
width:60px;
height:60px;
}




Ответ 2

Хорошее, но большое решение задачи:



jQuery('img.svg').each(function() {
  var $img = jQuery(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');

  jQuery.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = jQuery(data).find('svg');

    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass + ' replaced-svg');
    }

    // Remove any invalid XML tags as per http://validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');

    // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
    if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
      $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
    }

    // Replace image with new SVG
    $img.replaceWith($svg);

  }, 'xml');

});
svg path {fill: #000 !important;}









Очень давно сталкивался с данной задачей, когда проще прикреплять svg в img во благо
меньшего количества строк кода, но тогда ты не имеешь прямого доступа в изменению цвета
через svg path{fill: value}, но метод выше более чем рабочий, если вы не брезгуете jQuery.

Источник ответа: @Drew Baker