Как изменить цвет 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: 0.5; /* прозрачность заливки */
    stroke: #ff6c00; /* цвет обводки */
    stroke-width: 10px; /* толщина обводки */
    stroke-opacity: 0.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

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

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

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

  • Как вставить SVG на сайт.
  • Анимация SVG.
Временная шкала Windows 10 Лучшие плагины для VS Code