Меняем устанавливаем цвет svg картинки

Поддержи проект!!!

Меняем цвет у svg изображения используя css.

1. Как изменить цвет у svg картинки в теге img
2. Как изменить цвет у svg картинки в теге div
3. Изменение цвета картинки svg вариант 2
4. Покрасим svg используя defs + use + symbol
5. Изменение цвета картинки в теге svg

Скопировать ссылку

Как изменить цвет у svg картинки в теге img

Один из способов вывести картинку в формате ".svg" - это вывод в стандартном теге картинки "img":

<img src="//dwweb.ru/__img/__svg/bell/bell_95.svg">

Результат:


НО! Проблема заключается в том, что стандартными способами управления цветом css - вы это сделать не сможете!
Можно попробовать наложить маски css на svg

И здесь опять НО! Не на все виды "svg" можно накладывать маску!

Итого вывод!

Изменить цвет в стандартном теге img цвет картинки svg - изменить нельзя!

Попробуем разобрать другой способ:

Скопировать ссылку

Как изменить цвет у svg картинки в теге div

Мы можем изменить цвет "svg" - если заменим тег, например на div :

Нам понадобится : тег div

В тег помещаем все наши стили, с размером и задним фоном(background) который и будет красить наш svg:

width: 70px; height: 70px; display: inline-block; background: #FF0000;

Соберем весь код вместе:

<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 другого цвета.
Скопировать ссылку

Изменение цвета картинки 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 в любой месте:

Используя:

use xlink:href="#thebell"

После чего добавляем цвет 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>

Css:

Удалим все padding-и и margin-и, добавим высоту и ширину!

svg.block {

padding: unset;

display: block;

width: 25px;

height: 25px;

margin: unset;

}

Результат покрасим svg используя defs + use + symbol

Скопировать ссылку

Изменение цвета картинки в теге svg

Почему то самое простое вспоминается в самый последний момент!

Вообще - самый простой способ покрасить svg картинку - это изменение в самом коде svg.

<svg width="25" height="25"> <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" fill="red"/> </svg>


Результат покраски картинки svg в красный.

И еще пример:

Покрасим svg теперь в желтый :

<svg width="25" height="25"> <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" fill="yellow"/> </svg>


Результат покраски картинки svg в желтый.

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =