Как подключить svg в css

Описание и примеры стандартных функций SVG

Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax

Как добавить SVG в HTML5 страницу

Использование тега
Использование тега
Использование тега
Использование непосредственного встраивания (inline SVG )
Использование тега
Использование CSS Background Image

1. Использование

Если вы планируете использовать более продвинутые функции SVG, такие как применение таблицы стилей CSS или внедрение скриптов, то
тег HTML5 лучший способ.

Your browser does not support SVG

Для старых браузеров не поддерживающих SVG есть оригинальный способ замены SVG изображения фоллбек картинкой png :

Браузер не понимающий SVG проигнорирует тег и перейдет к следующему тегу и обработает его, как обычный HTML тег и выведет картинку.
Для проверки работоспособности SVG анимации кликните на кнопки “GO” и “STOP” .

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

/* SVG specific fancy CSS styling here */
2. Использование тега.

Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов .

Это может быть хорошим методом, если вы хотите полностью отделить SVG код и скрипт на вашей главной странице. Однако манипуляции SVG изображениями с главной страницы при помощи В данном примере анимация работает, так как команды на её реализацию находятся внутри файла SVG.

3. Использование тега.

SVG документ может быть добавлен на вашу веб страницу, как любое другое изображение:

Для браузеров не воспринимающих SVG David Bushell предложил прием подмены *.svg изображением *.png .

Можно, как обычно для любого другого изображения задать ширину, высоту. Но почему этот способ добавления SVG, не стал самым распространенным способом?

По соображениям безопастности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE9 , Safari , Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.

4. Использование непосредственного встраивания (inline SVG ).
< title >Embedded SVG < / title >
< h1 >Embedded SVG < / h1 >

Этот метод работает почти во всех HTML5 браузерах и также поддерживает анимацию, скрипты и CSS.
Но должны ли мы использовать его?

Такой вариант возможен для небольших SVG изображений или для встраиваемых с помощью JavaScript изображений, но я рекомендую Вам сохранять эти SVG изображения в отдельные файлы, если это возможно. Так как этот метод не позволяет поддерживать кэширование.

5. Использованиетега.

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

Как подключить svg в css

Тег-обёртка для отображения векторной графики на странице.

Время чтения: 8 мин

Открыть/закрыть навигацию по статье

Кратко
Пример
Как пишется
1. Контейнер svg
2. Обводка stroke
3. Заливка fill
2. background-image
3. Вставка в HTML
1. Учебные руководства
2. Документация MDM Web Docs
1. Алёна Батицкая советует
Контрибьюторы:
- Светлана Коробцева ,
- Сергей Большаков
Обновлено 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-картинка не является контентной, то её без особого труда можно подключить в виде фона для элемента
```
  Facebook  a 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

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
```
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 
```
Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Первый способ

Первый и самый простой — элемент , который размещается прямо в HTML-коде. Это эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.

Второй способ

Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.
```
.picture
```
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.

Третий способ

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

С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты. Можно, например, менять цвет заливки при наведении или даже анимировать векторное изображение.
```
.navigation-icon
```
width — ширина в пикселях или процентах.

height — высота в пикселях или процентах.

viewBox — положение и размер области просмотра.

Значение fill отвечает за цвет изображения.

SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Если хотите закопаться глубже, почитайте SVG — учебное руководство от MDN Web Docs.

В итоге: способов множество и все чем-то хороши. Выбирайте подходящий под ваши задачи.

Материалы по теме
- Как проектировать, создавать и анимировать SVG
- Как сделать интерактивную SVG-диаграмму
- Форматы изображений для веба
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

Что такое HTML?

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

Основы разметки

Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.

Теги обычно идут парами: открывающий тег и закрывающий тег . Например:
```
Мой заголовок
 Это мой первый абзац. Привет, мир!
 
```
Некоторые теги можно не закрывать:

Теги и атрибуты

У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:

Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.

Формы и элементы форм

Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML

Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.

Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация

Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:

Таблицы
```
  Имя  Возраст  
 Джон  30  
 Элис  25  
 
 
