Svg sprite: Svg sprite — руководство по работе с svg спрайтами. Генерация спрайтов c помощью gulp

Содержание

SVG спрайты

В целях оптимизации и удобства при многократном использовании SVG изображений можно объединить в один файл-спрайт. Как это сделать? Для примера возьмем несколько изображений:

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.  31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
</svg>

HTML

У SVG есть несколько элементов-контейнеров – <g>, <defs> и <symbol>, лучшим для спрайтов является <symbol> т.к. он поддерживает все атрибуты как у <svg>.

Итак, нужно создать файл icons.svg, в нём будет общий контейнер <svg>...</svg>, далее в него помещаются изображения, с заменой <svg> на <symbol> оставляя все другие параметры и добавляется атрибут

id для дальнейшего вывода.

<svg>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8. 52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
	</symbol>
</svg>

HTML

Вывод осуществляется с помощью элемента <use> с ссылкой на файл спрайта и id изображения.

<svg><use xlink:href="/icons. svg#icon-1"></use></svg>
<svg><use xlink:href="/icons.svg#icon-2"></use></svg>
<svg><use xlink:href="/icons.svg#icon-3"></use></svg>

HTML

Результат:

Минусы

Если открыть файл спрайта в браузере, то изображения выводится не будут.
В старых браузерах (до IE9) тег <use> не поддерживается. Но для них есть плагин https://github.com/jonathantneal/svg4everybody.

Как использовать SVG Image Sprites

Несмотря на масштабируемость, экономию полосы пропускания и очевидный кандидат на адаптивный веб-дизайн, масштабируемая векторная графика (SVG) относительно редка в сети. Причины?

SVG не работают в старых версиях Internet Explorer – поддержка доступна только в IE9 +
технология существует с 1999 года – она кажется старой и неинтересной
инструментов для векторного дизайна меньше
они основаны на XML, что многим кажется страшным.

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

Спрайты растровых изображений

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

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

Если нам нужен самый правый значок принтера, мы можем использовать CSS, чтобы показать правильное изображение, расположив фон:

#print
{
	width: 24px;
	height: 24px;
	background: url("sprite.png") -168px 0;
}

SVG Image Sprites

Можно ли разместить несколько изображений SVG в одном файле? Абсолютно! Они также имеют преимущество перед растровыми спрайтами; Вы можете ссылаться на каждое изображение по имени, а не вычислять позиции пикселей. Насколько я знаю, эта техника стеков SVG была разработана @simurai и @erikdahlstrom, хотя другие, возможно, внесли свой вклад.

Мы создадим очень простой SVG с тремя отдельными иконками – зеленый круг, красный квадрат и синий треугольник:

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g>
	<ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>
<g>
	<rect y="5" x="5" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.  75" />
</g>
<g>
	<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>
</svg>

Каждый из них размещается поверх другого в отдельном g Посмотрите изображение, и вы увидите все три:

Здесь начинается умная часть – вы можете добавить пару правил CSS в файл SVG, которые скрывают все слои, кроме активного слоя, определенного с помощью псевдоселектора :target

<defs>
	<style><![CDATA[
		.sprite { display: none; }
		.sprite:target { display: inline; }
	]]></style>
</defs>

Поэтому, если наш файл называется

sprite.xmlsprite.xml#circle

Посмотреть страницу демонстрации спрайтов SVG …

Есть несколько методов, которые вы можете использовать для добавления SVG-спрайтов на свою страницу: объект / встраивание, iframe, тег img Демонстрация показывает все методы, и они хорошо работают в Internet Explorer 9+, Firefox и Opera 12 и ниже.

К сожалению, фоновые методы img Существуют различные текущие обсуждения, но нет никакой гарантии, что стеки SVG когда-либо будут полностью поддерживаться. Это позор, потому что техника кажется такой полезной.

Если вы не сможете убедить Webkit присоединиться к группе стеков SVG, лучшее решение для кросс-браузерного решения, например, objectembed

<object type="image/svg+xml" data="sprite.svg#circle"></object>

Это также имеет то преимущество, что вы можете напрямую обращаться к SVG-спрайту и обновлять его с помощью сценариев DOM.

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

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

SVG существуют с 1998 года, но в 2015 году им было уделено должное внимание. Возможно, вы уже знаете, что использование SVG является одной из самых популярных тенденций веб-дизайна с 2015 года по настоящее время.

См. демонстрацию в реальном времени

Перейти к руководству

Зачем использовать SVG?

Расширен как Масштабируемая векторная графика , SVG — это формат векторного изображения на основе XML с расширенной поддержкой анимации и раскрашивания.

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

Они легкие — на самом деле очень легкие по сравнению с иконочными шрифтами и графикой PNG

Они имеют неограниченные возможности с цветом, размером и анимацией — намного больше, чем иконочные шрифты.
Современные веб-браузеры полностью поддерживают SVG

Что такое спрайты SVG?

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

Если вы помните спрайты в формате PNG 2005–2015 годов, вы уже знаете, о чем я говорю.

Я отказался от PNG, когда услышал об иконочных шрифтах, которые были популярны в 2012-2013 годах. Позже я обнаружил, что загружать множество иконок, которые я никогда не буду использовать на веб-сайте, с помощью иконочного шрифта было довольно глупо.

