Меняем устанавливаем цвет svg картинки
Если слабо представляете, что такое svg? то рекомендую ознакомиться.
Меняем цвет у svg изображения.
- Как изменить цвет у svg картинки в теге img
- Как изменить цвет у svg картинки в теге div
- Изменение цвета картинки svg вариант 2
- Покрасим svg используя defs + use + symbol
- Изменение цвета картинки в теге svg
Как изменить цвет у svg картинки в теге img
Один из способов вывести картинку в формате ".svg" - это вывод в стандартном теге картинки "img":
Результат:
И здесь опять НО! Не на все виды "svg" можно накладывать маску!
Изменить цвет в стандартном теге img цвет картинки svg - изменить нельзя!
Попробуем разобрать другой способ:
Как изменить цвет у svg картинки в теге div
Мы можем изменить цвет "svg" - если заменим тег, например на div :
Нам понадобится : тег div
В тег помещаем все наши стили, с размером и задним фоном(background) который и будет красить наш svg:
Соберем весь код вместе:
<div style="width: 70px; height: 70px;display: inline-block;background: #FF0000;-webkit-mask-image: url(//dwweb.ru/__img/__svg/bell/bell_95.svg);mask-image:url(//dwweb.ru/__img/__svg/bell/bell_95.svg);"></div>
Результат изменения цвета svg картинки.
Можно изменять и подбирать цвет обычным образом, через исследовать элемент по блоку, справа находим background, нажимаем, выбираем нужный цвет для "svg"

Изменение цвета картинки svg вариант 2
По сути это предыдущий вариант, но поскольку в каждом теге стили немного напрягают, то можно в данном случае стили вынести в файл css:
<style>
.example{
width: 70px;
height: 70px;
display: inline-block;
background: #1607ff;
-webkit-mask-image: url(//dwweb.ru/__img/__svg/bell/bell_95.svg);
mask-image:url(//dwweb.ru/__img/__svg/bell/bell_95.svg);
}
</style>
<div class="example"></div>
покрасим svg используя defs + use + symbol
Поместим "path" во внутрь defs + добавляем тег symbol .
В нем прописываем id="thebell"
Начальный тег svg отображаться не будет.
<svg width="15" height="15">
<defs>
<symbol id="thebell">
<path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
</symbol>
</defs>
</svg>
Далее мы можем вызвать уже ранее опубликованный svg в любой месте:
Используя:
После чего добавляем цвет fill:
<svg class="block"> <use xlink:href="#thebell" fill="red" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="orange" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="yellow" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="green" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="blue" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="indigo" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="violet" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="cyan" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="magenta" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="lime" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="olive" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="maroon" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="purple" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#fff" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#e5e5e5" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#ccc" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#b2b2b2" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#999" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#7f7f7f" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#666" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#4c4c4c" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#333" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#191919" /></svg>
<svg class="block"> <use xlink:href="#thebell" fill="#000" /></svg>
Удалим все padding-и и margin-и, добавим высоту и ширину!
svg.block {
padding: unset;
display: block;
width: 25px;
height: 25px;
margin: unset;
}
Результат покрасим svg используя defs + use + symbol
Изменение цвета картинки в теге svg
Почему то самое простое вспоминается в самый последний момент!
Вообще - самый простой способ покрасить svg картинку - это изменение в самом коде svg.
Результат покраски картинки svg в красный.
Покрасим svg теперь в желтый :
Результат покраски картинки svg в желтый.
цвет svg картинки изменить цвет svg картинки как поменять цвет svg картинки как поменять цвет svg картинки через css как изменить цвет картинки svg в css как поменять цвет svg картинки через css как изменить цвет svg через css