Какие плюсы и минусы SVG-шрифт

«Какие плюсы и минусы SVG-шрифт» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Плюсы SVG-шрифтов:

  • Малый вес по сравнению с растровыми изображениями
  • Масштабируются без потери качества
  • Поддержка анимации через CSS/JS
  • Хорошая читаемость для скринридеров (если правильно реализовано)
  • Поддержка градиентов и фильтров

Минусы SVG-шрифтов:

  • Сложность создания/редактирования (нужны спец. редакторы)
  • Ограниченная поддержка в старых браузерах
  • Могут быть проблемы с рендерингом в некоторых ОС
  • Требуют дополнительных HTTP-запросов (если не инлайнятся)
  • Сложности с позиционированием и выравниванием
<!-- Пример использования SVG-шрифта -->
<svg>
  <use xlink:href="#icon-user"></use>
</svg>

Для иконок сейчас чаще используют SVG-спрайты или компонентные подходы (React/Vue иконки). SVG-шрифты постепенно устаревают, но еще встречаются в legacy-проектах.