Как конвертировать SVG в PNG (и когда это нужно)

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

SVG против PNG за одну минуту

SVG — векторный формат: набор инструкций для рисования (пути и фигуры), который отображается чётко в любом размере — от 16px до 16 000px, и остаётся небольшим файлом для логотипов, иконок и геометрической графики. Его можно редактировать в текстовом редакторе, и он даже поддерживает анимацию.

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

Главная ошибка: конвертация SVG в PNG не «теряет» качество в момент экспорта. Пиксели генерируются на основе векторной математики, поэтому экспорт правильного размера будет идеально точным. Реальная цена в том, что PNG навсегда привязывается к одному разрешению.

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

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

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

• Социальные сети. Instagram, X/Twitter, Facebook и LinkedIn не принимают загрузку файлов SVG. Конвертируйте в PNG или JPG перед публикацией.
• Электронная почта. Большинство почтовых клиентов имеют ограниченную поддержку SVG или не поддерживают её вовсе. Используйте PNG для изображений в рассылках и подписей электронной почты.
• Favicon и иконки приложений. Современные браузеры принимают SVG-фавиконки, но Apple touch-иконки и старые браузеры всё ещё требуют версии в формате PNG. Наш гайд о том, как создать favicon из логотипа подробно разбирает этот процесс.
• Полиграфия и печать. Многие сервисы печати фототоваров (наклейки, визитки, мерч) принимают PNG, но не SVG.
• Устаревшее ПО и некоторые CMS. Старые инструменты и рабочие процессы с документами могут неправильно отображать SVG или не показывать его вообще; PNG здесь — безопасный вариант. Некоторые версии Office и устаревшие рабочие процессы обрабатывают SVG нестабильно.

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

Источник данных о поддержке платформ выше: ConverterUp.

Как конвертировать SVG в PNG в Tool Cloud (пошагово)

1. Откройте страницу конвертера SVG в PNG.
2. Загрузите свой SVG. Вы можете загрузить несколько файлов одновременно, если конвертируете набор.
3. Конвертируйте и скачайте PNG. Чтобы получить точный размер в пикселях, установите поля ширины и высоты (или используйте опцию разрешения, которая варьируется от 72 до 1200) перед конвертацией; также есть переключатель сохранения пропорций. Загруженные файлы автоматически удаляются после обработки.

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

Конвертация SVG в PNG без онлайн-инструментов

Для этого не нужен онлайн-конвертер. Любой графический инструмент экспортирует PNG напрямую:

• Figma, Illustrator, Affinity, Inkscape: используйте диалог экспорта, выберите PNG и задайте размер экспорта в пикселях (здесь применяется коэффициент масштабирования ниже). Это лучший вариант, если у вас есть исходный файл, так как вы можете преобразовать текст в контуры и удалить ненужные фоновые прямоугольники за один проход.
• С веб-сайта: нажмите правой кнопкой мыши на SVG (или на сам файл SVG, открытый во вкладке браузера) и выберите «Сохранить изображение как…» — обычно вы получите именно SVG, поэтому экспортируйте или конвертируйте его оттуда.
• Крайняя мера, если совсем нет инструментов: откройте SVG в браузере, увеличьте масштаб настолько, насколько сохраняется чёткость, и сделайте скриншот. Вы потеряете прозрачность, если не используете инструмент захвата, который её поддерживает, а края будут не такими чистыми, как при реальном экспорте. Подходит для быстрого макета, но не для продакшена.

Какой пиксельный размер выбрать для экспорта? (Гайд по коэффициенту масштабирования)

Выберите размер экспорта, умножив размеры viewport вашего SVG на коэффициент масштабирования: SVG с viewport 200×200, экспортированный с коэффициентом 1x, даст PNG размером 200×200px; с 2x — 400×400px; с 3x — 600×600px. В конвертере эта математика сводится к тому, что вы просто вводите ширину и высоту. Затем сопоставьте коэффициент с целью использования:

Для повседневных веб-иконок и логотипов оптимум на практике — 2x: один файл в масштабе 2x покрывает как стандартные, так и ретина-экраны, поскольку он плавно уменьшается на обычных дисплеях. Если спецификация требует строго одного фиксированного размера, ответом будет 1x соответствующей области просмотра. Для печати выбирайте 3x–4x; этого достаточно пикселей для небольших печатных изделий, таких как наклейки или визитки, тогда как крупная печать требует пропорционально большего размера.

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

Сохранение прозрачности (и когда использовать белый фон)

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

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

Когда стоит заполнить фон вместо прозрачности: некоторые платформы и устаревшие инструменты плохо работают с прозрачностью. Для таких загрузок сплошной фон (обычно белый) — более безопасный выбор.

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

Ловушки, которые ломают экспорт SVG

Большинство конвертаций SVG в PNG проходят без проблем. Неудачи обычно сводятся к одному из трёх случаев:

• Шрифты. Текст в SVG отображается с помощью шрифтов, доступных машине рендеринга, согласно спецификации SVG 1.1. Если растровый процессор не имеет вашего шрифта, вы получите замену текста или сломанную верстку. Исправление простое: преобразуйте текст в кривые/контурные формы в вашем графическом редакторе перед экспортом SVG. Это самая распространенная причина вопроса «почему мой логотип выглядит неправильно в PNG?».
• Обрезка. Некоторые конвертеры обрезают вывод в соответствии с объявленным viewport (областью просмотра) SVG, а содержимое SVG может выходить за его пределы, поэтому все, что находится снаружи, может быть потеряно. Проверьте, чтобы ничего важного не находилось вне холста перед экспортом.
• Сложные фильтры. Рендеринг SVG-фильтров и градиентов может различаться между процессорами. Серверные растровые процессоры обрабатывают их иначе, чем браузеры; например, ImageMagick делегирует задачу librsvg, если он доступен, и использует более слабый внутренний рендерер в противном случае. Градиенты сами по себе растрятся чисто при любом масштабе (MDN), но сложные цепочки фильтров могут выглядеть иначе, чем ваш предварительный просмотр в браузере. Если это происходит, упростите эффекты или предварительно растрируйте их в вашем графическом редакторе.

Массовая конвертация набора иконок

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

Поэтому заранее решите два вопроса:

1. Один масштаб. 2x для веба — обычный выбор.
2. Одна политика фона. Обычно прозрачный, если только пункт назначения не поддерживает альфа-канал.

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

Если вам позже понадобятся несколько размеров из одного исходного SVG (например, 16, 32 и 512 пикселей), экспортируйте заново из SVG для каждого размера или пропустите PNG через ресайзер изображений — не увеличивайте маленький PNG, так как это просто размывает его.

Часто задаваемые вопросы, ответы на которые собраны здесь

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

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

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

Не идеально. Трейсинг аппроксимирует сетку пикселей, а не восстанавливает исходные пути, поэтому он никогда не бывает без потерь — плоские логотипы трейсятся приемлемо, а фотографии и градиенты — плохо. Сохраняйте исходный SVG как эталонный файл, и вам вообще не понадобится трейсинг.

Какой фон мне использовать?

Прозрачный для всего, что располагается на разных фонах, что нативно поддерживается альфа-каналом PNG. Заполняйте сплошной фон (обычно белый) только тогда, когда пункт назначения не поддерживает прозрачность.