Как поменять цвет svg картинки через css

Как изменить цвет SVG в CSS

Для изменения цвета SVG-изображения с использованием CSS вы можете воспользоваться свойством fill . Вот несколько способов, которые могут быть полезными:

1. Прямое присвоение цвета: Вы можете указать конкретный цвет, присвоив его свойству fill элемента SVG. Например:

В этом примере цвет заполнения SVG-изображения будет установлен на красный.

1. Использование классов: Вы также можете определить класс в CSS и применить его к элементу SVG, чтобы изменить его цвет. Например:

Теперь все элементы SVG с классом «red» будут иметь красный цвет заполнения.

1. Использование псевдоклассов: Вы можете использовать псевдоклассы, такие как :hover или :active , чтобы изменить цвет SVG при определенных действиях пользователя. Например:

svg:hover

Теперь цвет заполнения SVG-изображения будет меняться на синий при наведении на него указателя мыши.

1. Использование инлайновых стилей: Вы можете добавить атрибут style к элементу SVG и задать значение свойства fill непосредственно в HTML-коде. Например:

Таким образом, цвет заполнения SVG-изображения будет зеленым.

Это лишь некоторые примеры способов изменения цвета SVG с использованием CSS. В зависимости от вашего конкретного случая и структуры вашего документа, возможно, потребуется применить разные подходы.

Сайт, на котором вы сможете найти нужную информацию. Мы постарались создать мини-гугл. Собрать на одном ресурсе всю полезную информацию. Мы можете добавлять материал на сайт.

Как изменить цвет svg

Изменим цвет svg картинки двумя способами: сначала используем свойство fill , затем mask-image .

Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill

Цвет svg картинки изменяется с помощью CSS свойства fill — заливки.

Если svg в вставлено в HTML в виде тега img , то нужно добавить следующий js-код:

$("img.img-svg").each(function () < var $img = $(this); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); $.get(imgURL, function (data) < var $svg = $(data).find("svg"); if (typeof imgClass !== "undefined") < $svg = $svg.attr("class", imgClass + " replaced-svg"); >$svg = $svg.removeAttr("xmlns:a"); if (!$svg.attr("viewBox") && $svg.attr("height") && $svg.attr("width")) < $svg.attr("viewBox", "0 0 " + $svg.attr("height") + " " + $svg.attr("width")) >$img.replaceWith($svg); >, "xml"); >);

В данном примере мы используем класс img-svg , который мы добавляем к изображению в HTML-странице, благодаря которому svg-картинка из img станет inline svg.

Изображение было в виде тега img :

Изображение стало inline svg :

Теперь можем изменить цвет нашей svg картинки, используя свойство fill , как в первом примере.

Какие ещё свойства можно применить к svg картинке

.img-svg path, .img-svg polygon < fill-opacity: 0.5; /* прозрачность заливки */ stroke: #ff6c00; /* цвет обводки */ stroke-width: 10px; /* толщина обводки */ stroke-opacity: 0.8; /* прозрачность обводки */ >

Это далеко не полный перечень свойств, которые можно использовать для работы с svg, это лишь самые часто используемые.

Второй способ. Реализуем с помощью свойства mask-image

В HTML создадим два элемента: div и ссылку:

Используем свойство mask-image чтобы задать фон для картинки и background-color чтобы задать цвет:

.link < width: 30px; height: 26px; background-color: #000; display: block; mask-image: url("img/youtube.svg"); >.div < height: 55px; width: 62px; background-color: #000; mask-image: url("img/youtube.svg"); >

Пробуем изменить цвет:

Полезные ссылки

• Как вставить SVG на сайт.
• Анимация SVG.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

• JavaScript: Работа с Массивами
• Наличие Динамически Добавленного Элемента
• Стилизация Input File
• Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
• Стилизация Скролла
• События Формы

Изменить цвет SVG — изображения

Вношу правки в верстку сайта на Laravel , весь CSS код билдится из SCSS . Код добавления SVG картинки выглядит так:

Почему то не срабатывает

До этого верстал только на голом HTML + CSS сейчас пытаюсь постигнуть новые фишки, сразу видны пробелы в знаниях. Можете подсказать что я делаю не так? Я так понял беда в том, что сначала картинка подтягивается на сайт в своем исходном, а затем я пытаюсь его изменить обычным CSS. Обязательно прибегать к помощи JS? Внес исправления, смена цвета заработала, но 1) :hover таким же образом прописанный не работает. В чем может быть дело? 2) object оборачивается в ссылку, но по клику на него переход не происходит, как это можно исправить?

 
[. ] slug]) >>" title="title >>"> Читать дальше   
 //код svg теперь выглядит так     

