Уявіть: дизайнер передає макет із Figma, ви відкриваєте його й бачите десятки PNG-іконок із захардкодженим синім кольором. На Retina вони розмиті, у темній темі нечитабельні, а при завантаженні кожного файлу окремо — 50 HTTP-запитів, які вбивають Core Web Vitals. Ми вирішуємо цю проблему на етапі підготовки асетів: перетворюємо розрізнені растри на єдину систему SVG-іконок, оптимізованих під будь-які пристрої та теми.
Формати: що й коли
SVG-спрайт — стандарт для вебу. Масштабується без втрат, підтримує currentColor для динамічної теми, CSS-анімації та важить 0.5–3 KB на іконку. Економія трафіку до 60% порівняно з PNG, а для простих форм SVG у 10–50 разів легше. PNG залишаємо тільки для складних градієнтів — потрібні версії 1x, 2x, 3x для Retina. Icon Font (Font Awesome, Material Icons) застарів: погана доступність, FOIT при завантаженні. Використовуйте, тільки якщо проєкт уже на ньому.
Як підготувати SVG-іконки до інтеграції?
Іконка, готова до розробки, повинна:
- Використовувати
currentColorзамість захардкодженого кольору:
Тоді<path fill="currentColor" d="M..." />color: redна батьківському елементі змінює колір іконки. - Мати фіксований viewBox, зазвичай
0 0 24 24або0 0 20 20. - Не містити зайвих атрибутів —
id,class,style,data-*з Figma-експорту потрібно прибрати. Інструмент: SVGO або онлайн svgomg.net. - Бути оптимізованою — SVGO прибирає зайві
<g>, об'єднує шляхи, прибирає пробіли. Типова економія: 30–60% ваги файлу. Для середнього сайту це знижує витрати на хостинг до 3000 грн/міс. - Додавайте атрибути
role="img"таaria-labelдля доступності (WCAG 2.1 AA), використовуйте BEM-нотацію для CSS-класів, оптимізуйте path precision до 4 знаків.
Чому SVG-спрайт прискорює завантаження в 10 разів?
Використання спрайту скорочує кількість HTTP-запитів з десятків до одного — різниця в 10–50 разів. Спрайт кешується браузером: після першого завантаження іконки миттєво відображаються на всіх сторінках. SVG-спрайт кращий за окремі файли в 10-50 разів за швидкістю завантаження. На відміну від іконок на CSS (background-position), SVG-спрайт зберігає чіткість і підтримує currentColor. Ми готуємо асети для 100+ сайтів і знаємо, як правильно зібрати спрайт.
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <g id="icon-search"> <path fill="currentColor" d="M10 2a8 8 0 0 0-6.32 12.9l-2.38 2.38 1.41 1.41 2.38-2.38A8 8 0 1 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/> </g> </defs> <use href="#icon-search"/> </svg> Підключаємо: <svg><use href="#icon-search"/></svg>.
Порівняння форматів
| Формат | Масштабованість | Колір | Вага | Використання |
|---|---|---|---|---|
| SVG | Без втрат | currentColor | 0.5–3 KB | Основний |
| PNG | Втрачає на Retina | Фіксований | 10–100 KB | Складні градієнти |
| Icon Font | Залежить від шрифту | CSS | 100–500 KB | Застарілий |
Системи іконок
Готові бібліотеки іконок, які варто розглянути, перш ніж малювати з нуля:
| Бібліотека | Ліцензія | Іконок | Стиль |
|---|---|---|---|
| Lucide Icons | MIT | 1500+ | Outline, 24×24 |
| Heroicons | MIT | 292 | Outline + Solid, 24×24 |
| Phosphor Icons | MIT | 9000+ | 6 стилів |
| Tabler Icons | MIT | 5500+ | Outline, 24×24 |
| Material Symbols | Apache 2.0 | 3000+ | Variable font |
Якщо бренд вимагає унікальних іконок — малюємо на основі вибраної сітки (24×24, stroke 1.5–2px для outline-стилю, єдиний corner radius).
Що входить у фавікон та App Icons?
Фавікон сьогодні — не один ICO-файл. Мінімальний набір:
-
favicon.ico— 32×32, для старих браузерів -
favicon.svg— векторний, підтримуєprefers-color-scheme(фавікон SVG — сучасний стандарт) -
apple-touch-icon.png— 180×180, для iOS Safari -
icon-192.png+icon-512.png— для PWA manifest (PWA іконки)
Приклад SVG-фавікона з адаптацією під тему:
<svg xmlns="http://www.w3.org/2000/svg"> <style> path { fill: #000; } @media (prefers-color-scheme: dark) { path { fill: #fff; } } </style> <path d="..."/> </svg> OG-зображення та соціальні асети
Для SEO та шерінгу в соцмережах потрібні:
-
OG Image (Open Graph): 1200×630px, PNG або JPEG. Автогенерація через
@vercel/ogабо Puppeteer — для динамічних сторінок. - Twitter Card: 1200×628px (аналогічно OG)
- LinkedIn Banner: 1128×191px (для корпоративних сторінок)
Що входить у роботу з підготовки асетів
Все під ключ: від аудиту до інтеграції.
- Аудит вихідних макетів та експорт SVG
- Очищення та оптимізація кожного файлу через SVGO
- Збірка єдиного SVG-спрайту
- Генерація фавікон-набору (ICO, SVG, PNG, PWA)
- Шаблони OG-зображень
- Документація з інтеграції
- Підтримка при верстці
Особливу увагу приділяємо доступності іконок (атрибути aria-label, role="img") та веб-продуктивності (оптимізація SVG, спрайти). PWA іконки та Retina іконки також входять у набір. Фавікон SVG — сучасний стандарт. Векторні іконки для вебу — наша спеціалізація.
Терміни та вартість
Підготовка повного набору асетів (оптимізація наявних іконок, SVG-спрайт, фавікон-набір, OG-шаблон) займає 2–4 дні залежно від обсягу. Вартість робіт — від 5000 грн. Оцінимо ваш проєкт безкоштовно — зв'яжіться з нами. Отримайте консультацію: наші сертифіковані інженери з 5+ років досвіду підберуть оптимальне рішення для ваших завдань. Гарантуємо якість та сумісність з усіма сучасними браузерами.
Маємо 5+ років досвіду та 100+ успішних проектів у веб-розробці. Надаємо гарантію: безкоштовне доопрацювання, якщо асети не пройдуть перевірку. Вихідні специфікації формату SVG визначаються SVG 2 від W3C.