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

Последнее обновление: June 28, 2026

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

Быстрый ответ: следует ли конвертировать SVG в PNG?

Используйте SVG как источник и экспортируйте PNG только в том случае, если целевая система не может использовать векторные данные. Почтовые клиенты, старые поля изображений в CMS, некоторые рекламные платформы и несколько печатных конвейеров требуют плоский растровый файл. Для веб-иконки, фавикона или чего-либо масштабируемого оставайтесь в формате SVG. При конвертации рендерите PNG с шириной в 2x от максимальной ширины отображения, чтобы он оставался четким на экранах высокого DPI, сохраните альфа-канал для прозрачности и заархивируйте оригинальный .svg вместе с экспортом.

Что на самом деле отличает SVG от PNG?

SVG — это текстовый файл, полный элементов <path>, <rect> и <circle>. Браузер или рендерер рисует эти фигуры при любом запрошенном разрешении, поэтому значок 16px и героический баннер 1600px поступают из одного источника без потери качества. Спецификация SVG2 определяет эту модель, включая viewBox, который задает координатное пространство.

PNG — это растровый контейнер. Он хранит точную пиксельную сетку плюс необязательный альфа-канал для прозрачности и поддерживает сжатие без потерь. Справочник по формату PNG на libpng.org подробно описывает структуру чанков (chunk structure). PNG никогда не "знает", что он пришел из векторного файла; он знает только свою собственную ширину и высоту.

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

Как на самом деле работает растеризация?

Растеризация — это этап, на котором векторная математика превращается в пиксели. Рендерер считывает SVG, определяет, какие пиксели попадают внутрь каждой фигуры, и записывает для каждого из них значение цвета. Числом, которым вы управляете, являются выходная ширина и высота в px.

Это одно число решает всё. Отрендерите один и тот же SVG при 128px, и он будет выглядеть четким в размере фавикона и мутным на мониторе 4K. Отрендерите его при 2048px, и он будет выглядеть резвым везде, но файл будет тяжелее. У SVG нет «разрешения», которое можно потерять; вы просто выбираете, сколько пикселей в него запечь.

Я преобразовал одну иконку в три ширины для проверки этого: экспорт 64px весил 4 KB и выглядел чисто на панели инструментов, экспорт 512px весил 24 KB и выглядел правильно при 2x, а экспорт 2048px весил 142 KB и был неотличим от вектора на весь экран. Исходный SVG был стабильно 1.2 KB. Вывод заключается в том, что вы настраиваете не сам SVG, а размер PNG.

Антиалисинг — это другая часть работы. Там, где диагональный или изогнутый край встречается с пиксельной сеткой, рендерер смешивает цвет края с фоном, чтобы линия не выглядела зубчатой. Вот почему обводка в 1px может выглядеть размытой, если вы рендерите слишком маленьким размером, и почему важны прозрачные фоны: антиалисинг смешивается с тем, что находится за фигурой.

Когда лучше сохранить SVG?

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

• Web иконки и UI символы, где один и тот же актив отображается при 16px и 48px.
• Логотипы в заголовке сайта, которые изменяют размер вместе с областью просмотра (viewport).
• Диаграммы и графики, текст которых должен оставаться четким при увеличении.
• Любое место, где вы можете отредактировать работу позже.

Современные браузеры обрабатывают SVG встроенным образом (inline), как источник <img> и как CSS-фон без проблем. [image type reference] от MDN подтверждает широкую поддержку SVG в текущих движках. Если ваша единственная причина конвертации — "PNG кажется безопаснее", то, скорее всего, вы просто добавляете вес файла без необходимости.

Когда вам на самом деле нужен PNG?

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

• HTML-email, где большинство клиентов полностью удаляют или блокируют SVG.
• Поля устаревших CMS или сторонние виджеты, которые принимают только растровые загрузки.
• Конвейеры для печати или PDF, которые ожидают плоское изображение с известным DPI.
• Обмен на платформы, которые перекодируют загрузки и могут исказить SVG.
• Наборы favicon, которые по-прежнему ожидают запасных вариантов PNG вместе с любым SVG.

Для favicon в частности, руководство по конвертации иконок favicon icon converter guide показывает многоразмерный экспорт, который вам обычно нужен.

Как преобразовать SVG в PNG через командную строку?

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

rsvg-convert (librsvg) — это самый предсказуемый рендерер, который я использовал. Он уважает viewBox, корректно обрабатывает шрифты и по умолчанию сохраняет прозрачность.

## Установка librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## Экспорт с разрешением 2x от ширины дисплея, прозрачный фон
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

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

## Прозрачный фон, фиксированный размер
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) — это то, что я использую в скриптах сборки. Он быстрый, хорошо работает со стримингом и подходит для конвейера дизайн-системы.

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

Параметр density важен в sharp: он устанавливает внутренний DPI, используемый перед изменением размера, и более высокое значение предотвращает исчезновение тонких штрихов при экспорте в малом размере.

Как сохранить прозрачность при конвертации?

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

Проверьте две вещи. Во-первых, убедитесь, что в SVG нет тега <rect>, заполняющего весь холст фона. Во-вторых, явно укажите рендереру не рисовать его:

