SVG или PNG: какой формат файла выбрать для логотипов, иконок и скриншотов

При экспорте любой дизайн-инструмент задаёт один и тот же вопрос: SVG или PNG? В рабочем размере они выглядят одинаково, поэтому люди берут то, что уже выбрано. Разница вылезает позже: на большом экране, на медленной странице или когда нужно сменить фирменный цвет. Ниже одна и та же иконка в обоих форматах, цена каждого и таблица для случаев, которые встречаются в каждом проекте.

Чем они отличаются на самом деле: контуры или пиксели

SVG хранит инструкции: нарисуй эту кривую, залей её этим цветом. PNG хранит сетку цветных пикселей, по одному значению на точку. Эта единственная разница объясняет всё остальное.

Инструкции можно выполнить в любом размере, поэтому кривая каждый раз перерисовывается гладко. У сетки фиксированное число точек, так что на большом экране их приходится растягивать. SVG это векторный формат, PNG растровый. Оба являются открытыми стандартами W3C, и панель экспорта Figma предлагает их рядом.

Одно и то же сердце при сильном увеличении

В обычном размере два сердца идентичны. Увеличьте их, и это перестанет быть одним и тем же файлом.

SVG, увеличено

PNG, увеличено

Левое сердце перерисовано по контуру в новом размере, поэтому край остаётся чистой кривой. Правое сердце это рендер той же иконки 12 на 12 пикселей, увеличенный методом ближайшего соседа, поэтому виден каждый пиксель. Реальные экраны делают это мягче, размывая вместо блоков, но причина та же: в файле никогда не было такой детализации.

Исправить PNG можно экспортом в большем размере, и это же является его ценой.

Перекраска в коде: один файл, любой цвет

SVG это текст. Цвет в нём задан атрибутом, так что таблица стилей может изменить его без нового экспорта.

.icon { fill: currentColor; } .icon:hover { fill: #FF3B30; }

Состояния при наведении, тёмная тема и бренд-темы превращаются в по одной строке. Для PNG нужен новый файл на каждый цвет и каждый размер.

Размер файла: зависит от того, что на картинке

Мы измерили сердце выше. SVG весит 290 байт. PNG в том же визуальном размере растёт вместе с пикселями.

Для простых фигур SVG остаётся на месте, а PNG умножается с каждым выпущенным размером. Для детальных изображений всё наоборот. Мы экспортировали карточку 1200 на 800 с градиентным фоном и мягкой тенью: PNG получился 55 365 байт, JPG с качеством 80 это 15 248, а WebP с качеством 80 это 4 970. Плавные градиенты и тени состоят из множества оттенков, и SVG потребовался бы фильтр или огромное число фигур, чтобы их имитировать.

Когда PNG это правильный выбор

PNG подходит, когда картинка состоит не из чистых фигур:

• Скриншоты. Окно браузера или целый экран приложения с мягкими тенями и настоящим рендером текста по природе состоит из пикселей. PNG сохраняет их точно.
• Детальная графика. Тонкая текстура, зерно и рисованные тени не сводятся к контурам.
• Прозрачные изображения, которые непросты. PNG поддерживает прозрачность, поэтому вырезанный объект с мягким краем работает на любом фоне.

Одно предупреждение: PNG с логотипом это PNG фиксированного размера. Храните SVG как мастер-файл и экспортируйте из него PNG только туда, где SVG не прочитается.

Когда SVG это правильный выбор

• Логотипы. Один файл для шапки сайта, фавикона и билборда. Полный набор, включая PDF, AI и EPS, смотрите в статье форматы файлов логотипа: объяснение.
• Иконки. Набор иконок для таб-бара или панели инструментов, перекрашиваемый под состояния через CSS. Lucide, один из самых используемых открытых наборов иконок, поставляет каждую иконку в SVG.
• Простые фигуры и иллюстрации. Плоские цветные формы, разделители, бейджи и графики.

Где SVG пасует: файл с тысячами фигур становится тяжёлым, а в некоторых местах, например в почтовых клиентах, превью соцсетей и старых приложениях, его могут не показать. Там используйте PNG.

А как же фотографии?

Ни то, ни другое. Фото с камеры телефона 2026 года имеет непрерывные тона, а это именно то, с чем плохо справляются векторы и в чём PNG получается огромным. Используйте JPG или WebP: они сжимают фото намного лучше PNG. WebP поддерживается в современных браузерах.

SVG или PNG: таблица решений

FAQ

SVG лучше, чем PNG?

Для логотипов, иконок и простых фигур да: он чётче в любом размере и обычно меньше. Для скриншотов и детальной графики лучше PNG. Ни один формат не выигрывает во всём.

Что выбрать для логотипа: SVG или PNG?

SVG. Храните его как мастер-файл и экспортируйте из него PNG для мест, которые не умеют показывать SVG, например для некоторых почтовых и соцсетевых инструментов.

SVG меньше, чем PNG?

Для простых фигур да, как показывает сердце выше: 290 байт против 393 до 10 400 байт в зависимости от размера. Для детальных изображений наоборот, потому что SVG нужно множество фигур, чтобы их описать.

Можно ли перекрасить PNG так же, как SVG?

Не чисто. Заливка SVG это текстовый атрибут, который можно менять в CSS. PNG это запечённые пиксели, поэтому новый цвет означает новый экспорт.

Почему мой PNG выглядит размытым при увеличении?

PNG хранит фиксированную сетку пикселей. Когда его показывают крупнее собственного размера, экран растягивает пиксели, и края размываются или становятся блочными. Экспортируйте в большем размере или используйте SVG, если изображение это простая фигура.

JPG или WebP лучше PNG для фотографий?

Да. Они сжимают фото намного лучше, поэтому страница грузится быстрее. PNG оставьте для скриншотов, чёткого текста и графики.

Источники

• Scalable Vector Graphics (SVG) 2, W3C.
• Portable Network Graphics (PNG) Specification, W3C.
• Image file type and format guide, MDN Web Docs.
• Размеры файлов измерены нами с помощью sharp: контур сердца 24 на 24 в SVG и в PNG в пяти размерах, а также карточка 1200 на 800 с градиентом и тенью в PNG, JPG и WebP с качеством 80.
• Впервые опубликовано как карусель в UX Brainy.