SVG vs PNG: когда использовать вектор, а когда растр

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

В чём принципиальная разница между SVG и PNG

Различие между SVG и PNG отражает более широкое разделение на векторную и растровую графику.

SVG (Scalable Vector Graphics) — формат на основе XML, описывающий изображения математическими определениями фигур, линий, кривых и цветов. При увеличении SVG браузер пересчитывает и перерисовывает каждую фигуру в новом масштабе. Результат всегда чёткий — будь то фавикон 16px или баннер шириной 16 000px.

PNG (Portable Network Graphics) — растровый формат, хранящий изображение как сетку пикселей, каждый с определённым значением цвета. У изображения фиксированное разрешение. Увеличьте его сверх исходных размеров — и оно станет размытым и пиксельным. Уменьшите — и вы скачиваете больше данных, чем нужно.

Это различие определяет всё: размер файла, масштабируемость, рабочий процесс редактирования и типы изображений, с которыми каждый формат справляется хорошо.

Когда SVG — лучший выбор

SVG превосходен для любой графики, изначально созданной как векторная. Используйте SVG для:

• Логотипы — логотип должен выглядеть чётко при любом размере, от иконки 32px в браузерной вкладке до полноэкранного hero-баннера. SVG решает это одним файлом. С PNG пришлось бы готовить несколько версий разного разрешения.
• Иконки — UI-иконки, навигация, иконки соцсетей. Реальный пример: интернет-магазин с 50 иконками категорий весом 1.2 МБ в PNG сократил размер до 95 КБ после перехода на SVG.
• Иллюстрации и диаграммы — технические схемы, блок-схемы, карты, инфографики с чёткими линиями и однородными цветами. В SVG текст остаётся выделяемым и индексируемым поиском.
• Анимации — элементы SVG анимируются через CSS или JavaScript, обеспечивая лёгкие спиннеры загрузки, микроинтеракции и интерактивные графики без видеофайлов.
• Фавиконы — современные браузеры поддерживают SVG-фавиконы, чёткие на любой плотности экрана. Создать фавикон из любого изображения можно с помощью Генератора фавиконов.

По данным W3Techs, 65.5% всех сайтов используют SVG — это третий по популярности формат после PNG и JPEG. Его доля растёт примерно на 8% в год благодаря потребностям адаптивного дизайна и преимуществам производительности.

Когда PNG — лучший выбор

PNG подходит, когда важна пиксельная точность или когда содержимое изображения по своей природе растровое:

• Фотографии с прозрачностью — вырезанные товары на прозрачном фоне, многослойные фотокомпозиции. PNG поддерживает полную альфа-прозрачность, сохраняя фотографические детали. (Для фото без прозрачности JPEG обычно лучше.)
• Скриншоты — снимки экрана содержат точные пиксельные элементы интерфейса, антиалиасинг текста и тонкие градиенты, которые по природе растровые. PNG сохраняет их в точности.
• Сложная графика с множеством цветов — детализированные цифровые рисунки, текстуры и фотореалистичные иллюстрации, не упрощаемые до чистых векторных форм.
• Растровая графика с наложением текста — когда нужна пиксельно-точная передача комбинации фото и текста, PNG гарантирует отсутствие артефактов сжатия вокруг букв.

Размер файла и производительность

Для тех типов графики, с которыми SVG справляется хорошо (иконки, логотипы, простые иллюстрации), экономия размера файла впечатляет:

SVG-файлы также отлично сжимаются Gzip или Brotli (стандарт на большинстве веб-серверов), уменьшаясь ещё на 50-70% при передаче. SVG размером 20 КБ может передаваться как 6-8 КБ.

Преимущества выходят за рамки размера файла. SVG можно встроить прямо в HTML, устранив дополнительный HTTP-запрос. Они отображаются в нативном разрешении устройства без атрибутов srcset или адаптивной разметки. А поскольку это текстовый формат, он удобен для кэширования и контроля версий.

Для сложных изображений — фотографий, детализированных текстур, картинок с тысячами уникальных цветов — SVG не даёт преимуществ. Фотография, «конвертированная» в SVG, либо встраивает растровые данные в base64 (увеличивая размер), либо трассируется в упрощённые фигуры (теряя детали). Для таких изображений используйте PNG, JPEG или современные форматы вроде WebP и AVIF.

SVG vs PNG: сводная таблица

Практический сценарий

Представьте, что вы редизайните корпоративный сайт. У бренда есть логотип, набор из 30 навигационных и функциональных иконок, hero-фотография и несколько скриншотов продукта. Вот как распределить форматы:

• Логотип → SVG. Он отображается в шапке (маленький), подвале (средний) и на странице «О нас» (большой). Один SVG обслуживает все три размера, остаётся чётким на Retina-дисплеях и весит около 5 КБ.
• 30 иконок → SVG-спрайт. Все 30 иконок в одном файле, примерно 40-60 КБ. Это меньше, чем весили бы две-три PNG-иконки. Цвет и размер управляются через CSS.
• Hero-фотография → Не SVG и не PNG. Используйте JPEG или WebP для минимального размера при приемлемом качестве. Читайте наше руководство по оптимизации изображений.
• Скриншоты продукта → PNG. Скриншоты содержат текст интерфейса и точный пиксельный рендеринг, требующий сохранения без потерь.

Конвертация между SVG и PNG

Конвертировать между форматами можно прямо в браузере — без загрузки на сервер, без установки программ. Vizua обрабатывает каждый файл локально на вашем устройстве:

• SVG в PNG — растеризация SVG-файлов в любом нужном разрешении
• Векторизация изображения — конвертация растровых изображений (PNG, JPEG) в SVG-формат
• Генератор фавиконов — создание файлов фавиконов из любого изображения, включая SVG для современных браузеров

Часто задаваемые вопросы