Нативный способ покрасить 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 картинки двумя способами: сначала используем свойство 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 в html и менять цвет
Тег-обёртка для отображения векторной графики на странице.
Время чтения: 8 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Контейнер svg
- Обводка stroke
- Заливка fill
- background-image
- Вставка в HTML
- Учебные руководства
- Документация MDM Web Docs
- Алёна Батицкая советует
Контрибьюторы:
- Светлана Коробцева ,
- Сергей Большаков
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
SVG — векторный формат графики, доступный в вебе. Формат основан на технологии XML.
До появления SVG мы могли использовать только растровые изображения: форматы JPG, PNG. Но растровые изображения имеют ряд недостатков:
- Растровые изображения плохо поддаются масштабированию. Это стало особенно актуальным с появлением ретина экранов.
- Растровые изображения, как правило, весят существенно больше, чем их svg-собратья.
- Растровые изображения можно редактировать только при помощи графических редакторов, в то время как svg-изображения представляют собой читаемый код.
- Растровые изображения статичны. SVG внутри себя может содержать CSS-стили или JS-скрипты.
Пример
Скопировать ссылку «Пример» Скопировано
Для сравнения посмотрим на PNG и SVG версии одного и того же изображения:
Как вы видите, второй вариант выглядит великолепно в отличие от первого. Это нам на руку при работе с адаптивными сайтами и с сайтами, которые должны круто смотреться на экранах с повышенной плотностью пикселей (так называемые ретина-экраны).
Заглянем в исходный код svg-картинки:
xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24"> d block-code__original-line"> 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" />svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24" > path d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" /> svg>Не пугайтесь большому количеству странных цифр. Это описание координат каждой из точек изображения. Если вам нет необходимости редактировать SVG, то не обязательно понимать эти цифры.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Чаще всего svg-иконки или изображения вам будет предоставлять дизайнер или вы сможете найти их на различных стоках:
Вам редко придётся писать или менять файл с SVG руками, поэтому тут мы рассмотрим только те обязательные части, с которыми вы должны будете взаимодействовать при необходимости.
Контейнер svg
Скопировать ссылку «Контейнер svg» Скопировано
SVG не может быть записано без оборачивающего парного тега svg . Так браузер поймёт, что читать этот код нужно по особым правилам и отрисует картинку на странице.
Обводка stroke
Скопировать ссылку «Обводка stroke» Скопировано
Мы можем управлять толщиной и цветом линии, которая будет соединять все перечисленные точки svg-изображения. Причём можно задать один общий атрибут stroke для контейнера , а можно задавать его каждому отдельному вложенному элементу, сделав обводку разных частей картинки разного цвета.
Подробнее об атрибуте stroke
Заливка fill
Скопировать ссылку «Заливка fill» Скопировано
Мы можем задать заливку нарисованной фигуры или оставить её прозрачной, только с обводкой. Если решите залить фигуру, то для этого используйте атрибут fill .
Подробнее об атрибуте fill
Как подключать
Скопировать ссылку «Как подключать» Скопировано
Есть несколько способов подключения svg-изображения к веб-странице. Каждый из них имеет свои преимущества и недостатки.
Скопировать ссылку «img» Скопировано
Самый простой способ — использовать тег
и указать путь до svg-картинки в значении атрибута src .
img class="icon" src="img/svg/dots.svg" alt="dots icon">При таком способе мы можем легко управлять размерами картинки на странице. Но есть и минусы — не получится изменить цвет фона или заливки у самого SVG при помощи CSS.
background — image
Скопировать ссылку «background-image» Скопировано
Если svg-картинка не является контентной, то её без особого труда можно подключить в виде фона для элемента
Facebooka href="https://facebook.com" class="icon fb"> Facebook a>.icon display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: contain;> .fb background-image: url(../img/svg/fb.svg);>.icon display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: contain; > .fb background-image: url(../img/svg/fb.svg); >В этом случае мы также не имеем возможности управлять стилями SVG через CSS.
Вставка в HTML
Скопировать ссылку «Вставка в HTML» Скопировано
Код SVG можно вставить прямо в HTML-разметку станицы.
xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24" > d block-code__original-line"> 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" />div class="dots"> svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24" class="dots-icon" > path d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" /> svg> div>При таком способе подключения мы можем управлять стилями SVG через стили. Это даёт возможность даже анимировать векторное изображение! ��
.dots-icon animation: animation 3s infinite alternate;> @keyframes animation from fill: red; > to fill: green; >>.dots-icon animation: animation 3s infinite alternate; > @keyframes animation from fill: red; > to fill: green; > >Неприятная особенность: если одна и та же SVG-картинка используется в нескольких местах на сайте, и в какой-то момент вы захотите в ней что-то изменить, то нужно будет найти все вставки и вносить исправления в код. При вставке SVG при помощи
или background — image достаточно будет внести изменения в svg-файл и правки применяться ко всем картинкам.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
- fill — отвечает за заливку фигуры. Может использоваться как для всего контейнера svg , так и для отдельных частей. Более подробно тут → fill.
- stroke — отвечает за обводку фигуры. Может использоваться как для всего контейнера svg , так и для отдельных частей. Более подробно тут → stroke.
- view Box — атрибут, отвечающий за размеры окна отображения. Значением будет 4 цифры: min — x , min — y , width и height . В примере выше у контейнера svg указано следующее view Box = «0 0 24 24» . Значит окно отображения будет начинаться в координатах 0 по оси x и 0 по оси y, а по ширине и высоте будет 24 пикселя. Может указываться как для отдельных элементов, так и для всего контейнера. При помощи этого атрибута можно кадрировать изображение, указывая нужные значения.
- width и height — атрибуты, указывающие размеры svg-элемента. Значением может быть число без указания единиц измерения, тогда браузер будет воспринимать его как пиксели: width = «100» height = «100» . Можно указать в процентах: width = «100 % » height = «100 % » . Могут указываться как оба сразу, так и по отдельности. Если планируете вставлять SVG в HTML кодом, то отдайте предпочтение атрибуту view Box вместо указания ширины и высоты. Тогда при изменении размеров через CSS картинка будет подстраиваться под размеры с сохранением пропорций.
- preserve Aspect Ratio — атрибут, значение которого указывает браузеру нужно ли сохранять пропорции при масштабировании изображения. Если значение отличается от none , то состоит из двух частей: первая отвечает за выравнивания, вторая отвечает за пропорции.
Значения для выравнивания:
- x Min Y Min , x Mid Y Mid , x Max Y Max — выравнивает изображение по левому верхнему углу, по центру по обеим осям или по правому нижнему углу.
Значения для обрезки:
- meet — картинка стремиться уместиться целиком с сохранением пропорций. Чем-то похоже на поведение background — size : contain для фона.
- slice — изображение пытается заполнить собой всё доступное пространство. Похоже на background — size : cover .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если захотите внести какие-то сложные правки в SVG, а дизайнера под рукой нет, то можно использовать SVG-Edit, SVG-Edit Online, inkscape или Adobe Illustrator.
�� Всегда перед использованием SVG в проекте прогоняйте его через оптимизатор SVGO. Он удалит всё ненужное, код станет приятнее и будет меньше весить.
�� С SVG можно взаимодействовать при помощи JavaScript ��
Документация и руководство по SVG
Скопировать ссылку «Документация и руководство по SVG» Скопировано
Учебные руководства
Скопировать ссылку «Учебные руководства» Скопировано
- Перевод руководства от MDM Web Docs — SVG — учебное руководство;
- Руководство от W3C с отличными иллюстрациями — An SVG Primer for Today’s Browsers..
Документация MDM Web Docs
Скопировать ссылку «Документация MDM Web Docs» Скопировано
- Справочник SVG элементов;
- Справочник SVG атрибутов;
- Общий список ссылок на ресурсы по SVG от MDM Web Docs SVG. Документация MDM Web Docs.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� В русскоязычном вебе, пожалуй, нет никого, кто знал бы о формате SVG лучше, чем Йоксель. Очень советую заглянуть на её сайт и изучить подборку полезных ссылок, а также её материалы по этой теме.
Как вставлять SVG-иконки в HTML — 5 способов и выбор наилучшего
1 . Самый простой и быстрый способ (но не самый лучший) это использовать тег img. Иконка добавляется как обычная картинка. Вот пример:
В атрибуте src указывается путь до иконки.
В этом случае не получится как-то манипулировать с картинкой, например, менять цвет.
2 . Наилучшим способом считается использовать SVG-спрайт. SVG-спрайт — это набор всех иконок в одном файле. То есть нужно все ваши svg-иконки поместить в 1 файл, например, sprite.svg.
Например, у вас есть 2 иконки:
Нужно создать файл sprite.svg и поместить в него эти иконки таким образом:
Здесь принцип такой. Внутрь тега помещаются все иконки, только у ваших иконок меняется svg на symbol. Для каждой иконки () задается обязательно id. Файл спрайта готов.
Если вам нужна интерактивность от иконок. Например, чтобы поменять цвет SVG при наведении курсора. Тогда у каждой иконки нужно удалить атрибуты fill и stroke, если они есть.
Теперь использовать иконку в нужном месте HTML-кода нужно так:
В теге use необходимо указать путь до файла sprite.svg и id нужной иконки. Тег use это такая штука, которая позволяет использовать нечто где-то уже заданное. Элемент use в нашем случае дублирует уже определенную иконку.
Можно не создавать файл sprite.svg, а поместить весь его код в ваш HTML. Например, в самый низ перед закрывающим тегом