Как конвертировать SVG в PNG и обратно — 5 способов без потери качества
Скачали логотип в SVG, а маркетплейс, CRM или конструктор писем принимает только PNG? Задача на две минуты — если знать, каким инструментом решать. А вот обратная задача, PNG в SVG, устроена совсем иначе, и большинство онлайн‑конвертеров делают её плохо. Разберём оба направления.
SVG → PNG — тривиально: браузер, Figma, любой онлайн‑конвертер. Главное — сразу задать нужный размер в пикселях, потому что после конвертации PNG уже нельзя увеличивать без потерь. PNG → SVG — это не конвертация, а отрисовка заново; автоматическая трассировка годится только для простых одноцветных знаков.
SVG в PNG: 5 рабочих способов
1. Прямо в браузере — без программ
Любой браузер умеет открывать SVG. Дальше два пути:
- Откройте SVG‑файл в Chrome или Firefox (перетащите в окно).
- Правый клик → «Сохранить изображение как…» — некоторые браузеры сразу предложат PNG.
Если пункта нет, сработает скриншот нужной области — но качество будет равно размеру на экране, поэтому для крупных PNG способ не годится.
2. Figma — лучший контроль над размером
Самый предсказуемый способ для дизайнеров и не только:
- Перетащите SVG в любой файл Figma — он вставится как редактируемый вектор.
- Выделите объект → справа внизу секция Export.
- Выберите PNG и множитель (1x, 2x, 4x) или конкретную ширину.
- 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 в том размере, который нужен, или больше. SVG можно превратить в PNG любого размера бесплатно, а вот увеличить готовый PNG без мыла уже не получится. Сомневаетесь — делайте 1024 px и больше.
PNG в SVG: почему «конвертер» вас обманывает
Тут физика другая. В PNG нет никакой информации о фигурах — только пиксели. Конвертер не «переводит формат», а пытается угадать контуры по пикселям. Это называется трассировка, и у неё три исхода:
- Простой одноцветный знак (силуэт, иконка) — трассировка справится прилично. Inkscape (Path → Trace Bitmap) или vectorizer‑сервисы дадут рабочий результат.
- Логотип с градиентами, мелкими деталями, текстом — на выходе будут рваные края, потерянные детали и вес больше исходного PNG.
- Фотография — не имеет смысла вовсе.
Некоторые онлайн-«конвертеры PNG в SVG» просто заворачивают вашу растровую картинку внутрь SVG‑обёртки (<image href="...">). Формально файл стал .svg, фактически — остался тем же PNG со всеми его ограничениями. Проверить легко: откройте файл текстовым редактором; настоящий вектор состоит из <path>, <circle>, <rect>, а не из одного тега <image>.
Честное решение для сложного логотипа — отрисовка в вектор вручную. Либо поищите оригинальный SVG: у большинства известных брендов он существует, и в нашем каталоге лежат именно такие официальные векторы.
Сравнение направлений
| Задача | Сложность | Инструмент | Качество результата |
|---|---|---|---|
| SVG → PNG | 2 минуты | Figma, браузер, онлайн | идентично оригиналу |
| PNG → SVG (простой знак) | 10 минут | Inkscape Trace | приемлемо |
| PNG → SVG (сложный логотип) | часы работы | ручная отрисовка | зависит от исполнителя |
Частые вопросы
Какой размер PNG выбрать для соцсетей? Аватарки — минимум 400×400, посты и обложки — по требованиям площадки, но не меньше 1080 по длинной стороне. Проще один раз сделать 2048 px и уменьшать.
Прозрачность сохранится? Да: PNG поддерживает альфа‑канал, и все перечисленные способы фон по умолчанию оставляют прозрачным. Белый фон появляется только если экспортировать в JPG.
Можно ли конвертировать пачку файлов сразу? Онлайн‑сервисы обычно ограничивают количество, поэтому для пачек — командная строка (способ 5) или Figma: выделяете все объекты и экспортируете разом.
Почему PNG получился с обрезанными краями? У SVG есть viewBox — «окно», в котором живёт картинка. Если фигуры выходят за его пределы (так бывает после ручных правок), рендер их отрежет. Откройте SVG в Figma и проверьте, что всё содержимое лежит внутри рамки кадра.
Как конвертировать SVG с прозрачностью в PNG с фоном? Иногда нужен именно фон — например, для JPG‑превью. В Figma подложите под логотип прямоугольник нужного цвета и экспортируйте вместе. В командной строке у rsvg‑convert есть флаг -b '#FFFFFF'.
Почему из Illustrator PNG выходит с огромными полями? Экспортируется монтажная область (artboard), а не объект. Либо подгоните область под логотип (Object → Artboards → Fit to Artwork Bounds), либо используйте Export Selection.
Разбор типовых сценариев
Сценарий: аватарка для соцсети из SVG‑логотипа. Не конвертируйте логотип «как есть»: сначала в Figma соберите квадратный кадр 1024×1024, поместите в него знак с полями 15–20% и цветным фоном — и уже этот кадр экспортируйте в PNG. Прямая конвертация горизонтального логотипа даст узкую полоску, непригодную для аватарки.
Сценарий: логотип в презентацию PowerPoint. Современный PowerPoint принимает SVG напрямую (Вставка → Рисунки) — и это лучше PNG: логотип останется чётким на любом проекторе. Конвертируйте в PNG только для старых версий Office.
Сценарий: печать на футболке или кружке. Типографии сублимационной печати часто просят PNG в высоком разрешении. Считайте от физического размера: принт 30 см при 300 dpi — это ~3550 пикселей. Рендерьте с запасом — 4000 px по длинной стороне.
Сценарий: пачка иконок для сайта. Не конвертируйте вовсе — используйте SVG напрямую в вёрстке: легче, чётче и перекрашивается из CSS. Все способы вставки мы разбирали в статье как вставить SVG на сайт.
Почему онлайн‑конвертер иногда выдаёт «пустой» PNG
Частая жалоба: сервис отработал, а PNG прозрачный или чёрный. Причины по убыванию вероятности:
- Цвета в SVG заданы через CSS‑классы, а не атрибуты
fill— упрощённый рендер сервиса стили не применил. Лечится пересохранением SVG из Figma (она «запекает» стили в атрибуты). - В SVG используются внешние шрифты или картинки — конвертер без доступа к ним рендерит пустоту. Текст переводите в кривые до конвертации.
- Фильтры и маски — экзотические SVG‑эффекты поддерживаются не всеми рендерами. Проверьте файл в браузере: если и там пусто, проблема в самом файле.
Универсальное решение при капризах онлайн‑сервисов — Figma: её рендер самый предсказуемый из общедоступных.
Коротко
Из SVG в PNG — задавайте размер и жмите Export где угодно. Из PNG в SVG — не верьте кнопке «конвертировать»: либо простой знак и трассировка, либо честная отрисовка заново, либо поиск оригинального вектора.
Самый быстрый путь — не конвертировать вообще: в нашем каталоге логотипов у каждого бренда уже лежат и SVG, и PNG, причём PNG можно скачать сразу в нужном размере.