svg спрайты что это

SVG-спрайты

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

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

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

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

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

Почему они так нравятся работодателям и заказчикам? Все дело в скорости загрузки сайта: чем меньше HTTP-запросов к серверу, тем быстрее работает сайт. Чем быстрее работает сайт, тем больше его любят поисковые системы и посетители.

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

В этом коде целых три HTTP-запроса, на больших экранах появится замыливание и весят иконки в PNG формате больше:

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

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

Важно: Удаляем из path, инлайн стиль с цветом заливки style=»fill:#FFFFFF;. Иначе, потом мы не сможем поменять дефолтный цвет иконки на свой, в CSS стилях.

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

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

Чем SVG-спрайты лучше иконочных шрифтов, ведь все иконки можно упаковать в один файл и загружать с одним HTTP-запросом? Перечислим некоторые преимущества:

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

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

Источник

Как мы используем SVG-спрайты

При верстке макета из PSD часто иконки вставлены в формате SVG, а если нет — просим их у дизайнера. Ранее мы использовали иконочные шрифты, но недавно увидели преимущества спрайтов и решили попробовать с ними поиграться внедрить их в процесс разработки. Нам нравятся иконочные шрифты, но они имеют ряд недостатков(на эту тему почитайте CSSTricks). Эксперимент удался, и вот как мы организовали систему.

Условия

Что нам нужно от спрайтов:

Поехали

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

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

Варим спрайт

Давайте разберемся, что тут происходит по частям.

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

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

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

Сделаем для создания scss отдельный таск.

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

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

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

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

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

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

Файл подключен, после первой загрузки он кешируется. Если вам нужно нужно обновить спрайт в js-файле приведенном выше меняйте параметр revision на +1. Иконки вставляем через миксин jade, т.к. это быстро и удобно:

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

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

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

Результат:

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

Размытие

Источник

Способы генерации SVG-спрайтов на примере библиотеки svg-sprite

Недавно я решал задачу организовать все SVG-файлы, используемые в проекте, в виде одного спрайта. До этого мне приходилось использовать самописное решение для такой задачи. На этот раз я решил воспользоваться популярной библиотекой svg-sprite, однако был сильно удивлен сколько разных способов создания она предлагает. Какой-то единой статьи где были разобраны все способы я не нашел, вся информация была разбросана по блогам и отдельным публикациям. Поэтому я решил собрать доступные в библиотеке способы для генерации спрайтов в одном месте, попутно проанализировав их преимущества и недостатки. Итак, поехали.

Режим CSS

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

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

и соответствующий CSS-код

Приятно особенностью svg-sprite является возможность задать в каком виде вы хотите получить стили — в виде чистого CSS или под препроцессоры LESS, SASS, Stylus. Немного поигравшись с шаблонами вывода, можно настроить вывод иконок в виде миксинов и генерировать код только тогда, когда он действительно нужен.

Преимущества: метод просто и понятен каждому, кто до этого работал со спрайтами.

Недостатки: невозможно указывать произвольные размеры, управлять цветом иконки. Не получится использовать в теге img

Режим defs

Этот режим использует тег defs, внутри которого объявляется элементы для дальнейшего использования. Каждому элементу присваивается id, по которому этот элемент будет вызван в теге use.

Преимущества: Метод хорош тем, что предоставляет вам контроль над встраиваемой иконкой через CSS или атрибуты. Вы сможете легко менять ее размеры или цвет.

Недостатки: Скорее всего потребуется некий механизм (макрос, хелпер, функция), который будет генерировать код вставки иконки. При генерации приходится указывать атрибут viewBox и размеры. Согласно спецификации элементы внутри defs не должны отображаться, поэтому нельзя будет визуально оценить как выглядят спрайты после оптимизации. Впрочем, svg-sprite помогает в этом и может создать файл с образцами всех иконок.

В настоящее время использовать этот метод нет смысла, его улучшенной версией является Режим symbol.

Режим symbol

Преимущества: Аналогично предыдущему режиму (легкая смена цвета и размеров).

Недостатки: Вам также понадобится вспомогательный механизм для вставки иконок. Однако, прочих недостатков метода defs этот режим лишен.

Режим view

