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 или иконите на манифеста. Експортирайте непрозрачни или maskable PNG файлове, пригодени за тези интерфейси.
Адаптирайте цветовете към темата
Правило prefers-color-scheme в таг style може да променя fill или stroke в тъмен режим. Първо задайте надежден цвят по подразбиране, после добавете варианта като постепенно подобрение.
Тествайте файла в реални раздели и при няколко нива на мащабиране. Проверете и резервния вариант, когато SVG не е избран: невидим ICO на тъмен фон остава проблем за тези клиенти.
Първоизточници
Често задавани въпроси
Нужни ли са ширина и височина за SVG?
Квадратният viewBox е основният елемент за преоразмеряване. Може да се добавят изрични ширина и височина, но браузърът оразмерява иконата според средата.
Може ли да се зареди външен шрифт?
Не разчитайте на това. Преобразувайте буквите в контури, за да получите самостоятелен и предвидим файл.
Достатъчен ли е SVG за iOS?
Не. Осигурете отделна непрозрачна PNG икона Apple Touch за началния екран.