SVG сохраняет чёткость краёв при любой плотности пикселей и умеет адаптировать цвета к теме. У этой гибкости есть условие: файл должен быть автономным, простым и читаемым в очень маленькой области.
Создайте квадрат с viewBox
Используйте квадратный viewBox, например 0 0 64 64, и оставьте отступы вокруг символа. viewBox задаёт систему координат, не навязывая физический размер отображения.
Сведите рисунок к его характерным формам. Тонкие детали, мелкие просветы букв и целые слова часто исчезают при 16 пикселях, хотя технически векторный файл остаётся чётким.
| Пункт | Зачем | Проверка |
|---|---|---|
| Квадратный viewBox | Предсказуемая обрезка | Предпросмотр 16×16 |
| Простые контуры | Читаемость | Светлая и тёмная вкладки |
| Без зависимостей | Автономная загрузка | Без доступа к сети |
| Запасной ICO | Старые клиенты | URL в корне |
Сделайте файл автономным
Встройте нужные стили внутрь SVG. Если символ зависит от шрифта, преобразуйте текст в контуры: внешний веб-шрифт ненадёжен в этом контексте.
Удалите скрипты, удалённые ссылки и ненужные метаданные редактора. Простые фигуры и стили также облегчают проверку безопасности и уменьшают размер файла.
Наконец, откройте файл отдельно в браузере и проверьте без интернета. Если рисунок меняется или исчезает, он всё ещё зависит от внешнего ресурса, который нужно встроить или заменить.
Объявите SVG с запасным форматом
Добавьте link rel icon с type image/svg+xml и URL от корня сайта. Также сохраните favicon.ico в корне для клиентов, которые не выбирают SVG или запрашивают ICO напрямую.
SVG не заменяет значок Apple Touch и значки манифеста. Для этих интерфейсов экспортируйте непрозрачные PNG или PNG, рассчитанные на маскирование.
Адаптируйте цвета к теме
Правило prefers-color-scheme внутри элемента style может менять fill или stroke в тёмной теме. Сначала задайте надёжный цвет по умолчанию, затем добавьте вариант как прогрессивное улучшение.
Проверьте файл в настоящих вкладках при нескольких уровнях масштабирования. Также изучите запасной вариант, когда SVG не выбран: ICO, исчезающий на тёмном фоне, остаётся проблемой для соответствующих клиентов.
Первоисточники
Частые вопросы
Нужны ли SVG атрибуты width и height?
Для масштабирования важнее всего квадратный viewBox. Можно явно задать width и height, но браузер всё равно определяет размер значка по месту отображения.
Может ли он загрузить внешний шрифт?
Не рассчитывайте на это. Преобразуйте буквы в контуры, чтобы получить автономный файл с предсказуемым отображением.
Достаточно SVG для iOS?
Нет. Для главного экрана нужен отдельный непрозрачный PNG — значок Apple Touch.