Отслеживать
Сергей Курамшин
задан 12 фев 2018 в 7:14
Сергей Курамшин Сергей Курамшин
207 1 1 золотой знак 4 4 серебряных знака 13 13 бронзовых знаков

Это не пробелы в знаниях, а пробелы в технологиях) Проблема в том, что svg работает как отдельный документ, и кажется что js тоже не поможет. Есть поход через якорную ссылку указывать стиль внутри svg и там менять цвет, но не работает в сафари и может еще где-то.

12 фев 2018 в 7:30

Странно, читал много статей, где явно говорилось что именно в таком формате как у меня svg-изображение реально перекрасить, только почему то именно в моем случае их примеры не работали

12 фев 2018 в 7:52

@СергейКурамшин добавьте код иконки svg, от её кода, точнее её стилей на 100% зависит решение ваших проблем. Пока информации мало, вы привели код стандартного добавления svg в HTML

12 фев 2018 в 9:04

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Наверное полезно дать ответ и на более широкий круг вопросов стилизации иконок.
Есть очень полезная статья Styling SVG Content with CSS — перевод,- оригинал

Для решения вашей задачи, полезен раздел статьи — Каскадирование стилей

Из этого раздела можно сделать вывод, что наивысшим приоритетом обладает внутренние стили svg.

Чтобы устранить доминирование приоритета внутренних стилей svg необходимо:

1. Удалить в коде иконки все атрибуты стилизации у патчей, полигонов и т.д все инлайновые стили — fill , stroke
2. Добавить во внешней таблице стилей path
3. Стилизацию иконок уже делать в таблице стилей на уровне классов иконок
4. В шапку файлов *.svg иконок добавить строчку, указывающую на внешнюю таблицу стилей
5. Файл таблицы стилей и файлы SVG лучше разместить в одной папке, так как браузеры чувствительны к этому, больше других chrome

Update

Добавляете спрайт с иконками в HTML

вызываете иконку из спрайта по её id с помощью команды

Вот более подробно о нюансах добавления и стилизации иконки из спрайта

Смотрите, пробуйте варианты, уверен, что у вас получится. Так как это получается у многих, кто хочет добиться результата.

Отслеживать
ответ дан 12 фев 2018 в 9:36
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков

В моем случае картинки в формате svg просто лежат в папке images, такие мне отдал дизайнер. А так как я в первый раз имею дело с svg то даже не знаю как их встраивать. Почитал несколько статей, в одной было написано, что вставка через object со ссылкой на картинку — является одним из лучших решений. Как то так. Можно ли поменять стиль если грузить просто картинкой.svg?

13 фев 2018 в 0:31

Воспользовался вашей инструкцией и все получилось) Спасибо большое. Надоедает, правда идти по всем svg и дописывать xml-stylesheet, но зато раз и навсегда. Можно делать с иконками что угодно. Упустил из виду, что svg это просто path’ы прописанные в коде)

13 фев 2018 в 1:51
Ховер таким же образом прописанный не работает(
13 фев 2018 в 6:03

@СергейКурамшин код иконки добавь в вопрос пожалуйста, не понимаю, почему до сих пор не сделали этого. Проще же будет понять причину

13 фев 2018 в 6:38

@СергейКурамшин Видите, как слова можно понимать по разному.:) Я аж три ответа написал, основываясь на ваших комментариях. А был бы код весь сразу в вопросе, то был бы один, конкретный ответ сразу. Сейчас вижу, что вы смешали два способа вместе 1. инлайн — непосредственное добавление svg кода в Html и добавление спрайта с иконками svg через тег object . Не стоит их смешивать или инлайн или object

13 фев 2018 в 8:22

Ответ #2

Для быстрого решения проблем со стилизацией иконок.
Данная техника подойдет, если нужно быстро добавить иконки в свой проект, которые можно раскрасить в любой цвет из внешнего файла CSS .
Причём иконки высокого качества, практически полный набор на все случаи.
Иконки адаптивны и не теряют качества при масштабировании, так как это иконки SVG из которых состоит символьный шрифт — Google Material Icons

Выбирать иконки по названиям можно здесь

Выбираем нужную иконку с именем — favorite

Подключение иконки к HTML странице:

