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

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

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

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

Меняем цвет у svg изображения.

  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 в желтый.


Вас может еще заинтересовать список тем : #SVG |
Последняя дата редактирования : 12.01.2021 18:12
//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

Последние комментарии :
Марат :
26/01/2021 12:28
Внимание! На странице описывается система комментирования ECOMMENT.SU.Здесь и далее, на всем сайте, стоит другая…
подробнее.
Марат :
26/01/2021 10:58
На сайте, комментирование моё собственное, которое не знаю, когда …
подробнее.
Вали :
26/01/2021 05:51
А вот эти комментарии тут - это же другие, не те о которых статья?Не…
подробнее.
Вали :
26/01/2021 05:44
Привет, классно!
подробнее.
Марат :
25/01/2021 10:08
Спасибо за добрые слова!Всегда пожалуйста!Приходите…
подробнее.