Только тогда SVG оказались в центре внимания — в 2015–2016 годах о них говорили все. Далее в этой статье приведены шаги по созданию быстрых и легких систем значков с использованием спрайт-листов SVG.

Создание спрайтов SVG

На мой взгляд, Adobe Illustrator — лучшая альтернатива для создания SVG-графики для вашего использования, позже мы можем слепить их в один спрайт, а затем обсудить его использование.

Идите вперед и создайте его так же, как я создал рисунок ниже, и экспортируйте его в формате SVG.

Я создал несколько образцов графики в Illustrator, чтобы продемонстрировать их вам в виде спрайта SVG.

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

Star.svg

Цветок.svg

  92a14.31,14.31,0,0,0-3-14.69A14.31,14.31,0,0,0,96.9,36.75" transform="translate(-2.5 - 2.5)"/>

8-конечная звезда.svg

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

Окончательный шаблон спрайта SVG

Взгляните на код SVG ниже. Мы объединили все три изображения в один файл с помощью тега SVG .

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

  5 -2.5)"/> 
  

  
  <символ  viewBox="0 0 95 95 ">

Пара вещей, на которые следует обратить внимание:

viewBox закодирован в файлах, экспортируемых Illustrator, и в основном определяет положение и размер нашей графики.
Идентификаторы фрагментов ( icon-star , icon-flower и т. д.), указанные в теге , помогают нам в дальнейшем найти конкретный значок/графику.

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

 
<символ viewBox="0 0 95 95">
  ...

Вы можете использовать в шаблоне спрайта столько графики, сколько хотите, теперь все зависит от вас.

Использование спрайта SVG

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

И вот как ты это делаешь.

Быстрая демонстрация того, что мы создали

Создание спрайта SVG из шрифтов Icon

Как насчет создания спрайта из ваших любимых иконочных шрифтов, таких как FontAwesome, LineIcons, Entypo и других?

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

Чтобы начать работу с IcoMoon, зайдите в приложение IcoMoon и начните добавлять пакеты значков, из которых вы хотите получить значки SVG. Когда в вашей библиотеке есть несколько пакетов значков, начните выбирать значки из сетки, как показано ниже:
Сделав выбор, убедитесь, что вы установили флажок « Плитки (CSS Sprite) » в настройках приложения.
Наконец, нажмите кнопку загрузки, чтобы экспортировать необходимые файлы и получить их в заархивированном архиве.
Извлеките загруженный заархивированный архив и найдите сгенерированный файл SVG в папке «sprite» внутри.

Этот созданный спрайт SVG нуждается в некоторой доработке. Просто замените вложенные теги на теги , удалите ненужную информацию, такую как атрибуты высоты, ширины, x и y, и все готово.

Живая демонстрация IcoMoon SVG Sprite

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

Спрайты SVG | Font Awesome Docs

Хотите использовать значки Font Awesome в качестве спрайтов SVG? Они у нас есть. И нет необходимости загружать код JavaScript во время выполнения.

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

Прежде чем приступить к работе

Убедитесь, что у вас есть:

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

Выберите файлы спрайтов

Внутри Font Awesome Загрузите или установите пакет, в котором вы найдете нужные файлы. В Font Awesome Pro есть три семейства иконок: Classic, Sharp и Brands. Существует пять стилей классических значков, и скоро появятся новые стили Sharp. Бесплатная версия включает набор значков сплошного и обычного цветов, а также все значки брендов.

Классическое семейство

960201

Style	Availability	Sprite file
Solid	Free or Pro	`solid. svg`
Regular	Free or Pro	`обычный.svg`
Light	Только Pro	`light.svg`	Pro only	`thin.svg`
Duotone	Pro only	`duotone.svg`

Sharp Family

Style	Availability	Файл спрайта
Solid	Только Pro	`sharp-solid.svg`
Обычный	Скоро!
Свет	Скоро!
Тонкий	Скоро!
Duotone	Скоро!

Бренды Семейство

Стиль	Наличие	Файл спрайтов
Бренды	БЕСПЛАТНЫЙ	`Бренды. SVG`

Добавить ICONS

, чтобы добавить ICONS FARE FOR SPRIE вы хотите использовать.

Поместите этот файл вместе с остальными статическими файлами, такими как CSS или изображения, в свой проект.

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

Вот несколько примеров того, как вы можете называть значки в различных стилях:

Проблемы со спрайтами SVG

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

Политика того же источника

Если вы используете URL-адреса в xlink:href , они должны быть загружены из того же домена.

Svg sprite: Svg sprite — руководство по работе с svg спрайтами. Генерация спрайтов c помощью gulp

SVG спрайты

Результат:

Минусы

Как использовать SVG Image Sprites

Спрайты растровых изображений

SVG Image Sprites

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

Зачем использовать SVG?

Что такое спрайты SVG?

Создание спрайтов SVG

Star.svg

Цветок.svg

8-конечная звезда.svg

Окончательный шаблон спрайта SVG

Использование спрайта SVG

Создание спрайта SVG из шрифтов Icon

Спрайты SVG | Font Awesome Docs

Прежде чем приступить к работе

Выберите файлы спрайтов

Классическое семейство

Sharp Family

Бренды Семейство

Добавить ICONS

Проблемы со спрайтами SVG

Добавить комментарий Отменить ответ

Рубрики

Рубрики