Представьте: дизайнер передаёт макет из 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% веса файла. Это снижает затраты на хостинг и ускоряет загрузку.
Почему SVG-спрайт ускоряет загрузку в 10 раз?
Использование спрайта сокращает количество HTTP-запросов с десятков до одного — разница в 10–50 раз. Спрайт кэшируется браузером: после первой загрузки иконки мгновенно отображаются на всех страницах. В отличие от иконок на CSS (background-position), SVG-спрайт сохраняет чёткость и поддерживает currentColor. Мы подготавливаем ассеты для 100+ сайтов и знаем, как правильно собрать спрайт.
Пример структуры SVG-спрайта
<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 -
apple-touch-icon.png— 180×180, для iOS Safari -
icon-192.png+icon-512.png— для PWA manifest
Пример 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-изображений
- Документация по интеграции
- Поддержка при вёрстке
Сроки и стоимость
Подготовка полного набора ассетов (оптимизация существующих иконок, SVG-спрайт, фавикон-набор, OG-шаблон) занимает 2–4 дня в зависимости от объёма. Оценим ваш проект бесплатно — свяжитесь с нами. Получите консультацию: наши инженеры подберут оптимальное решение для ваших задач.
Мы работаем с веб-проектами более 5 лет и подготовили ассеты для 100+ сайтов. Исходные спецификации формата SVG определяются SVG 2 от W3C.