Значки SVG: встроенная разметка, спрайт с use или элемент img

Что это

Три способа разместить значок SVG. Встроенный: разметка <svg> находится в HTML, поэтому fill="currentColor" следует цвету текста, а CSS может обращаться к каждому контуру. Спрайт: один файл определяет каждый значок как <symbol id="check">…</symbol>, а каждое использование имеет вид <svg><use href="/icons.svg#check"></use></svg>; файл загружается один раз и кэшируется, а копия наследует color из своего окружения. Изображение: <img src="icon.svg"> или фон CSS — самый простой кэшируемый вариант, но SVG становится непрозрачным для CSS изображением, внутренние элементы которого нельзя стилизовать.

Почему это важно

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

Как применять

• По умолчанию используйте спрайт с того же источника через <use href>. MDN отмечает, что браузеры могут применять к <use> политику одного источника и отказываться от URL других источников, поэтому отдавайте спрайт с источника страницы или один раз встройте блок <symbol> в начало документа.
• Задавайте символам fill="currentColor" и, где уместно, stroke; MDN определяет currentColor как значение свойства color элемента, поэтому color на кнопке или ссылке оформляет значок.
• Помечайте декоративные значки aria-hidden="true" и focusable="false". Самостоятельному значку задавайте имя: элемент <title> внутри SVG — элемент доступного имени, обычно также показываемый как подсказка, — либо aria-label на окружающей кнопке.
• Устанавливайте width и height атрибутами или CSS для каждого значка, чтобы до прихода спрайта макет не сдвигался.
• Встраивайте два или три значка для первой отрисовки — логотип, меню, — а остальные держите в спрайте; версионируйте URL спрайта, как любой другой ресурс.
• Пропускайте значки через оптимизатор и нормализуйте viewBox, чтобы у всех была одна система координат.

Подводные камни

Классы страницы не достигают клонированного содержимого <use>; через границу проходят только наследуемые и пользовательские свойства, поэтому многоцветным значкам нужны currentColor и пользовательские свойства, а не селекторы классов. Копия недоступна скриптам в DOM. Спрайт, меняющий имена id, ломает все страницы со ссылками на старые имена до истечения кэшей. Шрифты значков, более старый вариант, здесь не сравниваются.