Нативный способ покрасить 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 в CSS
В этой статье рассмотрим несколько примеров, как задать цвет любому изображению в формате svg с использованием css-стилей.
Есть множество вариантов, как использовать SVG. От того, как вы применяете SVG и будет зависеть способы редактирования.
Давайте начнем с базы.
Основы
Что такое SVG?
SVG (Scalable Vector Graphic) — масштабируемая векторная графика. Это уникальный формат для изображений. В отличии от привычных нам форматов, в svg не используются пиксели. Здесь картинка строется на векторах. Это значит, что вы можете, например, масштабирать размер картинки до любых значений и при этом не терять качество.
Изображение svg можно вставить кодом прямо в файл html — это будет инлайновый вариант:
А можно вставить через тег img:
Если заглянуть «под капот» и изучить код, который отвечает за отрисовку SVG, то можно выделить два свойства, которые отвечают за цвет — fill (заливка) и stroke (обводка). Их можно редактировать и тем самым менять цвет иконки.
Давайте выделим несколько методов, которые позволяют менять цвет SVG.
1. Меняем цвет с помощью свойства fill
Смотрите, у нас два квадрата — они идентичны, за исключением свойства fill. В одном случае мы залили квадрат красным цветом, в другом вообще не прописали это свойство.
Свойство fill можно применять к отдельному вектору в вашем изображении.
2. Меняем цвет в файле style.css
Или в любом другом файле css, который подключен к html.
Как покрасить SVG-иконку?
Доброго вечера.
Есть SVG-символ, который далее вставляется и используется через use. В общем, стандартный набор. Но есть одно «но» — он не реагирует на свойство color, вообще. Иконка упрощенно представляет собой кольцо, созданное через тэг path (да, я знаю, что для кругов path не используется, но иконки делались через иллюстратор путем конвертации путей из фотошопа, и не хотелось бы возиться с генерируемым кодом — работаем с тем, что есть).
Прочел, что необходимо убрать атрибуты fill, stroke, т.к. они имеют больший приоритет, нежели css. Ок, хорошо. Но поведение становится непонятным и неадекватным:
— если я убираю stroke у элемента path, исчезают все видимые элементы
— если я уберу и атрибут fill тоже, получается сплошной круг, а нужно кольцо
— во всех вышеперечисленных случаях ничего не реагирует на css-правило с color
Как покрасить иконку через css? Фиддл всего этого дела.
- Вопрос задан более трёх лет назад
- 16726 просмотров
Редактируем иконки: раскрашиваем иконку SVG
Итак, вы скачали иконку SVG и обнаружили, что её надо немного изменить. В этой статье мы рассмотрим, как залить пустые части цветом.
Открываем иконку в Figma.
Figma заливает один вектор одним цветом (либо одним градиентом). Если нам надо сделать заливку несколькими цветами, вектор надо продублировать.
Мы будем делать цветную иконку с контуром, поэтому продублируем заднюю часть и перейдем в режим редактирования (дважды кликаем по вектору, либо выделяем и жмем Enter).
Figma может залить только замкнутое пространство. Если есть разрывы, то заливка не будет видна.
Закрываем область для заливки с помощью пера: в режиме редактирования выбираем перо (P) и цепляясь к привзякам соединяем точки вокруг пустого пространства.
Выбираем инструмент заливки Paint Bucket (B).
Наводим на область, которую надо залить, и кликаем.
Видео заливки
Проделываем аналогичные манипуляции с внутренней частью.