SVG или PNG: вектор против растра — какой формат выбрать

Короткий ответ для нетерпеливых

Если у вас логотип, иконка, схема или плоская иллюстрация — берите SVG. Один файл будет одинаково чётким и в шапке сайта, и на билборде, и при этом весить считанные килобайты. Если у вас фотография, скриншот или сложная картинка с тонкими переходами цвета — берите PNG (а для самих фото нередко выгоднее JPG или WebP). SVG тут просто не справится.

Дальше — почему это так, и где проходят границы, чтобы вы могли решать сами, а не запоминать правила наизусть.

Вектор против растра: в чём суть

Вся разница сводится к одному вопросу: что именно лежит внутри файла.

PNG — это растр. Картинка хранится как сетка из пикселей: миллионы крошечных цветных квадратиков, каждый со своим цветом. Это как мозаика — вблизи видны отдельные плитки, издалека складывается изображение. Размер сетки задан жёстко: PNG 512×512 — это ровно 262 144 пикселя, ни больше ни меньше.

SVG — это вектор. Внутри нет ни одного пикселя. Вместо них — текстовое описание фигур на языке XML: «нарисуй круг в точке (100, 100) радиусом 50 и залей цветом #3B82F6», «проведи кривую отсюда сюда». Браузер читает эти инструкции и каждый раз рисует картинку заново под текущий размер экрана.

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

Масштабирование и ретина: главное отличие

Это тот пункт, ради которого многие и выбирают SVG. Растяните PNG-иконку 32×32 до баннера — и получите «лесенку» по краям и мыло: браузеру нечем заполнить новые пиксели, поэтому он растягивает и размазывает имеющиеся. Уменьшите слишком сильно — детали смажутся в кашу.

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

Размер файла: когда SVG крошечный, а когда нужен PNG

Здесь у многих ломается интуиция, поэтому запомните простое правило: вес SVG зависит от сложности рисунка, а вес PNG — от размера в пикселях.

Простая иконка или логотип из нескольких фигур в SVG — это буквально пара строк текста, часто меньше 5 КБ. Тот же логотип в PNG, заготовленный под крупный экран в 1024 пикселя, легко потянет на сотни килобайт. Для плоской графики SVG почти всегда выигрывает в разы.

Но как только в SVG появляется множество узлов, фильтров, теней и градиентов, его текстовое описание разбухает — и сложная иллюстрация в SVG может оказаться тяжелее PNG. А фотография в виде вектора (если её вообще удастся туда впихнуть) будет просто гигантской. Вот ориентир:

Фотографии: почему здесь только PNG

Самый частый вопрос новичков: «Раз SVG такой лёгкий и чёткий, давайте всё переведём в него?» Не выйдет — и вот почему.

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

PNG же с миллионами оттенков справляется штатно: PNG-24 несёт около 16 миллионов цветов плюс альфа-канал прозрачности, и делает это без потерь — пиксели не огрубляются при сохранении. Правда, за это приходится платить весом: для чистых фотографий WebP или JPG обычно дают тот же вид при куда меньшем размере. PNG же незаменим там, где важна точность и прозрачность одновременно: скриншоты интерфейсов, картинки с резким текстом, графика поверх любого фона.

Анимация, стилизация и чёткость текста

Есть зона, где SVG не просто удобнее, а делает то, чего PNG не умеет в принципе.

• Анимация и интерактив. SVG — это код прямо в HTML-странице, поэтому его можно анимировать через CSS или JavaScript: плавно менять цвет при наведении, рисовать линию «на лету», вращать элементы. PNG статичен (движущийся вариант — это уже отдельный формат APNG).
• Стилизация на лету. Цвет SVG-иконки можно поменять одной строчкой CSS — например, перекрасить под тёмную тему. PNG для этого пришлось бы перерисовывать и пересохранять.
• Идеально резкий текст и линии. Логотип с тонкими буквами в SVG останется острым при любом увеличении. В PNG тот же текст на мелком размере неизбежно «замылится».

Именно поэтому интерфейсные иконки, логотипы и инфографику на современных сайтах почти всегда верстают в SVG.

Что выбрать под задачу

Сведём всё в одну таблицу — это самый быстрый способ принять решение.

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

Как конвертировать туда и обратно

Форматы не враги — их легко переводить один в другой, главное понимать, что при этом происходит.

SVG → PNG (растеризация). Простое и точное преобразование: вектор «отрисовывается» в пиксельную сетку нужного размера. Так делают, когда площадка не принимает SVG — соцсети, маркетплейсы, почтовые рассылки, презентации. Выбираете нужный размер (или DPI) — и получаете чёткий PNG.

PNG → SVG (трассировка). Здесь сложнее: программа обводит контуры растра кривыми и пытается «угадать» фигуры. Для простой плоской графики — одноцветного логотипа, силуэта — это работает прилично. Для фотографии или сложного рисунка результат будет приблизительным и обычно хуже исходника. Трассировка — приём для восстановления простой графики, а не волшебная кнопка «сделать любую картинку векторной».

Нужно обратное преобразование простой графики — воспользуйтесь конвертером PNG в SVG. Для фотографий присмотритесь к SVG и WebP, а полный список всех преобразований всегда есть на странице всех форматов.