Ответ
Плюсы SVG-шрифтов:
- Малый вес по сравнению с растровыми изображениями
- Масштабируются без потери качества
- Поддержка анимации через CSS/JS
- Хорошая читаемость для скринридеров (если правильно реализовано)
- Поддержка градиентов и фильтров
Минусы SVG-шрифтов:
- Сложность создания/редактирования (нужны спец. редакторы)
- Ограниченная поддержка в старых браузерах
- Могут быть проблемы с рендерингом в некоторых ОС
- Требуют дополнительных HTTP-запросов (если не инлайнятся)
- Сложности с позиционированием и выравниванием
<!-- Пример использования SVG-шрифта -->
<svg>
<use xlink:href="#icon-user"></use>
</svg>Для иконок сейчас чаще используют SVG-спрайты или компонентные подходы (React/Vue иконки). SVG-шрифты постепенно устаревают, но еще встречаются в legacy-проектах.
Ответ 18+ 🔞
Да ты послушай, что за дичь творится с этими SVG-шрифтами! Ну, как бы, с одной стороны — красота, а с другой — сплошное геморройное веселье.
Плюсы, которые даже у мудака не вызовут вопросов:
- Весят, как пушинка, особенно если сравнивать с этими дурацкими растровыми PNG, которые на каждом шагу. Овердохуища картинок — и сайт грузится, будто через хуй с горы.
- Масштабируй их хоть до размеров Луны — никаких пиксельных лесенок, всё чётко, блядь. Красота!
- Анимировать их можно, ёпта! Покрутил CSS-ом, подёргал JS — и иконка пляшет, будто у неё копейка в одном месте застряла.
- Для скринридеров, если, конечно, не накосячить с разметкой, — всё норм, читаются.
- Ну и да, градиенты там, тени... В общем, не просто чёрный квадрат, а с художественным свистом.
А теперь, сука, минусы, от которых волосы в жопе шевелятся:
- Создать или поправить такую иконку? Да ты что! Это ж не в Paint пальцем тыкать. Нужны специальные редакторы, в которых разберётся только полупидор с дипломом дизайнера. Хитрая жопа, короче.
- Старые браузеры, особенно этот ёбаный IE, могут послать всё это дело нахуй и показать пустое место. И клиент потом орёт: «У меня не работает!».
- На разных системах рендерится по-разному: где-то чётко, а где-то — будто через мутное стекло смотрел. Удивление пиздец!
- Каждая иконка — отдельный запрос к серверу, если, конечно, ты не догадался всё в HTML впихнуть. А это, блядь, ещё тот квест.
- Прицепить эту иконку ровно, где надо — та ещё история. То съезжает, то масштаб не тот. Чувствуешь подозрение, что всё это зря?
<!-- Вот, смотри, как это обычно выглядит. Просто, да? Ан хуй! -->
<svg>
<use xlink:href="#icon-user"></use>
</svg>Короче, вся движуха сейчас ушла в сторону SVG-спрайтов или вообще в компонентные иконки для React или Vue. А эти SVG-шрифты — они как мамонты: в старых проектах ещё попадаются, но все уже понимают, что будущее не за ними. Чистая правда, в рот меня чих-пых!