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 спрайтов и подключение их к сайту

Главная » Верстка

Верстка

Автор Алексей На чтение 4 мин Просмотров 2к. Опубликовано Обновлено

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

Идем на https://icomoon.io/app/ выбираем нужные иконки для сайта (если какие-то не нашли не страшно — их потом добавим вручную), после чего нажимаем на кнопку «Generate SVG & More».

на следующей странице скачиваем готовый пакет с нужными SVG

Подключение SVG спрайта к сайту

Распаковываем скачанный архив, там следующее содержимое:

от сюда нам нужно 3 файла: style.css (минимальное оформление иконки), svgxuse.js (скрипт которые добавляет поддержку SVG старыми браузерами) и symbol-defs.svg — сам спрайт.

Спрайт заливаем прям в корень сайта, css либо просто берем эти пару строчек css копируем и вставляем в основную CSS таблицу сайта, либо тоже заливаем на сайт в папку где хранятся основные стили сайта, js соответственно в папку с js (в моем случае это template/css-js).

Осталось только подключить это все добро к сайту и начать пользоваться.

  • в head сайта подключаем файл стилей: <link rel="stylesheet" href="template/css-js/style.css">
  • перед закрытием body подключаем скрипт: <script defer src="template/css-js/svgxuse.js"></script>

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

В нужном месте сайта для вывода иконки используем следующую конструкцию:

<svg><use xlink:href="symbol-defs.svg#icon-mobile"></use></svg>

Здесь icon основной класс для иконок (из style.css), icon-mobile не обязательно указывать — это класс по которому можно стилизовать иконку (к примеру изменить ее цвет).  href="symbol-defs.svg#icon-mobile" ссылаемся на конкретную иконку в спрайте, в данном примере на иконку с id #icon-mobile.

Названия (или id) иконок в сгенерированом спрайте можно посмотреть в файле demo.html.

Важно! Если вы верстаете локально — иконки в верстке отображаться не будут.

Как добавить свои иконки в спрайт

Добавить иконку в спрайт легко, для этого открываем svg иконку через какой-нибудь редактор кода, к примеру скачал иконку поиска с https://fontawesome.com/icons

вот ее код:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7h472c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>

В спрайте создаем вот такую конструкцию:

<symbol viewBox="">
<path d=""></path>
</symbol>

Далее в id ставим название на которое будем ссылаться, в данном случае «icon-search». В viewBox соответственно копируем код из viewBox. И в path из path. В конечном итоге получаем:

<symbol viewBox="0 0 512 512">
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7h472c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</symbol>

Все можно ее выводить на сайте: <svg><use xlink:href="symbol-defs.svg#icon-search"></use></svg>

Поделиться с друзьями

Оцените автора

( Пока оценок нет )

спрайтов SVG | Font Awesome Docs

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

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

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

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

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

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

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

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

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

Sharp Family

Style Availability Файл спрайта Похоже на
Solid Только Pro sharp-solid.svg
Regular Pro only sharp-regular.svg
Light Pro only sharp-light.svg
Thin Вскоре!
Duotone Скоро!

Семейство брендов

Стиль Доступность Файл Sprite выглядит как
Бренды бесплатно . :

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

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

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

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

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

Если вы используете URL-адреса в xlink:href , они должны быть загружены из того же домена. На SVG, загруженных таким образом, существует защита от разных источников. Некоторые люди просто обслуживают его прямо из своих статических ресурсов. Вы также можете использовать прокси.

Internet Explorer не загружает удаленные файлы SVG

Если вы используете URL-адрес в формате xlink:href , IE не будет автоматически загружать файл для вас. Проверьте этот проект (открывается в новом окне), если это то, что вам нужно.

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

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

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

Посмотреть живую демонстрацию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Star.svg 
  viewBox="0 0 95 95"  >
  <определения>
    
  
  Звезда
Цветок.
svg
  viewBox="0 0 95 95"  >
  <определения>
    
  
  Цветок
8-конечная звезда.svg 
  viewBox="0 0 95 95"  >
  <определения>
    
  
  8-конечная звезда
     59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41h26.41V36.09L2.5,50,16.41,63.91V83.59h46.09L50,97.5 ,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/>

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

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

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

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

 

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

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

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

Здесь следует отметить пару вещей:

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

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

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

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

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

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

 
  <использовать xlink:href="/path/to/sprite.svg#icon-star">

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

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

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

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

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

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

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

No related posts.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *