PNG против SVG: какой формат выбрать?

1. Главное отличие: сетка пикселей против математических путей

PNG — это растр: изображение разбивается на отдельные пиксели, и для каждого записывается цвет. Увеличение PNG просто растягивает эти пиксели, поэтому появляются «ступеньки» и размытие. SVG — это векторное изображение: фигуры описываются математическими инструкциями — координатами и кривыми Безье, — а браузер перерисовывает рисунок в новом размере, поэтому графика остаётся чёткой при любом масштабе. Почти все различия между форматами вытекают из этого одного факта.

Что касается прозрачности, PNG поддерживает альфа-канал и может хранить прозрачный фон. SVG прозрачен от природы — если не рисовать фоновый прямоугольник, всё вокруг рисунка остаётся прозрачным. Для справки: у JPG прозрачности нет вовсе — его белый фон является настоящим цветом, вписанным в изображение.

2. Размер файла и скорость загрузки

Для простой графики вроде иконок и логотипов SVG часто занимает лишь несколько килобайт, и одного файла хватает для любой плотности экрана. PNG, наоборот, обычно требует версий @2x и @3x, чтобы оставаться чётким на Retina-экранах, что умножает размер. С фотографиями всё наоборот: богатые цветовые переходы при векторизации дают огромное число путей, поэтому SVG выходит намного больше, чем JPG или WEBP, — выгоды нет.

Причина в способе сжатия. PNG записывает пиксели без потерь, поэтому чем сложнее изображение, тем больше файл. SVG — обычный текст, в котором повторяющиеся команды пути и координаты сжимаются крайне хорошо. Поэтому два формата, оба названные «без потерь», так по-разному ведут себя по размеру.

Сценарий	Рекомендуемый формат	Почему
Иконки и логотипы сайта	SVG	Один файл на любое разрешение, цвет меняется через CSS
Фотографии	JPG / WEBP	Малый размер при фотографической точности
Скриншоты	PNG	Точность до пикселя и сжатие без потерь
Графики данных	SVG	Чёткость при масштабировании и простота интерактивности
Аватары в соцсетях	PNG / JPG	Большинство платформ принимает только растр

3. Когда нужен PNG

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

4. Когда нужен SVG

• Иконки и логотипы сайтов: один файл на любое разрешение, чёткость на Retina-дисплеях;
• Графика, которой нужно менять цвет через CSS или JavaScript и анимировать штрих;
• Графики данных: библиотеки визуализации вроде ECharts по умолчанию выводят SVG;
• Печать, лазерная гравировка и вырезка винила, где устройство читает векторные пути.

5. Можно ли конвертировать PNG и SVG друг в друга?

Да. PNG → SVG: воспользуйтесь инструментом «PNG в SVG» от PolySVG или инструментом «Изображение в SVG», загрузите файл и нажмите «Создать» для векторизации — для иконок и логотипов результат отличный, а фотографии приобретают иллюстративный стиль. Конвертация бесплатна, и прозрачный PNG сохраняет прозрачный фон. Полученный SVG по-прежнему можно открыть в редакторе для перекраски и удаления фона, завершая рабочий процесс. SVG → PNG: откройте файл в онлайн-редакторе SVG и экспортируйте PNG в нужном разрешении — идеально для документов или предпросмотра.

Важно помнить: конвертация PNG → SVG — это не простое «сохранить как», а векторизация, заново обводящая контуры. Графические ассеты получаются чистыми путями, а фотографии сжимаются в цветовые блоки. Сначала посмотрите результат в инструменте и убедитесь, что стиль совпадает с ожидаемым, и только потом скачивайте.

Правило в одну строку: иконки, логотипы и графики — SVG; фотографии и скриншоты — PNG/JPG/WEBP. Если сомневаетесь, для любой графики выбирайте SVG. Чтобы разобраться глубже, прочитайте Что такое SVG и Три способа превратить изображение в SVG.