Чем отличается SVG от PNG и что выбрать для иконок

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

Как устроены форматы

SVG — это текст в разметке XML. Вот линейная иконка домика целиком:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="1.5"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-5.5h-5V20H5a1 1 0 0 1-1-1z"/>
</svg>

Атрибут viewBox задаёт координатную сетку 24×24, path описывает контур, а stroke="currentColor" просит рисовать линию цветом текста. Браузер строит эту геометрию заново под каждый размер, поэтому в 16 и в 512 px иконка одинаково аккуратна.

PNG хранит цвет и прозрачность каждого пикселя. Картинку 64×64 можно уменьшить до 32 px почти без потерь, но растянутая до 128 px она станет размытой, а на наклонных линиях появится «лесенка». Поэтому растровую иконку берут сразу в нужном размере, а для экранов высокой плотности — вдвое крупнее.

Сравнение по главным параметрам

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

• Интерфейс сайта или приложения. Одна иконка работает и в кнопке 16 px, и на баннере 96 px, без отдельных файлов под каждый размер.
• Смена цвета. Наведение, активное состояние, тёмная тема — всё решается через currentColor и CSS, как описано в статье о том, как изменить цвет SVG.
• Макеты и презентации. Figma, PowerPoint и Keynote вставляют SVG как вектор и позволяют перекрасить его на месте.
• Печать. Вектор не пикселизуется при любом размере отпечатка.

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

Когда нужен PNG

• Письма. Многие почтовые клиенты, в том числе Gmail, не показывают SVG, поэтому в рассылках используют иконки в PNG.
• Соцсети, мессенджеры, маркетплейсы, конструкторы сайтов. Многие из них принимают только растровые изображения.
• Google Slides и старые офисные программы, которые не умеют вставлять вектор. Как работать с ними, мы разбирали в статье об иконках в презентациях.
• 3D и фотореалистичные изображения. Объём, блики и мягкие тени передаются пикселями; в векторе такие картинки получаются огромными или не получаются вовсе. Поэтому объёмные иконки в стиле 3D распространяются только в растровых форматах.
• Сайты на CMS, где загрузка SVG закрыта по соображениям безопасности. SVG может содержать скрипты, поэтому чужие файлы без проверки загружать не стоит.

Как перевести SVG в PNG без потери качества

1. Определите, в каком размере иконка будет показана, например 48 px.
2. Умножьте его на 2 или 3 для экранов высокой плотности — получится 96 или 144 px.
3. Сконвертируйте файл в PNG онлайн, выбрав размер и фон: прозрачный или сплошной.
4. Не растягивайте готовый PNG. Если понадобился размер крупнее, экспортируйте его заново из SVG.

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

А как же WebP и ICO

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

Итог

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