Как мы используем SVG-спрайты(новый способ)
При верстке макета из PSD часто иконки вставлены в формате SVG, а если нет — просим их у дизайнера. Ранее мы использовали иконочные шрифты, но недавно увидели преимущества спрайтов и решили попробовать с ними поиграться внедрить их в процесс разработки. Нам нравятся иконочные шрифты, но они имеют ряд недостатков(на эту тему почитайте CSSTricks). Эксперимент удался, и вот как мы организовали систему.
Условия
Что нам нужно от спрайтов:
- Гибкое управление размером, цветом и поведением(hover, focus etc) иконки
- Автоматизация, минимум ручной работы
- Подгрузка на страницу только необходимых иконок
- Удобная вставка иконок в разметку страницы (для шаблонизации html я использую jade)
Подробнее о том как работает наша сборка — можете почитать в репозитории. Для создания спрайта используем gulp, а именно:
- gulp-svg-sprite — создание спрайта
- gulp-svgmin — минификация SVG
- gulp-cheerio — удаление лишних атрибутов из svg
- gulp-replace — фиксинг некоторых багов, об этом ниже
Поехали
Устанавливаем плагины(мы это делаем глобально и потом линкуем):
В gulpfile объявляем плагины:
Готовим спрайт
Создаем svg-файл с тегами symbol.
Давайте разберемся, что тут происходит по частям.
Говорим откуда нам нужно взять иконки и минифицируем их. Переменная assetsDir — для удобства.
Удаляем атрибуты style, fill и stroke из иконок, для того чтобы они не перебивали стили, заданные через css.
Однако у данного плагина один баг — иногда он преобразовывает символ ‘>’ в кодировку ‘>’ .
Эту проблему решает следующий кусок таска:
Теперь сделаем из получившегося спрайт и положим в папку:
dest:’../../../sass/_sprite.scss’ — здесь мы объявили, куда нужно генерировать стили для спрайта.
template: assetsDir + “sass/templates/_sprite_template.scss” — код шаблона, на основе которого будут генерироваться стили для спрайта.
sprite.svg — это наш спрайт. Внутри он будет содержать следующее(для простоты приведена пара иконок):
Код шаблона для генерирования стилей представлен на гитхабе.
Получаем _sprite.scss следующего содержания:
Скомпилированный css будет таким:
Обратите внимание, что размеры иконок выражены через em, что позволит нам в дальнейшем управлять ими через font-size.
Составляем итоговый таск, и запускаем его:
Подключаем на страницу
Итак мы получили svg-файл с иконками и scss-файл с оформлением. Иконки вставляем через миксин jade, т.к. это быстро и удобно:
Теперь, чтобы встроить иконку вызываем миксин с её именем:
Открываем страницу в браузере:
Пока размеры иконки в натуральную величину и имеют стандартный цвет. Изменим это(не в сгенерированном файле, а в главном):
Результат: 
Кроссбраузерность
Мы подключаем иконку ссылаясь на внешний svg-файл, к сожалению не все браузеры поддерживают такой запрос. Для решения этой проблемы есть библиотека svg4everybody. Подключаем её и инициализируем:
Вот и все, мы получили рабочую систему подключения иконок через спрайты, но есть еще один момент.
Некорректные иконки
К сожалению, не все дизайнеры делают иконки по пиксельной сетке. В этом случае иконки будут “размываться”. Если вы экспортируете иконки из иллюстратора вам нужно включить пиксельную сетку и подогнать размер и расположение иконки под пиксельную сетку. Если вы работаете в готовыми svg-файлами — воспользуйтесь сервисом iconmoon для их правильного выравнивания. Также важно конвертировать stroke для иконок, о том как это сделать написано в документации iconmoon.
How to use SVG sprites (regular HTML vs React)
The SVG icons are preferred over font-icons. We all know that.
This is how I’ve been using it for a while.
But turns out this is not the recommended way to do this.
You’re better off using the svg icons through the <svg> tag, which is considered best practice. Here is how it’s done:
You give the <svg> element the class for your icon, and then make use of the <use> , give it the href attribute to the sprite, followed by an octothorpe (#) and then the name of the icon in the svg sprite.
IMP: If you’ve been using the xlink:href attribute instead, it has been deprecated, it is recommended to use the href attribute instead.
Here is a snapshot from the MDN docs:
You can read more about <use> here on MDN Docs
Using SVG logos from sprite in React
If you’re working with React, and want to do the same, things are not as straight forward.
Svg спрайты
Всем привет! В этой статье мы рассмотрим работу с svg спрайтами, как их создавать и подключать. Для начала разберемся что такое спрайт. Спрайт — это один большой графический файл, в котором объединены несколько небольших изображений. Спрайты были очень популярны, когда в качестве графики использовали растровые изображения. Создавали один большой файл, который содержит иконки, смайлики, логотипы, после чего через фоновое изображение в CSS и позиционирование показывали только ту часть графики, которая необходима. Это делается для уменьшения количества запросов к серверу, тем самым увеличивая скорость загрузки сайта. Svg спрайт аналогичен: в нем все наши svg изображение зашиты в один файл. Но работать с ним нужно немного иначе.
Как сделать svg спрайт
Что бы создать svg спрайт, создаем svg файл, например, sprite.svg. В него поместим корневой элемент svg. Далее вставляем svg код каждого изображения, обрамляя его тегом symbol. Всем элементам symbol назначаем уникальный id:
Как использовать svg спрайты
Что бы вывести любую иконку из svg спрайта, необходимо использовать тег svg, в котором через конструкцию use указываем ссылку на файл и id изображения:
Так же, можно просто скопировать весь svg спрайт в html страницу и использовать элемент use, передавая только id изображения.
CSS стили в svg спрайтах
Основным преимуществом использования svg спрайтов является возможность стилизовать иконки через CSS стили. Мы можем менять размер, цвет, фон иконок, а также — менять стили при наведении. Для этого в спрайте необходимо удалить атрибуты fill, stroke, style, так как они имеют большой приоритет. Далее просто в CSS задавать стили для svg элемента.
Пример использования svg спрайта
Давайте для примера использования svg спрайтов сделаем блок с иконками социальных сетей. Скачаем три svg иконки и сделаем из них спрайт. В итоге получим:
Далее создаем html файл, и делаем в нем небольшую разметку для вывода иконок. После этого копируем содержимое svg спрайта. В итоге получаем такую разметку:
Теперь добавим немного стилей:
Здесь мы выравниваем наши иконки по горизонтали, задаем размеры и цвета. Цвет иконки в обычном состоянии и при наведении задаем с помощью свойства fill родительскому элементу, а у самой иконки наследуем это свойство. Таким образом получаем такую верстку:
See the Pen Svg sprite by astupakov (@astupakov) on CodePen.
Использование gulp для автоматической генерации svg спрайтов
Собирать спрайты вручную — очень трудоемкая работа. Поэтому создание svg спрайтов можно автоматизировать. Для этого мы будем использовать gulp и плагин gulp-svg-sprite.
Идея заключается в том, что мы просто перемещаем все свои svg файлы в одну папку, а gulp захватит все эти файлы и сгенерирует спрайт автоматически. Рассмотрим вкратце как это реализовать.
Устанавливаем плагин gulp-svg-sprite:
В файле gulpfile.js создаем таск для генерации спрайта:
В начале мы создаем переменную config с настройками для плагина, в которой говорим, что спрайт будет создаваться через элемент symbol и называется spite.svg. Так же, удаляем ненужные атрибуты и оптимизируем графику.
Далее указываем, что файлы лежат в папке src/img/svgIcons/, а создавать спрайт нужно в папку dist/img/. Плагин автоматически генерирует id для каждого изображения из его имени, по этому иконкам нужно давать осмысленные названия. Дале используем этот спрайт так как мы делали это раньше.
Использование миксинов для создания svg спрайтов
Каждый раз вставлять спрайт через svg не очень удобно. Если вы используете какой-то html препроцессор, то эту задачу можно упростить, создав некий миксин для вставки спрайта. Рассмотрим такую реализацию на примере шаблонизатора nunjucks.
В nunjucks для подобных задач используются макросы. Для начала создаем отдельный файл для всех макросов _macro.html. В нем создаем макрос svgIcon для вывода изображений из svg спрайта:
Этот макрос принимает 3 параметра:
- Id изображения;
- Произвольный класс изображения. По умолчанию значение пустое. Для удобства каждой иконке мы добавляем класс svg-icon;
- Путь к файлу svg спрайта. По умолчанию принимает значение, которое установили в настройка gulp файла для генерации спрайта.
Далее необходимо импортировать этот файл в основной документ:
Теперь макрос готов к использованию. Ко всем макросам можно обратится через переменную macro. Рассмотрим пару примеров вызова:
В первом примере мы просто выводим иконку, у которой id равно instagram. Во втором варианте добавляется класс social__icon. В третьем примере мы изменяем путь к спрайту.
Заключение
На этом пока все. Мы рассмотрели работу с svg спрайтами. Это очень удобный вариант работы с графикой и обладает рядом преимуществ:
Как подключить svg спрайт в файл в html и css
Есть сгенерированый svg спрайт — sprite.svg c symbol :
Если вставлять прямо в html , то все подключается отлично —
Но если подключать из файла (т.е. когда sprite.svg лежит в images) , то не отображается:
Почему не отображается иконка и как подключить в стили css иконку из спрайта?
Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:
- Код иконок и спрайта, — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
- Подключение файла спрайта.
- Подключение внешней таблицы стилей и стилизация самих иконок.
Подключение файла спрайта
При подключении файла спрайта через тег <img> и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег <object>
Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg
Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.
Тег <object> добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.