SVG vs PNG — что выбрать для веб-графики

Введение

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

SVG (Scalable Vector Graphics) — это векторный формат, описывающий изображение через математические формулы: линии, кривые, заливки, трансформации. PNG (Portable Network Graphics) — растровый формат, хранящий сетку пикселей с цветовыми значениями. Разница в подходе определяет всё: размер файла, поведение при масштабировании, возможности анимации, простоту редактирования.

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

Что такое SVG

SVG — это формат векторной графики, основанный на XML. Изображение описывается текстом в виде набора элементов: <path> для кривых, <rect> для прямоугольников, <circle> для окружностей и так далее. Каждый элемент имеет атрибуты — координаты, размеры, цвета, трансформации.

Главные особенности SVG

• Масштабируемость без потерь. SVG остаётся чётким при любом увеличении — от иконки 16×16 до билборда 16×16 метров.
• Текстовая природа. SVG-файл — это XML-документ, который можно открыть в любом текстовом редакторе и редактировать вручную.
• Малый размер для простой графики. Иконка в SVG может весить 500 байт, а в PNG-32 — 5 КБ.
• Поддержка CSS и JavaScript. Стилями и скриптами можно управлять отдельными элементами SVG, анимировать их, реагировать на события.
• Доступность. SVG поддерживает <title> и <desc> для скринридеров, что делает графику доступной для людей с нарушениями зрения.

Где SVG проигрывает

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

Что такое PNG

PNG — растровый формат, хранящий изображение как сетку пикселей. Каждый пиксель имеет цветовые значения (RGB) и опционально прозрачность (альфа-канал). PNG использует сжатие без потерь, что гарантирует точное восстановление каждого пикселя при открытии.

Сильные стороны PNG для веба

• Идеально для графики с текстом. Резкие края букв остаются чёткими, без артефактов сжатия.
• Полноценная прозрачность. 8-битный альфа-канал позволяет делать мягкие края и полупрозрачные элементы.
• Универсальная поддержка. PNG открывается везде — во всех браузерах, программах, операционных системах.
• Подходит для скриншотов. Текст и тонкие линии остаются резкими, файлы сжимаются эффективно.

Слабые стороны PNG

Главный недостаток PNG — размер файла. Для полноцветных фотографий PNG-24 может весить в 5–10 раз больше JPG при идентичном визуальном качестве. Для графики большого размера PNG-32 (с прозрачностью) тоже тяжелеет: фотография 1920×1080 с вырезанным фоном может весить 3–5 МБ. Кроме того, PNG — фиксированное разрешение: при увеличении картинка «мылится», при уменьшении — теряет детали.

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

Когда выбирать SVG

SVG — выбор по умолчанию для всех элементов интерфейса, которые можно описать векторно. Конкретные сценарии:

• Логотипы и фирменные знаки. Один файл работает и в шапке сайта (200×60), и на фавиконе (32×32), и на флаге (3×2 метра) — без потери качества.
• Иконки интерфейса. Иконки меню, кнопок, социальных сетей — всё это идеально ложится в SVG.
• Декоративные элементы. Орнаменты, разделители, узоры, геометрические фигуры.
• Инфографика и диаграммы. Графики, схемы, иллюстрации процессов — в SVG они масштабируются без потерь и легко анимируются.
• Карты и планы. Интерактивные карты местности, планы помещений, схемы проезда.
• Анимированные иллюстрации. SVG-анимации легко создаются и не требуют JavaScript.

Когда выбирать PNG

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

• Скриншоты программ и веб-страниц. Текст должен оставаться чётким, а JPG даст ореолы вокруг букв.
• Сложные иллюстрации без векторного исходника. Если у вас только растр — PNG лучше JPG.
• Изображения с прозрачностью. Вырезанные товары для каталога, декоративные элементы.
• Old UI и legacy-системы. Если CMS или платформа не поддерживает SVG.
• Email-рассылки. Многие почтовые клиенты не показывают SVG.

Производительность: что быстрее

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

Практическое правило: до 100 элементов в SVG — рендеринг мгновенный. Свыше 1000 — возможны подтормаживания, особенно на мобильных. Если SVG начал тормозить, разбейте его на части или конвертируйте в PNG.

Доступность и SEO

SVG изначально доступнее: можно добавить <title>, <desc>, role="img" и aria-label прямо в разметку. PNG же требует отдельного alt-текста в HTML.

С точки зрения SEO, поисковики индексируют оба формата, но SVG имеет дополнительный бонус: текст внутри SVG (например, надписи на логотипе) индексируется как часть страницы. Это может незначительно улучшить релевантность по ключевым словам. Также SVG лучше подходит для микроразметки и structured data, где иконки должны быть чёткими на любом масштабе.

Как конвертировать между форматами

SVG в PNG

При конвертации SVG в PNG выбирайте разрешение в 2 раза больше целевого для retina-экранов. Например, для иконки 64×64 генерируйте PNG 128×128. Используйте инструмент SVG в PNG — он работает в браузере и поддерживает выбор масштаба.

PNG в SVG

Конвертация PNG в SVG (векторизация) — нетривиальная задача. Простую графику с чёткими контурами можно оттрассировать автоматически в Inkscape или Adobe Illustrator. Фотографии и сложные иллюстрации векторизовать бесполезно — результат будет или огромным, или искажённым. В таких случаях оставайтесь на PNG или переходите на JPG/WebP.

Гибридный подход: что выбирают профессионалы

На практике большинство современных сайтов использует гибридный подход: SVG для всего, что можно описать векторно, и PNG/WebP/AVIF для остального. Конкретные рекомендации:

• Логотип — SVG с PNG-фолбэком для очень старых браузеров.
• Иконки — SVG, встроенный прямо в HTML (inline SVG) для возможности управления через CSS.
• Скриншоты в статье — PNG или WebP.
• Фотографии — JPG, WebP или AVIF.
• Иллюстрации с прозрачностью — PNG-32 или WebP с альфа-каналом.

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

Типичные ошибки

• Использование PNG для иконок. Иконка в PNG-32 весит в 10 раз больше, чем в SVG, и «мылится» на retina.
• Встраивание SVG через <img>. Это блокирует управление стилями через CSS. Лучше inline-SVG или CSS background.
• Сохранение фото в SVG. Файл раздуется до десятков мегабайт, а качество будет хуже, чем у JPG.
• Игнорирование gzip для SVG. SVG — это XML, который отлично сжимается gzip. Без сжатия на сервере файлы тяжелее в 5–10 раз.
• Не оптимизированный SVG. Редакторы типа Illustrator оставляют много лишнего: метаданные, пустые группы, лишние точки. Прогоняйте через SVGO перед публикацией.

Заключение

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

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

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