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, придатні для обрізання (maskable).
Адаптуйте кольори до теми
Правило prefers-color-scheme всередині елемента стилю може змінити заливку або обведення в темному режимі. Спочатку визначте надійний колір за замовчуванням, а потім додайте варіант як прогресивне покращення.
Перевірте файл у реальних вкладках і на кількох рівнях масштабування. Також перевірте резервний варіант, коли SVG не вибрано: ICO, який зникає на темному тлі, залишається проблемою для цих клієнтів.
Першоджерела
Поширені запитання
Чи потрібні SVG атрибути width і height?
Для масштабування найважливіший квадратний viewBox. Можна явно вказати width і height, але браузер визначає розмір іконки відповідно до контексту.
Чи може він завантажити зовнішній шрифт?
Не покладайтеся на це. Перетворіть написи на шляхи для автономного та передбачуваного файлу.
Чи достатньо SVG для iOS?
Ні. Надайте окремий непрозорий PNG Apple Touch icon для головного екрана.