Конвертер SVG в PNG онлайн: файл или код — в PNG нужного размера

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

Перетащите SVG-файлы

До 50 файлов по 10 МБ. Файлы не покидают ваш компьютер.

или перетащите сюда · вставка Ctrl+V
Возьмите иконку из каталога

Как пользоваться

Как перевести SVG в PNG онлайн

  1. Перетащите SVG-файлы в окно конвертера, выберите их кнопкой или вставьте из буфера обмена сочетанием Ctrl+V.
  2. Укажите размер PNG в пикселях — пропорции исходника сохранятся.
  3. Выберите фон: прозрачный или сплошной цвет.
  4. Скачайте результат: один файл сохранится как PNG, несколько — одним ZIP-архивом.

Своего файла нет? В блоке «Возьмите иконку из каталога» найдите пиктограмму и отправьте её в конвертер без скачивания — например, из разделов иконок интерфейса или стрелок. А если подходит стандартный размер, готовые PNG-иконки каталога можно скачать сразу — от 16 до 512 px.

Как работает конвертер SVG в PNG

Отрисовку выполняет resvg — движок рендеринга SVG, скомпилированный в WebAssembly. Он не зависит от браузера, поэтому PNG получается одинаковым на любом компьютере. SVG — векторный формат: каждый размер рисуется заново по кривым, и картинка в 512 px выходит такой же чёткой, как в 16 px.

Ограничения:

  • до 50 файлов за один раз и до 10 МБ на каждый;
  • пакет скачивается ZIP-архивом;
  • скрипты и анимация в SVG не выполняются — в PNG попадает статичное изображение.

Файлы остаются у вас

Конвертер ничего не загружает на сервер: код разбирается и растрируется внутри вкладки, а PNG сохраняется прямо с устройства. Поэтому им спокойно пользуются для макетов под NDA и неопубликованных логотипов. Проверить это легко: откройте вкладку «Сеть» в инструментах разработчика и запустите конвертацию.

Советы и частые ошибки

  • Размер под плотность экрана. На экранах с высокой плотностью пикселей PNG в натуральную величину выглядит мыльно — берите файл вдвое-втрое больше: для иконки 32 px — 64 или 96 px.
  • Лишние поля или обрезка. Видимую область задаёт атрибут viewBox. Если рисунок прижат к краю или окружён пустотой, поправьте его в редакторе SVG-кода.
  • Текст не в кривых. Надписи переведите в контуры заранее, иначе шрифт заменится или текст пропадёт.
  • Растянутый PNG. Увеличение готового PNG размывает картинку — конвертируйте SVG сразу в нужный размер.
  • Цвет и вес. Перекрасить иконку до экспорта можно в инструменте перекраски SVG, а облегчить готовый файл — сжатием PNG.

Для значка сайта удобнее генератор favicon: он сразу соберёт ICO из нескольких размеров. Чем форматы отличаются и когда какой выбирать, рассказано в статье SVG или PNG: что выбрать.

Частые вопросы

Как перевести SVG в PNG с прозрачным фоном?
Выберите прозрачный фон в настройках: всё, что в SVG не закрашено, в PNG останется прозрачным благодаря альфа-каналу. Цветной фон нужен, только если картинку покажут там, где прозрачность не поддерживается.
Какой размер PNG выбрать?
Для сайта — размер, в котором картинка показывается, умноженный на два для чётких экранов: иконке 24 px нужен PNG 48 px. Для слайдов, документов и соцсетей обычно хватает 256–512 px.
Почему в PNG пропал текст или изменился шрифт?
Надписи в SVG рисуются шрифтом, а при конвертации в браузере шрифты вашей системы недоступны. Переведите текст в кривые в графическом редакторе — и PNG совпадёт с оригиналом.
Можно ли конвертировать несколько SVG сразу?
Да, до 50 файлов за раз, каждый до 10 МБ. Настройки размера и фона применяются ко всем, а готовые PNG скачиваются одним ZIP-архивом.
Зачем переводить SVG в PNG, если вектор лучше?
SVG хранит рисунок формулами и масштабируется без потерь, а PNG — это сетка пикселей. Зато PNG принимают везде: соцсети, мессенджеры, почтовые рассылки и программы, которые SVG не открывают.
Как сохранить SVG в PNG без потери качества?
Задайте размер PNG сразу под задачу — например 512 или 1024 px: SVG растеризуется заново в нужном разрешении, поэтому края остаются чёткими. Не масштабируйте готовый PNG повторно: каждое изменение размера растра добавляет размытие.

Иконки для работы

Другие инструменты