Как подключить svg спрайт отдельным файлом

Обновлено: 05.07.2024

Устанавливаем плагины(я это делаю глобально и потом линкую):

В gulpfile объявляем плагины:

Варим спрайт

Первый таск — создаем html-файл с тегами symbol.

Давайте разберемся, что тут происходит по частям.
Говорим откуда нам нужно взять иконки и минифицируем их. Переменная assetsDir — для удобства.

Удаляем атрибуты style и fill из иконок, для того чтобы они не перебивали стили, заданные через css.

Но я заметил у данного плагина один баг — иногда он преобразовывает символ '>' в кодировку '>'.
Эту проблему решает следующий кусок таска:

Теперь сделаем из получившегося спрайт и положим в папку:

symbol_sprite.html — и есть наш спрайт. Внутри он будет содержать следующее(для простоты у меня пара иконок):

Щепотка стилей

Теперь нам нужно сделать стили для нашего спрайта(в данном случае файл .scss). В плагине gulp-svg-sprites мы можем задать этот файл, но вот какая досада — его нельзя сделать при данной настройке:

Я решил сделать для создания scss отдельный таск. Если вы нашли другое решение, напишите в комментариях.

В свойстве cssFile объявляем, куда положить на scss файл(потом инклудим его).
В свойстве templates объявляем, где взять для него шаблон. Код моего шаблона:

Получаем _svg_sprite.scss следующего содержания:

Скомпилированный css будет таким:

Обратите внимание, что размеры иконок выражены через em, что позволит нам в дальнейшем управлять ими через font-size.
Составляем итоговый таск, чтобы запускать одну команду:

Подключаем на страницу

Итак мы получили html-файл с иконками и scss-файл с оформлением. Далее подключим файл на страницу, используя кеширование через localStorage. Этот процесс подробно описан в статье Caching SVG Sprite in localStorage.
Подключаем js-файл следующего содержания:

Все, мы подключили наш файл на страницу, после первой загрузки он кешируется.
Иконки я встраиваю через миксин jade, т.к. это быстро и удобно:

Теперь, чтобы встроить иконку вызываем миксин с её именем:

Открываем страницу в браузере:

Пока размеры иконок в натуральную величину и имеют стандартный цвет. Изменим это(не в сгенерированном файле, а в главном):

Результат:

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

Размытие

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

Особую благодарность выражаю @akella, который помог мне в написании данного решения.

Я использую систему значков для своего приложения с SVG Sprite, созданное приложением IcoMoon. В index.html у меня есть что-то вроде этого:

Мне нужно переместить svg sprite в файл, а затем включить его в качестве внешнего ресурса. Как я могу это сделать?

Создайте файл svg, sprites.svg

Вставьте в него следующее:

Затем всякий раз, когда вы хотите включить элемент use

(В это время у Internet Explorer возникла проблема с этим. IE понадобился бы другой подход. Если вы хотите, я также могу показать, что нужно для IE)

EDIT - Поддержка кросс-браузера: разместите элементы SVG sprite в файле XML и вызовите их в элемент defs.

XML файл с именем sprites.xml:

Пример файла HTML с Javascript для распространения элемента defs.

Существует множество способов встраивания SVG файла в документ без использования встроенного SVG-кода, как в разметке вашего примера. Перемещение SVG во внешний файл, безусловно, обеспечивает гораздо более чистый и редактируемый код. У Chris Coyier есть отличная страница Использование SVG в CSS-Tricks. Ниже приведен краткий обзор методов, описанных в этой статье:

Использование SVG в качестве <img>

Вы можете вставлять SVG файлы в тег <img> так же, как и JPG или PNG или любой другой файл изображения:

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

Обратите внимание, что по соображениям безопасности большинство браузеров отключат скрипты, связывание и другую интерактивность SVG файлов, добавленных с тегами <img> .

Использование SVG в качестве фонового изображения

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

Как и теги <img> , расширенные функции SVG отключены при использовании этого метода.

Использование SVG в качестве <object>

