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

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

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

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



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

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

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

Результат:


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

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

Итого вывод!

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

Попробуем другим способом:

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



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

Наверное самый простой способ изменить цвет 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"></svg>

Выведем его прямо здесь:

Внутрь тега "path" - добавляем цвет fill="red"

fill="red"

Весь код:

<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 с измененным цветом:

Пример №2 изменения цвета 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 в желтый.

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



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

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

Тег div

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

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

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

Код изменения цвета svg используя тег div

<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 картинки.

Далее возьмем выше приведенный код с изменным цветом svg и разместим его прямо здесь, чтобы увидеть результат:

Как подобрать/изменить цвет svg через исследовать элемент?

Можно изменять и подбирать цвет обычным образом, через исследовать элемент по блоку, справа находим background, нажимаем, выбираем нужный цвет для "svg"

Нажмите, чтобы открыть в новом окне.



Новый цвет svg(пример)

вы подобрали новый цвет для svg, код получился:

<div style="width: 70px; height: 70px;display: inline-block;background: #09ef05;-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 другого цвета.

Выведем новый svg с новым цветом:

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



Изменение цвета svg с помощью mask-image

Изменим "цвет svg" с помощью mask-image, для этого вам понадобится:


Файл svg, который должен существовать физически:

//dwweb.ru/__img/__svg/bell/bell_95.svg

Создадим новый div + добавим ему произвольный class

<div class="example"></div>

С помощью стилей добавим с помощью "mask-image" наш svg:

.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);

}

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

Код svg изменения цвета с помощью mask-image

<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 с помощью mask-image

Далее... нам остается только и всего-то ...вывести данный код на страницу:

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



Изменение цвета svg используя use + symbol + fill

Рассмотрим еще один из способов покрасить svg будем использовать "use + symbol + fill" - для этого вам понадобится:

Любой svg:

<svg>
<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"/>
</svg>


Выведем его прямо здесь:

Добавим в тег svg attribute style + position absolute(style="position:absolute;left: 10000000000px;") - это значит... что нам не нужно чтобы данный код выводился где-то на странице, поэтому переместим его куда-то за пределы монитора...

<svg style="position:absolute;left: 10000000000px;">

Внутрь svg помещаем тег "symbol" + произвольный id:

<symbol id="thebell">




Соберем код нашего первого svg:

<svg style="position:absolute;left: 10000000000px;">

<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>

</svg>

Что дальше?

Вы создали svg изображение к которому мы можем обратиться!

Далее:

Меняем цвет svg используя use + symbol + fill

Для этого вам опять понадобится проделать несколько манипуляций:

Снова создаем "svg" помещаем в первый тег произвольный class

<svg class="block">

Css:

Пропишем свойства для класса block: удалим все padding-и и margin-и, добавим высоту и ширину!

svg.block {

padding: unset;

display: block;

width: 25px;

height: 25px;

margin: unset;

}

Во внутрь нашего нового svg помещаем тег "use", где обращаемся к тому id, который в самом начале(в данном пункте первый svg)...:

+ добавим цвет с помощью fill="red":


<use xlink:href="#thebell" fill="red">

Соберем код нашего нового покрашенного svg:

<svg class="block"> <use xlink:href="#thebell" fill="red"></svg>

Выведем данный код прямо здесь:

Пример изменения цвета svg используя use + symbol + fill

Несколько примеров использования "use + symbol + fill".

Не забываем о первом svg в данном пункте... - он у нас где то слева за пределами монитора!


- <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>

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

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

---