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

Структура svg-спрайта

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

Корневой элемент сайта

Корневой элемент сайта – файл любого формата, находящийся в корне сайта. Корневой элемент не нуждается в своем декларировании (объявлении в ) с указанием пути – браузеры и роботы самостоятельно находят его. К самым известным корневым элементам относятся файлы: robots.txt, sprite.svg, favicon форматов SVG, ICO, GIF, JPEG, PNG и BMP .

• Реклама на сайте | Мифы и реальность
• Движок для сайта | Какой выбрать
• Какой браузер лучше
• Оптимизация и настройка CMS DLE
• Системный администратор
• Заработок на буксах | Философия успеха
• Ошибка танкиста

Site

• 301 редирект | Permanent Redirect
• Права доступа (chmod) вида 777
• Таблица символов Юникод в HTML
• Якорь HTML | Закладка на веб-странице
• Списки HTML
• Списки HTML | Обтекание картинок
• Списки HTML | Оформление маркеров (буллетов

Windows

• Программы для выключения компьютера скачать
• Выключение компьютера по расписанию
• Задержка времени (пауза, тайм-аут) в бат-файле
• Word и Excel | Автоматическая нумерация ячеек таблицы
• Word | Разорвать и соединить таблицу
• Word | Вставить диаметр, ударение, апостроф
• Excel | Перенос строки в ячейке
• Word | Убрать горизонтальную линию

Записки алкоголика

• Позвонить оператору Водафон-Украина (МТС, UMC)
• Водафон, Киевстар, Лайф | Код USSD-запросов
• Заработок на буксах | Философия успеха
• Заработок на буксах | Мифы и реальность

SVG-спрайты

Спрайт, в контексте веб-разработки, чаще всего, — один большой файл с графикой, получившийся в результате «сшития» нескольких маленьких графических файлов (иконок, элементов оформления). Это нужно для экономии количества запросов к серверу: меньше запросов — сайт работает и загружается быстрее. Сшивать в спрайт можно и растровую, и векторную графику.

Я расскажу о своём любимом способе работы с векторными спрайтами.

Работа с SVG (введение)

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

Источником векторных иконок (помимо дизайнеров) служат icomoon.io, flaticon.com, freepik.com/free-vectors и им подобные. Нарисовать самому можно в Adobe Illustrator или в Inkscape. Поскольку это обычный текстовой формат, редактировать его можно в текстовом редакторе.

Редакторы очень любят вставлять в код SVG-файлов служебную информацию, увеличивая вес файлов. Оптимизировать можно или он-лайн на jakearchibald.github.io/svgomg, или задачей для какого-либо таск раннера (см. ниже).

И да, SVG лучше иконочных шрифтов, ибо даёт больше возможностей и не является костылём).

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

• Артборд подогнан по габариту фигуры или все однотипные артборды подогнаны под единый размер.
• Всё, что может быть слито в единую форму, слито.
• Убраны лишние объекты.
• Проведено сжатие.

SVG-спрайты

В подавляющем большинстве случаев, я использую такие спрайты для иконок. Мой любимый вариант основан на переиспользовании ( symbol и use ):

1. Собираем один общий svg-файл со множеством symbol (элементы спрайта), имеющих свои id . У тега svg задаём style=»display:none» . Смотреть пример.
2. Вставляем полученный спрайт в разметку страницы. (Я предпочитаю делать это с помощью javascript и localStorage, об этом ниже.)
3. В разметке используем ссылки на symbol при помощи use . Смотреть пример.

Достоинства метода:

• чистый, читабельный код,
• управление с уровня CSS страницы (в том числе, fill=»currentColor» ),
• кеширование в localStorage (спрайт загружается только единожды),
• доступность (можно добавить title ).

Недостатки метода:

• управление с уровня CSS не полное: сложно управлять отдельными частями символа (имеющими свои CSS-классы), если он вставлен несколько раз,
• работает только с сервера (локального/удалённого — не важно), ибо использует localStorage.

Как собирать

