PNG против SVG: какой формат для логотипов, иконок и графики?

PNG и SVG — оба популярные форматы для логотипов и графики, но работают они очень по-разному. Неправильный выбор приводит либо к размытому логотипу, либо к файлу, который нельзя открыть везде. Вот как решить.

PNG против SVG: ключевое различие

• PNG (Portable Network Graphics) — растровый формат — он хранит изображение как сетку пикселей. PNG 200×200 имеет ровно 40 000 пикселей. Увеличьте его — и он станет размытым.
• SVG (Scalable Vector Graphics) — векторный формат — он хранит формы как математические инструкции. Логотип SVG выглядит идеально резким при любом размере, от фавикона (16×16) до билборда.

Когда использовать PNG

• Сложные изображения или фотографии: SVG может описывать сложные формы, но непрактичен для фото
• Кроссплатформенная совместимость: PNG открывается везде — браузеры, текстовые редакторы, почта, мессенджеры
• Когда нужен фиксированный выходной размер: для постов соцсетей, печати при известном DPI или попиксельно точных элементов интерфейса
• Скриншоты и макеты интерфейса: растровый по природе, PNG — правильный формат
• Когда SVG недоступен: PNG высокого разрешения (2000+ пикселей в ширину) хорошо работает для большинства целей

Когда использовать SVG

• Логотипы и фирменные знаки: логотипы SVG остаются резкими при любом размере — шапка сайта, иконка мобильного приложения, печатная брошюра
• Иконки: иконки интерфейса в SVG идеально масштабируются на retina/высоко-DPI экранах
• Иллюстрации из форм: графики, диаграммы, инфографика, иллюстрации
• Анимации: SVG поддерживает CSS- и JavaScript-анимации
• Адаптивный веб-дизайн: SVG автоматически масштабируется с окном браузера

Сравнение PNG и SVG

Использование обоих вместе

• Многие процессы используют оба формата:
• Храните SVG как мастер-файл логотипа для редактирования и масштабирования
• Экспортируйте версии PNG в конкретных размерах для соцсетей, презентаций и почты
• Используйте PNG 2× (напр. 400×400 для логотипа 200×200) для retina-дисплеев
• Если у вас только логотип PNG, используйте наш Изменитель размера для создания версий высокого разрешения и PNG → WebP для веб-использования.