Изменить цвет 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 чтобы у нас не перекрасились все иконки на сайте. Помним что у вас что-то свое. На этом всё!