Як перевикористати інлайнові SVG-елементи на сторінці?

Повне пояснення

Що це і навіщо

Перевикористання інлайнових SVG‑елементів дозволяє розміщувати один раз графічний ресурс (наприклад, символ або іконку) у розділі <defs> та викликати його кілька разів за допомогою <use>. Це зменшує розмір HTML‑файлу, покращує кешування в браузері і спрощує підтримку стилів.

Ключові принципи, терміни, інваріанти

• <defs> – контейнер для визначень, що не рендеряться самі по собі.
• <symbol> – визначення графічного елементу, який можна повторно використовувати.
• <use> – посилання на id, що вказує на <symbol> або інший SVG‑елемент.
• href (або xlink:href у старих браузерах) – атрибут, що вказує на id.
• viewBox – координатна система символу, що забезпечує масштабованість.

Як це працює

1. У <defs> створюється <symbol id='…'> з вмістом SVG.
2. У будь‑якому місці документа вставляється <use href='#…'>.
3. Браузер підставляє вміст символу, застосовуючи поточні стилі (fill, stroke, клас).
4. При зміні атрибутів <use> (наприклад, class) можна змінювати зовнішній вигляд усіх екземплярів.

Практика і реалізація

<svg style='display:none'>
  <defs>
    <symbol id='icon-check' viewBox='0 0 24 24'>
      <path d='M20 6L9 17l-5-5' />
    </symbol>
  </defs>
</svg>

<div class='btn'>
  <svg class='icon'><use href='#icon-check'></use></svg>
  Підтвердити
</div>

У React можна створити компонент Icon:

const Icon = ({id, className}) => (
  <svg className={className}><use href={`#${id}`} /></svg>
);

Тестування

• Jest + Testing Library: перевірити, що компонент рендерить <use> з правильним href.
• Playwright: перевірити, що іконка відображається у всіх елементах.

Оптимізація продуктивності

• Використовуйте один глобальний <svg> з <defs>, розміщений у корені документа або в компоненті App.
• Уникайте дублювання <symbol> у різних файлах; підключайте один файл через <link rel='preload' as='image'>.
• Для великих наборів іконок розгляньте генерацію sprite‑файлу.

Accessibility

• Додавайте aria-hidden='true' до <svg>, якщо іконка лише декоративна.
• Якщо іконка має значення, використовуйте role='img' та aria-label.

Безпека та валідація

• Переконайтеся, що id у <symbol> не містить небезпечних символів.
• Уникайте підключення SVG‑зовнішніх ресурсів без перевірки.

Типові помилки й edge cases

• Відсутність viewBox призводить до некоректного масштабування.
• В старих браузерах потрібен xlink:href замість href.
• Якщо id не знайдено, <use> відображає порожній елемент.

Cheatsheet + можливі follow‑up питання

• Як підключити SVG‑sprite? – через <use href='icons.svg#icon-id'>.
• Чи можна змінювати колір? – через CSS‑змінні або currentColor.
• Чи підтримується <use> у React? – так, але треба уникати dangerouslySetInnerHTML.