Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

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

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

Как изменить цвет svg картинки, сколько способов есть заменить цвет svg изображения с помощью css.
Если слабо представляете, что такое svg, то рекомендую ознакомиться.

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

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

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

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

    Результат:

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

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

    Итого вывод!

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

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

  2. Как изменить цвет у 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 другого цвета.

  3. Изменение цвета картинки 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>

  4. покрасим 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

  5. Изменение цвета картинки в теге 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 в желтый.


Последняя дата редактирования : 07.04.2021 01:58
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
цвет svg картинки изменить цвет svg картинки как поменять цвет svg картинки как поменять цвет svg картинки через css как изменить цвет картинки svg в css как поменять цвет svg картинки через css как изменить цвет svg через css

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.