SVG-спрайты на основе symbol: сохраните ID, viewBox и цвета

SVG-спрайт на основе symbol хранит именованные определения иконок в одном SVG-файле. Каждая видимая иконка через элемент <use> ссылается на нужное определение. Упаковка работает только если ID фрагмента, система координат и правила оформления сохраняются при переносе из отдельных файлов.

Начните с двух иконок перед объединением всей папки. Здесь лист использует квадратное пространство координат, а стрелка вправо — широкое. Лист появится в двух цветах без дублирования контура. Стрелка сохранит пропорции вместо принудительного помещения в холст листа.

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

Создайте два именованных определения symbol

Сохраните оригинальный пример как sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

Имя листа — pv-leaf, стрелки — pv-arrow. Это идентификаторы, запрашиваемые страницей. MDN описывает symbol как повторно используемое определение графики, экземпляры которого создаются через use. Файл только с символами может выглядеть пустым при отдельном открытии, поскольку определения напрямую не отображаются.

Сохраняйте viewBox вместе с описываемой графикой. Здесь лист использует 0 0 24 24, стрелка — 0 0 32 16. Числа задают координатные границы, а не обязательный размер отображения. Изменение границ стрелки на 24 на 24 без изменения геометрии — не нормализация. См. справочник viewBox MDN об отображении координат в область просмотра.

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

Сошлитесь на спрайт со страницы

Поместите sprite.svg, HTML-страницу и icons.css в один каталог, доступный через веб-сервер. Начните с HTTP-предпросмотра с тем же origin, чтобы ограничения локальных файлов или другой хост не скрывали простую ошибку ссылки.

Добавьте правила в icons.css и загрузите таблицу стилей со страницы:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

Затем добавьте экземпляры в тело HTML:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

Часть перед # указывает файл, после — выбирает символ. Современный атрибут — href. Справочник use MDN описывает внешние ссылки и предупреждает, что браузеры могут отклонять загрузку с другого origin. Не считайте перенос рабочего спрайта на CDN простой заменой: проверьте настоящее место передачи.

При стандартном корневом размере шрифта браузера правила дают листу блок 24 на 24 CSS-пикселя, стрелке — 48 на 24. Размеры используют rem, поэтому другой размер корневого шрифта меняет их. Сравнивайте иконки внутри реального компонента и в увеличенном предпросмотре: правильный блок все еще может содержать графику со слишком большими полями.

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

Выберите правило оформления перед объединением файлов

Оба контура примера явно используют fill="currentColor". Это позволяет экземпляру использовать окружающий CSS color: кнопка задает бирюзовый, стрелка — темно-синий. Справочник color объясняет, что currentColor может давать значение заливкам и обводкам.

Для второго появления листа используйте ту же ссылку pv-leaf и измените color экземпляра на коралловый. Не дублируйте контур лишь для другого цвета темы.

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

Также не стройте API спрайта на произвольных селекторах страницы, обращающихся к контурам из подключённого определения. MDN отмечает ограничения стилей клонированного содержимого use. Задайте нужное поведение оформления в исходной графике и проверьте компонент, который её использует.

Предотвратите повторяющиеся ID внутри графики

Уникальные имена символов обязательны, но экспортированный SVG может содержать дополнительные внутренние ID: градиентов, масок, контуров обрезки или других определений по ссылкам. MDN требует уникальности каждого id SVG в дереве узлов. Два ранее отдельных файла могут нарушить правило при объединении.

Например, пусть экспорт листа и значка содержит градиент paint0. Добавьте префикс одновременно ID градиента листа и его ссылке:

Фрагмент все еще должен указывать на нужное определение. Примеры fill MDN показывают связь ID градиента и url(#...). Дайте значку собственный префикс вместо направления обеих ссылок на градиент листа.

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

Именуйте каждый видимый экземпляр в контексте

Лист рядом с видимым словом «Garden» повторяет информацию кнопки. Его SVG использует aria-hidden="true", оставляя имя кнопки ее тексту. Держите атрибут на декоративном SVG, а не интерактивной кнопке. Рекомендации MDN по aria-hidden описывают декоративное содержимое и предупреждают, что нельзя скрывать элементы, получающие фокус.

У отдельной стрелки другая роль: она передает направление без соседнего текста. Внешний SVG использует role="img" и aria-label="Right direction" по рекомендациям MDN для именования встроенного SVG-изображения.

Выбирайте подпись в месте использования. Один лист может значить «Сад», «Растительный» или быть просто украшением в разных интерфейсах. Проверяйте доступное имя конечного компонента инструментами доступности браузера и целевой вспомогательной технологией; сам повторно используемый символ не определяет контекст.

Проверяйте передаваемый спрайт, а не только исходные файлы

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

Повторяйте небольшой набор проверок после упаковки:

1. Файл: подтвердите загрузку нужного спрайта с итогового URL.
2. Фрагмент: сравните каждый фрагмент href с ID передаваемого символа, включая регистр.
3. Границы: сравните маленький компонент и увеличенную графику на обрезку, поля и пропорции.
4. Оформление: покажите одноцветную иконку в двух цветах темы, а графику фиксированных цветов проверьте отдельно.
5. Внутренние ссылки: проверьте разрешение ссылок оформления, масок и обрезки с префиксами после оптимизации.
6. Смысл: проверьте имя каждого интерактивного компонента и подпись каждого значимого отдельного изображения.

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

Если единственный исходник — иконка PNG

Если простая иконка сохранилась только в PNG, конвертируйте PNG в SVG с PerfectVector перед упаковкой. Сравните полученные силуэт, отверстия и цветовые области с исходником, затем утвердите координатные границы и оформление. Наконец, задайте утвержденной графике стабильные ID и добавьте в спрайт. Конвертация дает векторную графику, а не выбирает имена символов, смысл компонентов или архитектуру передачи.

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

Частые вопросы

Почему спрайт SVG пуст при прямом открытии? Спрайт только с определениями symbol не показывает их напрямую. Проверьте через экземпляр SVG use с правильным путем файла и ID фрагмента перед признанием документа поврежденным.

Нужен ли всем символам одинаковый viewBox? Нет. Сохраняйте каждую утвержденную систему координат при упаковке. Иконки общей сетки дизайн-системы могут иметь одинаковые границы, но широкий символ не станет квадратным лишь от изменения чисел viewBox.

Почему изменение цвета страницы не перекрашивает иконку? Проверьте правило оформления исходника. Фиксированная заливка отличается от контура с currentColor. Сохраняйте намеренную многоцветность и явно выбирайте заливки или обводки, наследующие цвет экземпляра.

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

Источники

1. MDN — symbol — Повторно используемые определения и непрямое отображение.
2. MDN — use — Внешние фрагменты, ограничения стилей и origin.
3. MDN — viewBox — Связь координатных границ и области просмотра.
4. MDN — color — CurrentColor как входное значение оформления SVG.
5. MDN — id — Уникальность идентификаторов в дереве документа.
6. MDN — fill — Ссылки на источники оформления, например URL градиентов.
7. MDN — aria-hidden — Декоративное содержимое и ограничения фокусируемых элементов.
8. MDN — img role — Именованный внешний SVG для значимого изображения.

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