Меняем цвет svg изображения

Изменить цвет svg картинок можно либо путем изменения кода картинки, либо изменением в специализированной программе, например Adobe Illustrator, либо с помощью css.

Если вы разместили svg картинку в виде кода, то вы без проблем найдете свойство fill, и без проблем сможете его изменить.

Когда вы загружаете картинку svg как файл, то вы можете предварительно открыть его в редакторе, например в блокноте или notepad++ и также поменять цвет у свойства fill

А что если svg файл уже загружен на сайт и по каким то причинам вы не хотите его скачивать, редактировать и загружать обратно? В таком случае выход есть. Пробуем применить к svg картинке свойство css filter

Допустим у нас на сайте есть блок с иконкой svg темно синего цвета на белом фоне.

А задача у нас - сделать фон блока темно синим, а иконку и цвет текста белым.

Изменить цвет фона и текста особого труда не составит. А вот правильно подобрать параметры свойства filter, чтобы точно поменять цвет иконки на белый кажется затруднительно.

Делимся полезным онлайн инструментом - генератором цветового фильтра https://angel-rs.github.io/css-color-filter-generator/

Инструмент достаточно простой. Указываем желаемый цвет нашей картинки:

или выбираем желаемый цвет пикером, в нашем случае белый:

Нажатием кнопки Get Filter! генерируем код, который скопируем для размещения в CSS файле.

Далее размещаем скопированный код примерно так

.bgblue svg {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(80deg) brightness(100%) contrast(101%);
}

здесь мы указали класс блока с иконкой bgblue чтобы у нас не перекрасились все иконки на сайте. Помним что у вас что-то свое. На этом всё!

CSS-фильтр удобен, когда нужно быстро перекрасить однотонную иконку, но для многоцветных SVG и разных состояний элемента лучше управлять цветами внутри самого изображения. Так результат проще контролировать при разработке интерфейса сайта, а параметры фильтра не приходится подбирать заново для каждой иконки.