```
Использование изображений

Семантическая разметка

Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
```
  Заголовок статьи
 
 Первый абзац статьи.
 
 Автор статьи
 
 
 
```
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML

Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок

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

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как создавать адаптивные изображения. Атрибут srcset

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

Давайте рассмотрим несколько способов создания адаптивных изображений.

�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.
- 25 мая 2023
Как воздействовать на svg в css, подключив его отдельным файлом?

Я хочу использовать псевдоклассы CSS ( :hover , :active ), подключив svg отдельным файлом воздействовать на него в css. Я сделал вот так,
svg-файл:
```
    
```
Но я не могу достучаться туда CSS’ом, он не видит CSS-переменную, пример:
```
 :root  
```
Но если бы я просто вставил svg прямо в файл, то всё будет работать:
```
:root < --journey: red; >#journey-svg < --size: 100px; width: var(--size); height: var(--size); >#journey-svg:hover < --journey: green; >#journey-svg:active
```
```
   
```
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 31 янв 2022 в 19:53
Михаил Камахин Михаил Камахин
8,674 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков
svg работает в своей области видимости. Можете заинлайнить svg, тогда достучаться получится.
31 янв 2022 в 20:02
@nazarpunk что значит заинлайнить? Покажите ответом, если не сложно
31 янв 2022 в 20:03
это значит всключить svg напрямую в html, а не файлом.
31 янв 2022 в 20:04
@nazarpunk так я так и сделал, показал пример, но мне так не очень нравится
31 янв 2022 в 20:04
@МихаилКамахин Добавлен второй ответ с переменными
2 фев 2022 в 13:16

3 ответа 3

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

Добавление SVG иконок с помощью спрайта

Если иконок немного, то с помощью можно вручную сделать спрайт, не используя вебпак и другие подобные программы. Дополнительная польза,- написав один раз спрайт вручную, вы всегда будете знать, как настроить вебпак, чтобы получить аналогичный результат.

Формируем спрайт из SVG иконок

Копируете в svg файл, который планируете использовать, как спрайт, код иконок и оборачиваете его тегом присвоив ему ID.

Повторяете это для всех иконок, присваивая уникальные ID

Готовый файл нужно сохранить с раcширением *.svg и разместить его на сервере.

Ниже спрайт с двумя иконками: id=»headphones» и id=»phone» viewBox=»0 0 48 48″

viewBox добавлен, чтобы сделать иконки одинакового размера.

Ничего не выводится, так как скрывает содержимое до вызова иконки по ID с помощью

Перед этим необходимо добавить спрайт в HTML с помощью

Вызов иконки по ID с помощью

Ниже полный код вызова и стилизации иконок:
```
svg < display:block; >#u1,#u2,#u3,#u4 < transition:all 0.5s; fill:black; >#u1:hover < fill:red; >#u2:hover < fill:dodgerblue; >#u3:hover < fill: yellowgreen; >#u4:hover
```
Получаем результат: иконка с наушниками меняет цвет при :hover , а телефонная трубка не реагирует.

Это происходит из-за того, что в иконке с наушниками нет атрибутов представления, а у иконки телефонной трубки есть — fill=»#009688″ и вес стиля представления SVG, больше, чем стиль внешней таблицы CSS.

Каждый раз удалять стили представления из SVG довольно накладно. Но есть выход,- применить Computed стили, которые имеют наивысший приоритет.

Использование переменных для стилизации

В нашем случае будут использоваться переменные во внешнем CSS
```
#u1:hover
```
То есть видим, что можно менять несколько цветов одновременно.
Это даёт возможность для стилизации многоцветных иконок.
```
style="fill: var(--second-color, grey) 
```
```
svg < display:inline; >#u1,#u2 < transition:all 0.5s; fill:black; >#u1:hover < --primary-color: red; --second-color: purple; >#u2:hover < --primary-color: red; --second-color: dodgerblue; >#u3:hover < --primary-color: yellowgreen; >#u4:hover
```
Похожие публикации: