SVG в PNG: когда и как конвертировать векторную графику

SVG (Scalable Vector Graphics) описывает изображение как фигуры и контуры в XML, а не как пиксели, поэтому масштабируется до любого размера без потери чёткости. Это делает его идеальным для логотипов и иконок — но многие инструменты до сих пор не умеют его отображать.

Зачем конвертировать SVG в PNG?

  • Совместимость. Почтовые клиенты, старые программы просмотра изображений, формы загрузки в соцсетях и некоторые CMS принимают только растровые форматы — PNG или JPG.
  • Редактирование в растровых программах. Фоторедакторы и простые приложения для изображений работают с пикселями, а не с векторными контурами.
  • Предсказуемый рендер. PNG выглядит одинаково везде; SVG может отображаться немного по-разному в зависимости от движка SVG в браузере или приложении.

Теряется ли качество?

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

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

  1. Откройте конвертер SVG в PNG.
  2. Выберите файл .svg или перетащите его на страницу.
  3. Нажмите «Конвертировать» и скачайте PNG — прозрачность из SVG сохраняется.

SVG в PNG, SVG в ICO или SVG в WebP

PNG — безопасный универсальный вариант по умолчанию. Если изображение — это favicon сайта, используйте сразу SVG в ICO — векторный источник даёт максимально чёткую иконку. Если PNG нужен для сайта и важен размер файла, SVG в WebP даёт меньший файл с той же поддержкой прозрачности.

Рекламный блок — включите рекламу в public/ads.js · article-mid

В каком разрешении экспортировать?

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

Фон: прозрачный или сплошной?

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

Что делать со шрифтами в тексте SVG

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