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

Скачали логотип в SVG, а маркетплейс, CRM или конструктор писем принимает только PNG. Задача выглядит симметричной: есть кнопка «конвертировать» туда, есть и обратно. На деле два направления устроены совершенно по‑разному. SVG в PNG превращается за две минуты в любом инструменте, и ошибиться там можно ровно в одном месте. А PNG в SVG автоматика перевести не может в принципе: кнопка, которая обещает обратное, вас обманывает. Разберём оба направления и причину этой асимметрии.

Почему SVG в PNG превращается легко

Причина в том, что хранит каждый формат. SVG держит инструкцию: «провести кривую отсюда сюда, залить цветом #21A038». Чтобы получить PNG, программа просто выполняет эту инструкцию и записывает результат в пиксели. Описание полное, гадать не о чем, поэтому справится любой рендер, от браузера до консольной утилиты.

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

Пять способов получить PNG

1. Прямо в браузере — когда PNG нужен на один раз

Любой браузер открывает SVG и умеет его сохранить. Перетащите файл в окно Chrome или Firefox, затем правый клик → «Сохранить изображение как…»: часть браузеров сразу предложит PNG.

Способ выигрывает скоростью, но размером тут управляет масштаб на экране. Для крупных PNG он не подходит: переходите к следующему.

2. Figma — самый предсказуемый контроль размера

Здесь размер задаётся явно, поэтому способ подходит и дизайнерам, и всем остальным:

1. Перетащите SVG в любой файл Figma — он вставится редактируемым вектором.
2. Выделите объект → справа внизу секция Export.
3. Выберите PNG и множитель (1x, 2x, 4x) или конкретную ширину в пикселях.
4. Export — готово.

Бонусом перед экспортом можно перекрасить логотип или подложить фон, о чём ниже будет отдельный сценарий.

3. Онлайн‑конвертеры — быстро, с двумя оговорками

Convertio, CloudConvert, svgtopng и десятки аналогов работают по схеме «загрузили файл — скачали PNG». Оговорок ровно две, и обе следуют из сказанного выше.

Первая — размер. Многие сервисы рендерят SVG в его «номинальном» размере (например, 48×48), и вы получаете крошечную картинку; настройку размера ищите до конвертации. Вторая касается приватности: файл уезжает на чужой сервер, поэтому конфиденциальные макеты через случайные сервисы гонять не стоит.

4. Photoshop и Illustrator — если они уже открыты

Photoshop: File → Open, при открытии SVG задайте размер в пикселях с запасом, дальше File → Export → PNG. Illustrator: File → Export → Export As → PNG, разрешение выбирается там же. Логика та же самая: размер задают до растеризации, потому что после неё менять его поздно.

5. Командная строка — когда файлов много

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

# librsvg (macOS: brew install librsvg)
rsvg-convert -w 1024 logo.svg -o logo.png

# Inkscape
inkscape logo.svg --export-type=png --export-width=1024

Обратите внимание на флаг ширины (-w 1024): он и определяет итоговое качество. Тот же самый выбор размера, только записанный явно.

Почему обратный путь так не работает

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

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

• Простой одноцветный знак (силуэт, иконка) — трассировка справится прилично. Inkscape (Path → Trace Bitmap) или vectorizer‑сервисы дадут рабочий результат.
• Логотип с градиентами, мелкими деталями и текстом — получите рваные края, потерянные детали и файл тяжелее исходного PNG.
• Фотография — результат бессмыслен при любых настройках.

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

Из‑за того что честная трассировка трудна, часть сервисов её имитирует.

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

Сравнение направлений

Задача	Сложность	Инструмент	Качество результата
SVG → PNG	2 минуты	Figma, браузер, онлайн	идентично оригиналу
PNG → SVG (простой знак)	10 минут	Inkscape Trace	приемлемо
PNG → SVG (сложный логотип)	часы работы	ручная отрисовка	зависит от исполнителя

Типовые сценарии

Правило «сначала размер» на практике почти всегда означает «сначала кадр». Заметнее всего это в четырёх ситуациях.

Аватарка для соцсети. Прямая конвертация горизонтального логотипа даст узкую полоску, непригодную для круглой аватарки. Соберите в Figma квадратный кадр 1024×1024, поместите знак с полями 15‑20% и цветным фоном и экспортируйте уже этот кадр.

Логотип в презентацию PowerPoint. Современный PowerPoint принимает SVG напрямую (Вставка → Рисунки), и вектор здесь выигрывает: логотип останется чётким на любом проекторе. PNG понадобится только для версий Office старше 2016 года.

Печать на футболке или кружке. Типографии просят PNG высокого разрешения и считают размер от физического: принт 30 см при 300 dpi — это около 3550 пикселей. Рендерьте с запасом, 4000 px по длинной стороне.

Пачка иконок для сайта. Здесь конвертация вообще лишняя: SVG в вёрстке легче, чётче и перекрашивается из CSS. Способы вставки разбирали в статье как вставить SVG на сайт.

Почему конвертер выдаёт пустой PNG

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

1. Цвета заданы через CSS‑классы, а атрибуты fill при этом пусты — упрощённый рендер сервиса стили пропустил. Лечится пересохранением SVG из Figma: она запекает стили в атрибуты фигур.
2. В файле используются внешние шрифты или картинки — без доступа к ним конвертер рисует пустоту. Переводите текст в кривые до конвертации.
3. Фильтры и маски — экзотические эффекты поддерживаются не всеми рендерами. Откройте файл в браузере: если пусто и там, проблема в самом файле.

Универсальное решение при капризах онлайн‑сервисов — Figma: её рендер самый предсказуемый из общедоступных.

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

Какой размер PNG выбрать для соцсетей? Аватарки — минимум 400×400, посты и обложки — по требованиям площадки, но не меньше 1080 по длинной стороне. Проще один раз сделать 2048 px и уменьшать.

Прозрачность сохранится? Да: PNG поддерживает альфа‑канал, и все перечисленные способы оставляют фон прозрачным по умолчанию. Белый фон появится только при экспорте в JPG.

Можно ли конвертировать пачку файлов сразу? Онлайн‑сервисы обычно ограничивают количество, поэтому для пачек берите командную строку (способ 5) или Figma: выделяете все объекты и экспортируете разом.

Что выбрать для email‑рассылки? Только PNG: почтовые клиенты вектор почти не поддерживают, Gmail и Outlook игнорируют SVG молча, оставляя пустое место. Рендерьте в двойном размере от того, сколько картинка занимает на экране.

Почему у PNG обрезаны края? У SVG есть viewBox — рамка, в которой живёт картинка. Фигуры, вышедшие за её пределы после ручных правок, рендер отрежет. Откройте файл в Figma и проверьте, что всё содержимое лежит внутри кадра.

Как получить PNG с фоном вместо прозрачности? В Figma подложите под логотип прямоугольник нужного цвета и экспортируйте вместе. В командной строке у rsvg-convert для этого есть флаг -b '#FFFFFF'.

Почему из Illustrator PNG выходит с огромными полями? Экспортируется монтажная область (artboard) целиком. Подгоните её под логотип (Object → Artboards → Fit to Artwork Bounds) или используйте Export Selection.

Что в итоге

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

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