В основе этого метода лежит возможность создания именованных областей просмотра для вашего документа в самом документе. Делается это с помощью тега view. Созданный таким образом спрайт можно использовать двумя способами.

Как обычную фоновую картинку из первого режима

и как отдельное изображение, встраиваемое с помощью идентификаторов фрагмента (fragment identifiers)

На мой взгляд очень удобно. Одна и та же иконка может быть и картинкой, и фоном в зависимости от ситуации. В настоящее время поддержка идентификаторов фрагмента полностью отсутствует в iOS 9.x, несмотря на то, что частичная поддержка была в предыдущей версии.

Преимущества: Можно использовать иконку как для фона, так и для изображения. Легко менять размер, если используется как изображение.

Недостатки: Проблемы с поддержкой в iOS в настоящий момент. Нельзя установить в качестве фона на блок произвольного размера. Нет возможности смены цвета через CSS.

Режим stack

Данный способ также использует именованные области просмотра, однако располагает их одну под другой, подобно слоям в Фотошопе. Каждая область скрыта по умолчанию и становится видна, при ссылке на нее через fragment idetifier

Соответственно, нам также доступны два способа использования.

Как фоновая картинка

и как обычное изображение

Ситуация с поддержкой браузерами тут немного хуже, чем в предыдущем способе. Помимо отсутствия поддержки в iOS 9, идентификаторы фрагмента не работают для фоновых изображения в Chrome по 48 версию включительно. Однако в будущем, когда ситуация с поддержкой улучшится, этот способ может стать очень популярным, потому что позволяет использовать одну и ту же иконку как для фона, так и для изображения без ограничений.

Преимущества: Аналогично предыдущему способу, но нет ограничений для изменения размера в зависимости от способа использования.

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

Бонус-режим inline-css

Этот метод не является стандартным способом для библиотеки svg-sprite, но может быть создан на ее основе. Смысл его заключается во встраивании самой иконки в файл-стилей через data-url. Библиотека svg-sprite предоставляет широкие возможности для кастомизации шаблонов вывода и дает доступ к исходному коду самой иконки. Поэтому есть возможность создать свой шаблон, который будет генерировать следующий код.

Однако, на практике, решить эту задачу с наскока не удалось и вопрос требует более детального рассмотрения.

В качестве заключения

Представленные способы не являются единственными для создания SVG-спрайтов. Мне попадались и другие, более экзотические варианты. Какой способ лучше решаться придется вам исходя из того, какой набор иконок имеется и какие возможности для кастомизации вам нужны. На мой взгляд вполне production-ready можно считать режимы css и symbol.

Источник

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 параметра:

Далее необходимо импортировать этот файл в основной документ:

Теперь макрос готов к использованию. Ко всем макросам можно обратится через переменную macro. Рассмотрим пару примеров вызова:

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

Заключение

На этом пока все. Мы рассмотрели работу с svg спрайтами. Это очень удобный вариант работы с графикой и обладает рядом преимуществ:

Источник

SVG-спрайты и их использование

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

Что такое спрайты изображений?

Использование спрайтов изображений было хорошей практикой на протяжении многих лет. Если вам требуется несколько регулярно используемых изображений, совместите их в одном изображении, а не размещайте в отдельных файлах.

Этот пример содержит восемь значков 24×24 в одном файле размером 192×24 пикселей. Файл может быть небольшого размера и для того, чтобы использовать любой значок из набора требуется только один HTTP-запрос. Загрузка восьми отдельных значков вряд ли займет намного больше времени при использовании HTTP/2, но изображения могут появляться в разное время и будут кэшироваться только в процессе первого использования.

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

Спрайты изображений SVG

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

Одно спрайт-изображение можно использовать на странице любое количество раз с помощью SVG :

Стеки SVG-спрайтов

Метод работает во всех браузерах, включая Internet Explorer 9 и выше.

SVG Стеки на данный момент менее популярны, потому что передовой практикой стало встраивание SVG непосредственно в HTML. Однако это может быть идеальным решением, если вам нужно много значков SVG, но не нужно напрямую управлять ими с помощью CSS или JavaScript.

Оригинал статьи: How to Use SVG Image Sprites

Источник