Вы также можете вставить SVG файл в <object> . Использование этой техники позволит вам использовать некоторые расширенные функции SVG, такие как скрипты:

Включая SVG с PHP

Если вы используете PHP или какой-либо другой серверный код, вы можете вставить SVG файл на страницу программно. Этот метод может быть полезен, если у вас есть еще более сложное приложение, требующее загрузки файлов SVG динамически или что-то в этом роде. В PHP ваш SVG include будет выглядеть примерно так:

Заключение

Есть почти наверняка другие способы добавления SVG файлов на веб-страницу, которую я здесь не рассматривал (iframe, возможно?), но я надеюсь, что вы найдете метод, который работает для вашего приложения в этом списке. Обратите внимание, что с каждым методом есть преимущества и недостатки, поэтому перед выбором метода нужно провести больше исследований. Есть также некоторые методы, которых, вероятно, следует избегать. Например, не используйте тег <embed> , потому что он не является и, вероятно, никогда не будет частью какой-либо спецификации HTML.

В очередной раз, просматривая вакансии на HTML-верстальщика, на предмет поиска темы для новой статьи, в списке требований работодателя, наткнулся на пункт – использовать в верстке SVG-спрайты.

Нам, верстальщикам, не стоит игнорировать требование работодателей, а идти в ногу с современными приёмами в верстке. Что по отдельности обозначают эти модные термины?

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

Спрайт – это один файл с графикой, состоящий из нескольких маленьких графических файлов, например иконок. Тогда, как SVG-спрайт – это масштабируемый один большой графический файл.

Почему SVG-спрайты – это хорошо?

Используя на сайте SVG-спрайты, вы убиваете сразу двух зайцев – получаете меньший вес у графики (SVG формат в разы легче, чем PNG и JPG) и меньше запросов к серверу.

А здесь один запрос, при масштабирование векторная графика не теряет в качестве и меньше весит.

Как сделать SVG-спрайт?

Скачиваем на сайте flaticon две иконки pinterest + github, в формате SVG. Теперь нужно два SVG-файла объединить в один.
В редакторе кода создадим sprite.svg и пропишем следующий код.
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 455.731 455.731">
<g>
<path ..здесь код отрисовки pinterest../>
</g>
</symbol>
<symbol viewBox="0 0 512 512">
<g>
<path ..здесь код отрисовки github../>
</g>
</symbol>
</svg>
Значения атрибутов viewBox, копируем из pinterest.svg и github.svg.
Открываем содержимое двух скачанных файлов и копируем внушительный код отрисовки иконки, тега path и вставляем между тегами <g></g>. Мы вынесли код иконок в отдельный файл sprite.svg.

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

SVG-спрайты vs иконочных шрифтов

проще управлять позиционированием
удобнее делать многоцветные иконки
можно делать анимированные иконки

Поддержка браузерами

Формат SVG поддерживается всеми современными браузерами и начиная с
IE 11+.

SVG - масштабируемая векторная графика.

Сама по себе технология SVG - это очень объёмная тема - подробнее с ней можно познакомится на MDN Web Docs

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

Аналогичные иконки при масштабировании в формате SVG и PNG

Способы использования SVG-иконок

SVG-иконки можно использовать несколькими способами

1й способ - сохранить SVG-иконку как файл, и подключать как обычное изображение

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

2й способ - открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.

Если использовать SVG-иконку таким способом, можно будет задать цвет иконки через CSS, и получится сделать плавное изменение цвета при наведении. Но если придется использовать эту же иконку в другом месте, то это будет дополнительная нагрузка на браузер, так как иконка будет отрисовываться заново при каждом использовании

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

Этот способ и рассмотрим подробнее

Создаём и используем символьный SVG-спрайт

Символьный SVG-спрайт - это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке

Первая часть - символьный SVG спрайт

Вторая часть - код использования

Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах

Добавим стили

Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke . Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться

Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke

fill - заливка иконки

stroke - цвет обводки

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

Получаем следующий результат

Итоги

Использование SVG-иконок имеет несколько преимуществ - возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.

В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки

Читайте также: