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

Перетащите файл SVG или нажмите, чтобы выбрать

SVG

Как это работает

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

Поэтому разрешение выбирается до преобразования, а не после. Инструмент переписывает ширину и высоту SVG под нужный размер и только затем рисует его, так что браузер заново прочерчивает кривые в этом масштабе, а не растягивает маленькую картинку. Можно задать множитель (2×, 4×…) или точные ширину и высоту в пикселях.

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

Примеры

<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 pxИконка 24 px с множителем 4× превращается в 96 × 96 px — обычный размер для экранов с высокой плотностью пикселей.
<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxSVG без атрибутов width и height берёт размер из viewBox; здесь он растрируется в 1× для превью-картинки в соцсетях.

Сценарии использования

  • Подготовить PNG-иконки, которые требуют магазины приложений или веб-манифесты, не принимающие SVG.
  • Преобразовать векторный логотип в PNG с прозрачным фоном, чтобы вставить его в презентацию или документ.
  • Экспортировать SVG-диаграмму или график в JPG, чтобы приложить к письму или загрузить на площадку, не принимающую векторы.
  • Получить версии @2x и @3x одной и той же иконки для экранов с высокой плотностью пикселей.
  • Сделать превью-изображение сайта (Open Graph) из SVG-шаблона.

Часто задаваемые вопросы

Какое разрешение выбрать?

Ту, которой требует конечное применение. Для обычных экранов достаточно размера, в котором изображение будет показано; для экранов высокой плотности берите 2× или 3× от этого значения. Для печати умножьте размер в дюймах на 300, чтобы получить 300 dpi.

Почему мой SVG получается неожиданного размера?

Исходный размер берётся из атрибутов width и height; если их нет или они заданы в процентах, используется соотношение viewBox. Когда нет ни того, ни другого, браузер принимает 300 × 150 px. Это значение можно не учитывать и указать точные ширину и высоту в пользовательском режиме.

Сохраняется ли прозрачность?

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

Почему не получается SVG, использующий внешние изображения или шрифты?

При отрисовке внутри изображения SVG не может загружать ресурсы с других доменов, и браузер блокирует экспорт из соображений безопасности. Решение — встроить эти ресурсы в сам SVG: изображения как data URI, а текст перевести в контуры.

Можно ли вернуться от PNG к SVG?

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

См. также