favorite , где

material-icons — общий класс для всех иконок
red — дополнительный класс, задающий цвет окраски иконки

Ниже пример с тремя одинаковыми иконками, которые раскрашены в разные цвета Добавлена анимация увеличения иконок при hover .

.material-icons < transform: scale(2); >i < margin: 100px 50px 50px 80px; transition: transform 1s ease-in-out; >i:hover < transform: scale(10); >.red .green .blue

 favorite favorite backup

Размер иконок также можно менять, здесь удвоенный исходный размер:

.material-icons

Отслеживать
ответ дан 12 фев 2018 в 12:14
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков
Александр, а иконки обязательно помещать в тег i или можно реализовать в любом теге?
12 фев 2018 в 12:28
@Air попробуй, я пробовал в тег

— получилось, но решил для себя, что лучше в , как в оригинале

12 фев 2018 в 12:30
Ну видать можно)))
12 фев 2018 в 12:32

Вот именно такие иконки были до меня) Сказали поменять на десигнерские) А десигнерские являют собой просто картинку в формате SVG и никакие манипуляции с ней не канают(

13 фев 2018 в 0:28

Ответ #3

Ответ на комментарии

Вот именно такие иконки были до меня) Сказали поменять на десигнерские) А десигнерские являют собой просто картинку в формате SVG и никакие манипуляции с ней не канают

Ховер таким же образом прописанный не работает

Стилизация изображений в формате image/png;base64 при наведении курсора

Представьте такую ситуацию,- дизайнер нарисовал очень красивую картинку, лого и т.д. Выполнил вашу просьбу, чтобы она была в векторном формате.
Но, рисовал её в растровом редакторе и сохранил её, как бы вектор, в формате base64.
То есть встроил растр в векторный формат. Обычная стилизация не работает.
Перерисовать вам в чистом векторе затруднительно.
В этом случае можно заменить стилизацию на обработку SVG фильтрами.

Основная идея — в исходном состоянии на изображение накладывается один фильтр

А при наведении курсора применяются другие цветные фильтры id=»RedFilter» , id=»GreenFilter»

.R1:hover < filter:url(#RedFilter); >.G1:hover < filter:url(#GreenFilter); >.B1:hover

Нативный способ покрасить SVG-иконки

Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.

Чем нам полезен USE?

Этот тэг задуман для переиспользования символов и целых SVG-блоков на странице. Но в современных браузерах (прости, IE) он может даже доставать внешние ресурсы!

Внешние SVG должны быть на том же домене, так что CDN не подойдет. Пока.

Это позволяет нативным образом вставить SVG в Shadow DOM, почти как тэг IMG с атрибутом src , только с возможностью использовать CSS. И оно даже само работает с кэшем! Но нужно слегка подготовить иконки. Вот что надо сделать:

Сначала в каждой иконке нужно сделать символ с уникальным id и переместить viewBox в него.

Затем надо назначить fill (или stroke ) на currentColor , чтобы потом использовать CSS-правило color для задания цвета. Можно также задать эти атрибуты в inherit на других элементах, что позволит сделать двухцветные иконки (подробнее — в примере ниже).

Когда наши иконки подготовлены, остается только скинуть их в папку assets и использовать:

Компонент именованных иконок для Angular

Писать путь и обращаться к символу каждый раз утомительно. Давайте сделаем Angular-компонент, который будет находить иконки по имени. С помощью Dependency Injection это сделать очень просто.

Нам понадобится токен для предоставления пути до всех наших иконок и простой компонент. Он будет формировать href исходя из имени и заданного пути. Мы даже можем повесить его на нативный SVG с помощью селектора: так мы вынесем наружу заботу о размере.

Надо иметь в виду, что Safari до 12.1 поддерживает только устаревший синтаксис xlink:href . Так что лучше использовать оба варианта.

Сделаем stroke и fill прозрачными для использования нескольких цветов в CSS:

Заключение

У этого подхода есть ограничения — отсутствие поддержки IE и кросс-доменности. Однако, если они для вас не критичны, данное решение может стать хорошей альтернативой другим способам.

Вам не придется включать иконки в бандл приложения или скачивать их запросами. Вы можете положиться на кэш для ускорения загрузки, а отсутствие DOM-операций делает этот подход быстрее и безопаснее ручной вставки исходников. Всем ярких решений!

• Блог компании TINKOFF
• CSS
• Работа с векторной графикой
• HTML
• Angular