Создайте потрясающую систему иконок, используя спрайты SVG.

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

История Примечание

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

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

Наконец-то прибыло: SVG-спрайты

«Могу ли я использовать спрайты SVG? Да, ты можешь!"

Теперь, по состоянию на 2023 год, у нас наконец-то есть полное решение с полной поддержкой браузера (отметьте Могу ли я использовать), которое решает все основные проблемы при работе со значками в Интернете; решение давно есть, не хватало поддержки браузера, но это уже история!

Основные преимущества SVG Sprites

  • Полностью нативная для браузера: не требуется никакого инструмента для создания. Нет шаблонного CSS или HTML.
  • Цветозависимость: легко меняйте цвет значков с помощью знакомого свойства CSS color в сочетании со свойством currentColor или просто передайте fill="#FF0000"
  • Независимое от разрешения: графика SVG основана на векторе, что означает, что ее можно масштабировать без потери качества. Используя спрайты SVG, вы гарантируете, что ваши значки и графика будут выглядеть четко на всех устройствах, от больших экранов настольных компьютеров до крошечных мобильных дисплеев. Измените размер значка, как обычный <img />, и используйте свойства ширины и высоты CSS или HTML.
  • Простота обслуживания и кэширования: отдельный файл SVG, который можно передавать, кэшировать и интегрировать независимо от фреймворка.
  • Сокращение HTTP-запросов. Каждый отдельный HTTP-запрос увеличивает нагрузку на процесс загрузки веб-страницы. Используя спрайты SVG, вы можете объединить несколько значков или графики в один файл, эффективно сократив количество запросов и сократив время загрузки страницы.
  • Повышенная производительность. Благодаря меньшему количеству HTTP-запросов и меньшему размеру файлов спрайты SVG способствуют повышению производительности веб-сайта. Более быстрое время загрузки приводит к лучшему пользовательскому опыту и снижению показателей отказов, что положительно влияет на рейтинг вашего сайта в поисковых системах.

Пример использования

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

<!-- EXTERNAL URL reference -->
<svg width="24" height="24" fill="red">
  <use href="icon-defs.svg#arrow-left" />
</svg>

<!-- Reference IN THIS SAME DOCUMENT -->
<svg width="24" height="24" fill="red">
  <use href="#arrow-left" />
</svg>

Как видите, существует два способа ссылки на значок: Внешний URL и Тот же документ. Об этом мы поговорим далее в статье.

Вот как вы будете хранить свои значки SVG, файл icon-defs.svg, который выглядит следующим образом.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <symbol id="arrow-left" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M10.086 11.5c.138-.163.335-.361.641-.667L14.28 7.28a.75.75 0 1 0-1.06-1.06L9.645 9.793c-.28.28-.52.52-.703.736a2.285 2.285 0 0 0-.462.776 2.25 2.25 0 0 0 0 1.39c.099.303.27.55.462.776.182.215.423.456.703.736l3.573 3.573a.75.75 0 1 0 1.061-1.06l-3.553-3.553a12.742 12.742 0 0 1-.64-.666c-.133-.156-.166-.23-.18-.27a.75.75 0 0 1 0-.463c.014-.04.047-.113.18-.269Z" clip-rule="evenodd"/>
  </symbol>
  <symbol id="arrow-right" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M9.72 6.22a.75.75 0 0 1 1.06 0l3.574 3.573c.28.28.52.52.703.736a2.3 2.3 0 0 1 .462.776 2.25 2.25 0 0 1 0 1.39 2.3 2.3 0 0 1-.462.776c-.183.215-.424.456-.703.736L10.78 17.78a.75.75 0 1 1-1.06-1.06l3.553-3.553c.305-.306.502-.504.64-.666.133-.156.166-.23.179-.27a.75.75 0 0 0 0-.463c-.013-.04-.046-.113-.179-.269-.138-.162-.335-.36-.64-.666L9.72 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
  </symbol>
  ...
</svg>

Как создать файл спрайта SVG; ручной против автоматизированного

Как показано в приведенном выше фрагменте кода, все, что вам нужно, — это поместить ваши значки SVG в виде тегов <symbol>, указав ID и viewBox.

  • (Рекомендуется) Это можно сделать вручную, это не сложно, и вы управляете форматом вашего файла спрайта SVG и отслеживаете его с помощью контроля версий, не отвлекаясь на изменение синтаксиса.
  • Чтобы сделать его частью вашего автоматизированного конвейера сборки, существует множество пакетов NPM (svg-sprite, svg-sprite-generator), которые возьмут ваши файлы значков SVG и создадут для вас один файл спрайтов SVG. Учтите, что генерация спрайтов SVG может занять значительное время ЦП, если у вас большое количество значков, и это может привести к перегрузке конвейера сборки, поэтому проверьте показатели производительности для вашего конкретного случая.
  • Также доступны онлайн-инструменты, такие как https://svgsprit.es/.

Выбор между методами использования: внешний URL или тот же документ

Подход Внешний URL предпочтительнее, так как его можно кэшировать как отдельный файл через CDN и он не будет постоянно увеличивать размер вашей страницы и сложность дерева DOM.

Иногда у вас могут возникнуть проблемы с нечеткими значками при использовании метода Внешний URL, это связано с давней ошибкой в реализации браузера. В этих случаях вы можете использовать метод Тот же документ, который позволяет обойти эту проблему.

Полное смешанное решение

Давайте рассмотрим полный пример React, где мы сначала ищем значок Тот же документ, и если он не существует, мы помещаем Внешний URL как href!

const Icon = ({
  name,
  color,
  size,
}) => {
  const hrefPrefix = document.getElementById(name) ? '' : 'icon-defs.svg';

  return (
    <svg width={size} height={size}>
      <use href={`${hrefPrefix}#${name}`} />
    </svg>
  );
}

И вот небольшой совет о том, как внедрить определения значков непосредственно в DOM.

import iconDefinitions from 'raw-loader!./icons/icon-defs-embed.svg';

const IconDefsEmbed = () => {
  return (
    <div dangerouslySetInnerHTML={{ __html: iconDefinitions }} />
  );
}

Это решение может отличаться в разных фреймворках, но метод один и тот же.

Ресурсы

Заключение

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

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