Как изменить цвет svg

Изменим цвет svg картинки двумя способами: сначала используем свойство fill, затем mask-image

Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill

Цвет svg картинки изменяется с помощью CSS свойства fill - заливки.

See the Pen Inline svg by Nikolay (@Only-to-top) on CodePen.

Если svg в вставлено в HTML в виде тега img, то нужно добавить следующий js-код

$('img.img-svg').each(function(){
  var $img = $(this);
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    var $svg = $(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');
});

В данном примере мы используем класс img-svg, который мы добавляем к изображению в HTML-странице, благодаря которому svg-картинка из img станет inline svg

Изображение было в виде тега img

Как изменить цвет svg картинки

Изображение стало inline svg

Как изменить цвет svg inline

Теперь можем изменить цвет нашей svg картинки, используя свойство fill, как в первом примере.

Как изменить заливку svg картинки

Какие ещё свойства можно применить к svg картинке

.img-svg path,
.img-svg polygon {
  fill-opacity: .5; /* прозрачность заливки */
  stroke: #ff6c00; /* цвет обводки */
  stroke-width: 10px; /* толщина обводки */
  stroke-opacity: .8; /* прозрачность обводки */
}

Это далеко не полный перечень свойств, которые можно использовать для работы с svg, это лишь самые часто используемые.

Как изменить svg картинку

Второй способ. Реализуем с помощью свойства mask-image

В HTML создадим два элемента: div и ссылку

<a href="#" class="link"></a>
<div class="div"></div>

Используем свойство mask-image чтобы задать фон для картинки и background-color чтобы задать цвет

.link{
  width: 30px;
  height: 26px;
  background-color: #000;
  display: block;
  mask-image: url('img/youtube.svg');
}
.div{
  height: 55px;
  width: 62px;
  background-color: #000;
  mask-image: url('img/youtube.svg');
}
Как изменить цвет svg

Пробуем изменить цвет

.link{
  background-color: #6087ad;
}
.div{
  background-color: red;
}
Как изменить цвет svg картинки

Полезные ссылки

  • Как вставить svg на сайт
  • Анимация svg
Изучаем английский
EnglishRussian
Scalable Vector GraphicsМасштабируемая векторная графика
FillЗаполнение
StrokeОбводка
30/09/2019 12:00
admin