• С помощью rsvg опустите любой флаг фона, и он останется прозрачным.
• С помощью ImageMagick передайте -background none перед вводом.
• С помощью sharp не вызывайте .flatten() и не устанавливайте .background().
• С помощью cairosvg установите цвет фона в none.

Если художественному произведению позже понадобится фон, композитируйте его на втором этапе, а не "запекайте" в экспорт. В руководстве transparent images guide подробно описаны детали альфа-канала для PNG и WebP, а лучшие практики удаления фона background removal best practices помогут, если ваш исходный материал — это фотография, а не чистый вектор.

Что должно быть за размером и цветовым режимом для PNG?

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

Для цветового режима используйте 8-битный RGB для работы на экране. PNG также поддерживает индексированный (палитровый) режим и 16 бит на канал, но 8-битный RGB подходит для логотипов, иконок и UI art с наименьшим разумным размером файла. Если позже вам потребуется меньший веб-ресурс, рабочий процесс compress images without losing quality применяется после экспорта, а контейнеры можно сравнить в JPG, PNG, and WebP comparison.

Что происходит, когда вы растеризуете слишком маленькое изображение?

Классическая ошибка — это экспорт в 1x с последующим увеличением PNG через CSS. Поскольку пиксели уже фиксированы, браузер придумывает недостающие пиксели, и края становятся мягкими. Вы не можете вернуть эту четкость из PNG; вам нужно перерисовать изображение из SVG.

Обратите внимание на следующие проблемы:

• Тонкие линии исчезают, когда ширина вывода близка к толщине обводки.
• Мелкий текст превращается в кашу при размере ниже примерно 16px эквивалента.
• Тонкие детали диффузируются в шум на градиентах с низким контрастом.
• Закругленные углы обрезаются неравномерно без anti-aliasing.
• Смещения на полпикселя создают размытые границы в 1px.

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

Как пакетно конвертировать папку SVG?

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

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

В Node библиотека sharp обрабатывает каталог с помощью Promise.all и достаточно быстра для нескольких сотен иконок. Сохраняйте один размер за один прогон и создавайте дополнительные размеры в отдельных проходах, чтобы один неудачный файл не прерывал всю партию.

Можно ли вернуться от PNG к SVG?

Нет никакого честного способа. PNG — это готовая пиксельная сетка. Восстановление его в векторные пути возможно с помощью инструментов автотрассировки, но результат всегда является аппроксимацией: кривые получают дополнительные точки привязки (anchor points), текст превращается в контуры, а мелкие детали угадываются. Он никогда не совпадет с оригинальным векторным источником.

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

Финальный контрольный список перед экспортом

• Оригинальный .svg заархивирован и не перезаписан.
• Ширина экспорта составляет как минимум 2x от максимальной ширины отображения.
• Соотношение сторон соответствует viewBox в SVG.
• Фон прозрачный, если вы не делали его намеренно плоским (flattened).
• Края сглажены (anti-aliased), и тонкие штрихи все еще видны.
• Файл сжимается после экспорта, если он будет использоваться в вебе.

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

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

Когда мне конвертировать SVG в PNG?

Когда целевая платформа не поддерживает SVG (некоторые почтовые клиенты, старое ПО), когда вам нужен растр фиксированного размера или когда SVG отображается непоследовательно. Для веба подавайте SVG напрямую там, где это поддерживается — он масштабируется без потери четкости.

Как выбрать разрешение для PNG?

Соответствуйте размеру дисплея при 1x или 2x (для Retina). Поскольку SVG не зависит от разрешения, вы растрируете его в любом пиксельном размере, который вам нужен — для четкости на экранах с высоким DPI рендерите в 2x от размера дисплея.

Потеряет ли качество при конвертации SVG в PNG?

Нет — вы растрируете вектор в целевом разрешении, поэтому PNG будет таким же четким, как и размер, который вы рендерите. Потеря качества возникнет только из-за рендеринга при слишком низком разрешении. Для Retina рендерите в 2x.

Что такое преобразование через командную строку?

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png. Параметр -density контролирует разрешение рендеринга. rsvg-convert или headless browser — альтернативы для сложных SVG. См. руководство по конвертерам.

Могу ли я редактировать SVG после преобразования в PNG?

Нет — после растрирования в PNG векторные фигуры становятся пикселями и теряют свою возможность редактирования. Отредактируйте SVG (это XML на основе текста) и повторно растрируйте. Сохраняйте SVG как редактируемый источник; PNG — это фиксированный вывод.

Могу ли я редактировать SVG?

Да — SVG представляет собой XML на основе текста, поэтому вы можете редактировать его в любом текстовом редакторе или векторном редакторе (Illustrator, Inkscape, Figma). Это главное преимущество перед PNG: SVG остается редактируемым и независимым от разрешения. Отредактируйте SVG и повторно растрируйте до PNG всякий раз, когда вам нужен фиксированный растровый вывод.

Изображения в качестве референса

• Абстрактное геометрическое векторное искусство в синем и зеленом цветах — фото от Steve A Johnson на Pexels
• Набор ноутбука и графического планшета на красочном дизайнерском столе — фото от Alex Andrews на Pexels
• Ноутбук на деревянном столе в чистом рабочем пространстве для работы по дизайну логотипов — фото от Tom Swinnen на Pexels
• Крупный план рук, рисующих на планшете стилусом — фото от Berna на Pexels

Открыть соответствующий инструмент Imagic AI