Увы, в отличие от растровых спрайтов, он-лайн инструментов для сборки SVG-спрайта я не нашел (плохо искал?). Помимо ручной сборки (не-не-не-не, Девид Блейн, нет!) предложить могу только сборку с помощью Grunt/Gulp.

Вот репозиторий, собранный мной из своего старого стартового. В нём оставлена автоматизация, ответственная за сборку SVG-спрайта, сжатие javascript, запуск локального сервера и автообновление. После вызова команды grunt в консоли, автомат соберёт спрайт, сожмёт javascript (нужен для работы с localStorage), запустит локальный сервер и откроет в браузере index.html .

Для сжатия SVG использован imagemin (вот прекрасный аналог), для сборки спрайта использован grunt-svgstore. Уверен, что найти аналогичные задачи для Gulp не составит большого труда.

Как вставить спрайт в разметку

Внимание
Информация о вставке несколько устарела. Сейчас я использую svg > use .

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

Я для себя выбрал способ с javascript и localStorage, т.к. это не вызывает зависимостей ни от чего, кроме включенного javascript на стороне клиента: поддержка localStorage очень хорошая. Именно этот способ и используется в демонстрационном репозитории. Есть, впрочем, небольшая оговорка: localStorage имеет ограничение в 5 Мбайт на домен.

Способ описан в недавней статье Osvaldas Valutis и состоит в следующем: при срабатывании javascript происходит проверка: спрайт уже записан в localStorage? Если да, он берется оттуда и вставляется на страницу. Если нет, файл скачивается, записывается в localStorage и потом вставляется на страницу.

Скрипт снабжён переменной revision , позволяющей контролировать кеширование спрайта. Если она изменится, спрайт будет перезагружен с сервера даже в том случае, если уже есть в localStorage.

Привожу листинг кода с комментариями:

;(function(window, document) < 'use strict'; var file = 'img/sprite.svg', // путь к файлу спрайта на сервере revision = 1; // версия спрайта if (!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) return true; var isLocalStorage = 'localStorage' in window && window\['localStorage'\] !== null, request, data, insertIT = function() < document.body.insertAdjacentHTML('afterbegin', data); >, insert = function() < if (document.body) insertIT(); else document.addEventListener('DOMContentLoaded', insertIT); >; if (isLocalStorage && localStorage.getItem('inlineSVGrev') == revision) < data = localStorage.getItem('inlineSVGdata'); if (data) < insert(); return true; >> try < request = new XMLHttpRequest(); request.open('GET', file, true); request.onload = function() < if (request.status >= 200 && request.status < 400) < data = request.responseText; insert(); if (isLocalStorage) < localStorage.setItem('inlineSVGdata', data); localStorage.setItem('inlineSVGrev', revision); >> > request.send(); > catch (e) <> >(window, document)); 

В сжатом виде этот скрипт имеет очень небольшой размер.

Заключение

Если не нужен контроль с уровня CSS страницы, возможно лучшим решением будет вставлять небольшие (до 10 Кбайт) иконки прямо в CSS-файл, кодируя их в base64. В LESS даже встроенная функция для этого есть.

Понравилась статья? Ставьте лайк, делитесь в соц. сетях или купите мне кофе.

© Николай Громов. Внутренняя Монголия, вечность, лето.

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

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

Режим CSS

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

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

ei-archive

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

.svg-ei-archive < background: url("svg/sprite.css.svg") 12.5% 0 no-repeat; width: 50px; height: 50px; >

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

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

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

Режим defs

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

Для того чтобы use из примера смог отрендерить элемент, SVG с defs должен быть также включен в тело документа. Стандартом допускается использовать внешний файлов в xlink:href , однако это не поддерживается всеми версиями Internet Explorer. К счастью, существует полифил svg4everybody, который решает эту проблему.

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

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

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

Режим symbol

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

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

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

Режим view

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

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

ei-archive

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

 :root>svg :root>svg:target

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

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

.svg-ei-archive

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

 .el-archive < background: url("data:image/svg+xml;[icon-data]"); >

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

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

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

• Работа с иконками
• Работа с векторной графикой