Изменить цвет SVG с помощью CSS

19.05.2022 • Теги: #css #html #svg #вёрстка #инструмент

Сегодня, в мае 2022 года я для себя открыл супер инструмент. Ранее которого мне не хватало. А именно как изменить цвет SVG иконке не вставляя её как код? А вот как.

Вставляем картинку СВГ (чёрно-белую иконку) как обычную картинку через тег IMG SRC

<img src="/work.svg" class="chm__icon_svg">

И присваиваем ей стиль через CSS:

img.chm__icon_svg {
    filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
    -webkit-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
    -moz-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
    -ms-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
    -o-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
}

Получится из черного цвета, зеленый цвет. Вот этот код

invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

генерируется в этом сервисе. Указываем там какой нам нужен цвет в формате #00bb12 и получаем код фильтра.