Конвертер SVG в PNG: Растеризация векторной графики любого размера

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

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

Быстрый ответ: как преобразовать SVG в PNG?

Откройте SVG в конвертере или графическом редакторе, установите целевые размеры в пикселях (с учетом Retina, если это необходимо — экспортируйте в размере 2x от размера дисплея) и экспортируйте как PNG. Выберите размер, достаточный для всех мест, где будет использоваться PNG, потому что позже вы не сможете увеличить PNG без потери качества. Используйте SVG to PNG converter для быстрой однократной экспорта или графический редактор для пакетной обработки. Сохраните исходный SVG, потому что он остается масштабируемым источником, если вам когда-нибудь понадобится другой размер.

В чем разница между SVG и PNG?

Различие между векторным и растровым форматами объясняет всё о том, почему и когда нужно конвертировать.

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

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

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

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

Для веб-сайтов обычно предпочтительнее SVG, потому что он остается четким на экранах Retina и имеет малый размер. В руководстве по дисплеям Retina объясняется, почему векторная графика полностью устраняет проблему разрешения для логотипов и иконок.

Как выбрать правильное разрешение?

Решение о разрешении является постоянным, поэтому оно важно. Экспортируйте PNG в максимально возможном размере отображения, умноженном на коэффициент пикселей устройства для достижения резкости Retina.

• Если PNG будет использоваться в нескольких размерах, экспортируйте его в самом большом и позвольте CSS масштабировать его вниз.
• Для резкости Retina экспортируйте размеры отображения в 2x (или 3x для телефонов).
• Экспорт слишком маленьким — это распространенная и неисправимая ошибка.

Математика проста: определите максимальную ширину отображения, удвойте ее для Retina и экспортируйте в этой пиксельной ширине. В руководство по дисплеям Retina подробно описан рабочий процесс 2x и 3x.

Как преобразовать SVG в PNG?

Существует несколько методов, выбор которых зависит от объема работы и требуемого уровня контроля.

1. Онлайн-конвертер — загрузите SVG, установите размеры и скачайте PNG. Быстро для разовых задач.
2. Дизайн-инструмент (Figma, Illustrator, Inkscape) — откройте SVG и экспортируйте в выбранном размере. Максимальный контроль.
3. Командная строка (rsvg-convert, ImageMagick) — можно использовать для пакетной обработки через скрипты.
4. Браузер — откройте SVG и сделайте скриншот в нужном размере.

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

Пакетное преобразование наборов иконок

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

1. Организуйте SVG в одну папку с последовательным названием.
2. Определите размеры экспорта (например, 16, 32, 64 для набора иконок).
3. Запустите пакетный растризатор, который экспортирует каждый SVG в каждом размере.
4. Проверьте несколько результатов на четкость и прозрачность.

Преимущество пакетной растризации — это единообразие: каждая иконка экспортируется с абсолютно одинаковыми настройками, поэтому набор выглядит однородным. В руководстве по пакетной обработке (batch processing guide) (/blog/batch-image-processing) описан более широкий рабочий процесс применения операций ко всем папкам изображений, а после растризации PNG можно сжать вместе, чтобы минимизировать их размер при подаче.

Распространенные ошибки конвертации

• Экспорт слишком маленького размера — PNG нельзя увеличить позже. Экспортируйте в размере 2x от размера отображения.
• Потеря исходного SVG — всегда сохраняйте его; это масштабируемый источник для будущих размеров.
• Конвертация, когда можно использовать SVG — многие современные среды поддерживают SVG напрямую.
• Забывание о прозрачности — PNG поддерживает альфа-канал; убедитесь, что экспорт сохраняет его при необходимости.
• Смешивание векторов и растра — если исходник содержит встроенные фотографии, результат будет гибридом, который теряет преимущества SVG.

Когда лучше оставить SVG

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

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

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

В чем разница между SVG и PNG?

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

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

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

Как выбрать правильное разрешение?

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

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

Да — ImageMagick (magick mogrify), rsvg-convert или безголовый браузер могут обрабатывать папки с SVG. Для наборов иконок скрипт рендерит каждый SVG во всех необходимых вам размерах за один проход. См. руководство SVG to PNG.

Поддерживает ли SVG прозрачность?

Да — SVG является векторным и нативно поддерживает прозрачность, поэтому SVG с прозрачными областями растрируется в прозрачный PNG. Это одна из причин, по которой SVG подходит для логотипов и иконок. JPEG не сохранит прозрачность.

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

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

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

Да — поскольку SVG является векторным и не зависит от разрешения, вы растрируете его в любом необходимом вам размере пикселей: от иконки 16px до баннера 4000px, без потери качества. Это главное преимущество перед растровыми форматами. Рендерите в 2x от размера дисплея для четкости на экранах Retina. Сам SVG никогда не теряет четкость; фиксированным остается только растрированный PNG.