Как покрасить svg иконку
Перейти к содержимому

Как покрасить svg иконку

  • автор:

Нативный способ покрасить 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

Как покрасить SVG-иконку?

Доброго вечера.
Есть SVG-символ, который далее вставляется и используется через use. В общем, стандартный набор. Но есть одно «но» — он не реагирует на свойство color, вообще. Иконка упрощенно представляет собой кольцо, созданное через тэг path (да, я знаю, что для кругов path не используется, но иконки делались через иллюстратор путем конвертации путей из фотошопа, и не хотелось бы возиться с генерируемым кодом — работаем с тем, что есть).

Прочел, что необходимо убрать атрибуты fill, stroke, т.к. они имеют больший приоритет, нежели css. Ок, хорошо. Но поведение становится непонятным и неадекватным:
— если я убираю stroke у элемента path, исчезают все видимые элементы
— если я уберу и атрибут fill тоже, получается сплошной круг, а нужно кольцо
— во всех вышеперечисленных случаях ничего не реагирует на css-правило с color

Как покрасить иконку через css? Фиддл всего этого дела.

  • Вопрос задан более трёх лет назад
  • 16774 просмотра

Заливка и обводка

Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.

Атрибуты заливки и обводки (Fill and Stroke Attributes)

Раскраска (Painting)

Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.

rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> 

Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.

Примечание: Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.

Обводка (Stroke)

Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.

svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> svg> 

Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.

Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.

Есть три возможных значения для stroke-linecap:

  • butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
  • square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
  • round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.

Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.

svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> svg> 

Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:

  • miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
  • round создаёт закруглённый сегмент линии
  • bevel создаёт новый угол для помощи в переходе между двумя сегментами

Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .

svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> svg> 

В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.

Примечание: Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.

Также есть дополнительные stroke и fill свойства: fill-rule , которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit , which determines if a stroke should draw miters и stroke-dashoffset , который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

Использование CSS (Using CSS)

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill , stroke , stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width , height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

Примечание: Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые — нет.

CSS может использоваться инлайн через атрибут style :

rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> 

или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе , как это делается в HTML, она включается в зону , предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> defs> style type="text/css"> ]]>style> defs> rect x="10" height="180" y="10" width="180" id="MyRect"/> svg> 

Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:

#MyRect:hover  stroke: black; fill: blue; > 

Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:

 svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> rect height="10" width="10" id="MyRect"/> svg> 

где style.css выглядит примерно так

#MyRect  fill: red; stroke: black; > 
  • « Предыдущая статья
  • Следующая статья »

Как изменить цвет 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 :

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

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

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

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

Как изменить заливку svg картинки

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

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

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

Как изменить 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
  • Стилизация Скролла
  • События Формы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *