Иконочный шрифт или SVG: выбор и пример внедрения
Обновлено .
Для нескольких новых интерфейсных иконок удобно начать с inline SVG: геометрия находится в HTML, не нужен отдельный файл шрифта. Если проект уже использует иконочный шрифт, сначала проверьте его загрузку и доступные имена элементов. Переписывать всё только ради формата необязательно.
Разница на практике
| Критерий | Иконочный шрифт | SVG |
|---|---|---|
| Подключение | CSS и файл шрифта; символ отображается после загрузки | Inline в HTML, отдельный img или спрайт |
| Размер и цвет | Обычно font-size и color | width/height, fill, stroke; можно стилизовать части |
| Повтор на страницах | Файл может использовать браузерный кэш | Внешний файл может кешироваться; inline увеличивает HTML |
| Сбой ресурса | Вместо значка может появиться посторонний символ | Inline не зависит от загрузки отдельного изображения |
| Доступность | Имя задаётся управляющему элементу | Имя также нужно задать; формат сам его не создаёт |
Обычный монохромный иконочный шрифт удобен для единообразных символов, SVG даёт контроль над отдельными контурами. Утверждать, что любой SVG всегда быстрее любого шрифта, нельзя. Сравните объём HTML, CSS, файлов и повторную загрузку на конкретном сайте.
Ссылка с SVG и видимым именем
Этот пример работает без библиотеки и JavaScript. Значок декоративный, название ссылки остаётся обычным текстом; при копировании замените путь на свой раздел.
<a href="/icons.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/></svg> Каталог иконок</a>Атрибут viewBox задаёт координаты рисунка, width и height — размер вывода. currentColor берёт цвет текста. aria-hidden скрывает повторяющий текст значок от дерева доступности, но не скрывает саму ссылку.
План замены в существующем проекте
- Составьте список действительно используемых символов, включая состояния меню и ошибки.
- Замените один компонент. Сохраните его видимую подпись или доступное имя.
- Проверьте клавиатуру, фокус, масштаб страницы и контраст на обоих фонах.
- Сравните передачу ресурсов при пустом кэше и повторном открытии. Не делайте вывод только по размеру одного SVG.
- Удаляйте старый шрифт из своего проекта лишь после проверки всех его потребителей.
Граница примера
Вставляйте inline только доверенный SVG, проверенный вами. Чужой SVG может содержать активное содержимое; не помещайте произвольный пользовательский файл прямо в HTML. Внешний img и inline SVG — разные способы вставки, их стилизация и ограничения тоже различаются.
Источники и проверка
По теме: Стили иконок для сайта: как выбрать единый набор · Доступные иконки: имя действия, декоративный SVG и проверка · Адаптивные SVG-иконки: viewBox, размеры и область нажатия.