SVG или PNG: что выбрать для иконок

Почему формат так важен

Формат иконок влияет на несколько вещей одновременно: качество отображения, вес файлов, скорость загрузки, удобство работы разработчиков.

SVG: вектор

SVG (Scalable Vector Graphics) — векторный формат. Иконка хранится как набор математических формул, а не как набор пикселей. Это даёт несколько преимуществ.

Плюсы SVG:

• Масштабируется без потери качества — от 16 до 512 px и больше
• Малый вес — иконка весит 1–5 КБ, а не 20–50 КБ
• Меняет цвет через CSS — один файл для всех цветов
• Анимируется — можно создавать SVG-анимации
• Работает во всех современных браузерах — поддержка почти 100%
• Идеален для retina-экранов — всегда чёткий

Минусы SVG:

• Сложные иконки весят больше — детализированные SVG могут быть тяжелее PNG
• Не работает в email — большинство почтовых клиентов не поддерживают SVG
• Проблемы с печатью — некоторые типографии не принимают SVG
• Требует оптимизации — без оптимизации SVG может содержать лишний код

SVG — идеальный выбор для сайтов и приложений. Это стандарт современной веб-разработки.

PNG: растр

PNG — растровый формат. Иконка хранится как набор пикселей. Это означает фиксированный размер и качество.

Плюсы PNG:

• Поддержка везде — включая email, старые браузеры, устаревшие системы
• Прозрачность — в отличие от JPG, PNG поддерживает прозрачный фон
• Предсказуемость — иконка выглядит одинаково везде
• Легко вставить — просто картинка, не нужно беспокоиться о поддержке

Минусы PNG:

• Фиксированный размер — при увеличении иконка «размывается»
• Большой вес — 50 иконок могут весить 2–3 МБ
• Нельзя менять цвет через CSS — нужно создавать отдельные файлы
• Не подходит для retina — нужно готовить двойной размер (2x, 3x)

PNG подходит для случаев, где SVG не работает: email, старые системы, некоторые типы печати.

Шрифтовые иконки (iconfont)

Шрифтовые иконки — это иконки, встроенные в шрифт. Каждая иконка — это «буква», которую можно использовать в тексте.

Плюсы:

• Единый цвет через CSS — меняется как цвет текста
• Масштабируется как текст — можно увеличить или уменьшить
• Малый вес — один файл шрифта содержит все иконки
• Удобно вставлять в код — просто класс в HTML

Минусы:

• Проблемы с доступностью — скринридеры не понимают иконки в шрифте
• Только один цвет — нельзя сделать многоцветную иконку
• Задержка загрузки — шрифт грузится дольше, чем SVG
• Проблемы с позиционированием — иконки могут «съезжать» при изменении размера шрифта

Шрифтовые иконки — устаревающий подход. Сегодня их используют реже, в основном для legacy-проектов.

SVG-спрайт

SVG-спрайт — это один файл, в котором собраны все SVG-иконки. Это решение для проектов с большим количеством иконок.

Плюсы:

• Один запрос — все иконки загружаются за один раз
• Кэшируется — браузер сохраняет спрайт надолго
• Быстро — нет множества запросов на каждую иконку
• Удобно — одна библиотека иконок для всего проекта

Минусы:

• Первый запрос тяжелее — спрайт содержит все иконки сразу
• Сложнее редактировать — нужно пересобирать спрайт при изменениях
• Не подходит для маленьких проектов — если иконок 5–10, спрайт избыточен

SVG-спрайт — оптимальное решение для крупных проектов с 50+ иконками.

Сравнение форматов

Как выбрать формат

Выбор зависит от задачи.

Ошибки

Наши рекомендации