SVG-спрайт — это файл для хранения векторной графики формата SVG. Записывается по принципу: file-name.svg
Для чего нужен SVG-спрайт?
Для динамической стилизации векторных изображений через CSS и оптимизации.
Чем хороши спрайты?
◌ Встроенные svg или по-другому "инлайн svg" занимают over-много места в html файле. Если одна и та же инлайн-иконка повторится на сайте 100 раз, то html будет долго грузиться + разметка станет нечитабельной. Используя спрайт, вы обойдетесь без лишнего дублирования кода — элементы будут ссылаться на один и тот же код во внешнем файле.
◌ Файл спрайта кешируется браузером и не загрузится при повторных посещениях страницы.
◌ Но можно же пользоваться обычными svg, а подключать через тег img или background-image? — скажете вы. Да, но стилизовать их динамически так, как захотите, вы не сможете. + навигация будет весьма затруднена, если в проекте лежат по отдельности 200 или тысяча иконок.
◌ Есть еще один жирный плюс: svg-спрайты отлично поддаются оптимизации, что делает сайт легче, а это повышает прибыльность клиента.
Как выглядит спрайт изнутри?
Допустим у нас есть три иконки
Давайте соберем из них спрайт icons.svg и рассмотрим его.
Обратите внимание, что за каждую отдельную иконку отвечает тег <symbol>. В нем есть уникальный id, который позволит обратиться к нужному элементу через html.
Как получить нужную иконку в свой HTML?
Вставим, например, сердечко.
Для этого нам понадобится элемент <svg>. В него вкладывается тег <use> c атрибутом href, в котором и прописывается путь к иконке. Путь состоит из обычного пути файла + значок решетка, за которым следует уникальный id того изображения, что вы хотите получить. В нашем случае это #icon-heart.
Спасибо за прочтение!
В дополнение скоро появятся статьи:
- Как создать SVG-спрайт своими руками?
- SVG-спрайт. Основы стилизации.