Как изменить цвет background если подключен svg?
Чтобы изменить цвет у подключаемого SVG файла, можно использовать mask-image свойство CSS.
Данное свойство не имеет поддержки в IE, но имеет 91% поддержку с префиксом и 6% без.
Поэтому на текущий момент использовать строго с префиксом.
Подробнее про поддержку можно узнать здесь
body < display: flex; height: 100vh; align-items: center; justify-content: center; >i.icon < width: 50px; height: 50px; display: block; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: gray; margin: 0 10px; >i.icon.icon-like < -webkit-mask-image: url("https://image.flaticon.com/icons/svg/25/25423.svg"); >i.icon.color-black < background-color: black; >i.icon.color-red < background-color: red; >i.icon.color-green < background-color: green; >i.icon.color-blue
SVG background-image url — смена цвета
Admin 
24.06.2021 
CSS
Смена цвета для svg изображений, когда они вставлены через background-image: url.
Открываем в текстовом редакторе иконку svg, копируем оттуда текст и вставляем в редактор на этом сайте: yoksel.github.io/url-encoder/
В Ready for CSS получаем код готовый для вставки в css стили:
Меняем атрибут background-image: url на mask-image: url и webkit-mask-image: url и задаем также цвет. Стилистика приведена для SCSS:
.icon-add {
background-color : black ;
mask-image : url ( «data:image/svg+xml,%3C%3Fxml version=’1.0′ encoding=’iso-8859-1’%3F%3E%3Csvg version=’1.1′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’. » ) ;
-webkit-mask-image : url ( «data:image/svg+xml,%3C%3Fxml version=’1.0′ encoding=’iso-8859-1’%3F%3E%3Csvg version=’1.1′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’. » ) ;
Можно без webkit-mask-image, если компилятор умеет самостоятельно добавлять этот атрибут.
Если надо отцентровать, то добавить:
mask-repeat : no-repeat ;
mask-size : contain ;
mask-position : center ;
Читайте также
У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.
Возможно ли залить png изображение белым цветом средствами css?
По умолчанию логотип красно-синий. Возможно ли средствами css залить изображение белым цветом?
Отслеживать
7,274 2 2 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков
задан 4 июл 2017 в 10:30
438 1 1 золотой знак 6 6 серебряных знаков 20 20 бронзовых знаков
Такого сделать нельзя
4 июл 2017 в 10:37
Можете сделать прозрачный логотип с фоном соответствующим окружающему. А под ним средствами css вставлять всё что вздумается, если как в примере — синий и красный блоки
4 июл 2017 в 10:48
Менять цвет у png средствами css нельзя. Нужно логотип сделать в svg и тогда уже изменять цвет у всего, что угодно
4 июл 2017 в 12:40
@Cheg, Ну, откровенно говоря цвет у png через css поменять можно, через hue-rotate фильтр. Но вот в белый да, не получится
4 июл 2017 в 13:55
9 июл 2017 в 8:28
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Например, можно с помощью brightness(0) получить полностью чёрную картинку и затем её инвертировать:
filter: brightness(0) invert(1); body < background: #ccc; >img < display: block; float: left; max-width: 50%; >.img-white
Отслеживать
ответ дан 9 июл 2017 в 7:56
Gleb Kemarsky Gleb Kemarsky
7,274 2 2 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков
Это конечно шляпа так как само изображение я не залил цветом но так как img в png т.е имеет прозрачность можно залить под ним фон и вроде бы получается визуальный обман но за то без топорных методов
- what now ?
- stackoverflow
про переполнение стека : оффтоп
* < margin: 0; padding: 0; >.logo < width: 300px; height: 130px; background: red; margin: 20px auto; >.logo img < display: block; max-width: 100%; >.logo1 < background: green; >.logo2 < background: linear-gradient(tomato, blue, orange); >.logo3
Как изменить цвет svg?
Но это объект, поэтому вы не сможете напрямую стилизовать входящие в него элементы SVG.
В этом файле SVG могут находиться несколько объектов SVG, у каждого должен быть свой ID
Такая структура называется спрайтом. Вызываются отдельные элементы с помощью тега
Теперь становится возможным стилизовать элементы SVG, либо напрямую
Либо через таблицу стилей
.use1 < fill:black; >.use1:hover
Но всегда нужно помнить, что стили представления (стили, которые находятся внутри svg спрайта) всегда выше по приоритету, чем стили таблицы CSS.
Поэтому лучше предварительно удалить стили в файле SVG.
При работе со спрайтами может возникнуть много нюансов. Поэтому по изучайте вопросы и ответы из соответствующей метки — svg-спрайт
Если вы не планируете использовать анимацию SVG, стилизацию с помощью правил CSS: fill stroke , stroke-width стили шрифтов и многое другое, то можно использовать другие методики добавления SVG в качестве фонового изображения: