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

Конвертируйте SVG в PNG с любым масштабом или точным размером в пикселях прямо в браузере. Скрипты и внешние ссылки удаляются до начала отрисовки.

Перетащите файлы сюда

.svg · до 10 МБ

Выберите файлы

Как конвертировать

1
Перетащите SVG-файлы
До 100 файлов за раз. Перед обработкой каждый проверяется: это должен быть SVG с разметкой, а не файл с чужим расширением.
2
Задайте масштаб или точный размер
Уменьшите или увеличьте исходный размер рисунка от 0.5 до 10 раз. Или введите нужную ширину в пикселях: высота подстроится по соотношению сторон.
3
Скачайте PNG-файлы
Один файл возвращается как PNG, несколько — как ZIP-архив. В карточке результата показан фактический размер в пикселях.

Масштаб, а не ресемплинг

У SVG нет пикселей: это инструкции, как рисовать фигуры. Поэтому PNG, отрисованный в масштабе 4×, — не увеличенная маленькая картинка. Каждая кривая прорисовывается заново в большем размере, и края остаются четкими. Инструмент опирается на это свойство: перед отрисовкой ширина и высота корневого элемента переписываются на указанный вами размер в пикселях. Браузер растеризует векторные пути сразу в целевое разрешение, а не масштабирует готовый маленький растр на canvas. Масштаб по умолчанию 2 подходит для самого частого случая: логотип нарисован под обычный экран, а показать его нужно на ретина-дисплее. Режим точных пикселей нужен там, где платформа требует конкретный размер, например иконку приложения 1024×1024 или обложку для соцсетей 1200×630.

Почему удаляются скрипты и внешние ссылки

SVG — это XML, а в XML может быть не только рисунок. Файл от кого-то еще может содержать элемент <script>, обработчики событий вроде onload, блок foreignObject с целой HTML-страницей или ссылки на шрифты и изображения с другого сервера. Если открыть такой файл без защиты, в вашей вкладке запустится чужой код, а удаленный сервер незаметно узнает, что и когда вы открыли. Каждый файл здесь сначала проходит через DOMPurify с профилем SVG, а затем через наш второй проход. Он удаляет все href, xlink:href и CSS url(), которые не указывают на якорь внутри этого же файла или на встроенный data: URI. Шрифты и изображения, встроенные как data: URI, сохраняются и отрисовываются как обычно. Все удаленное подсчитывается, и вы видите, почему часть рисунка могла исчезнуть.

Прозрачность и фон

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

Файл остается на вашем устройстве

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

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

Почему PNG выглядит размытым при большом масштабе?

Так быть не должно: вектор заново отрисовывается в целевом размере, а не растягивается. Если результат все же выглядит мягким, в SVG, скорее всего, встроен растр (картинка в виде data: URI), а не векторные пути. У этого растра фиксированное разрешение, и увеличение не добавит деталей. Откройте исходный файл в редакторе и проверьте, это набор путей или одна встроенная картинка.

Что происходит со скриптами внутри SVG?

Они удаляются перед отрисовкой, вместе с обработчиками событий вроде onload и onclick и любыми блоками foreignObject. Ничто из файла не выполняется. Это не опция и не настройка: отрисовать SVG без предварительной очистки здесь нельзя.

Почему не отобразились внешние изображения в SVG?

Любая ссылка на адрес с http://, https:// или протоколозависимый // удаляется, потому что загрузка такого ресурса сообщила бы этому серверу, что вы открыли файл. Сохраняются только ссылки на id внутри того же документа и встроенные data: URI. Если эти изображения нужны в результате, сначала встройте их в SVG как data: URI, а потом конвертируйте.

Как получить точный размер в пикселях?

Переключите размер результата в режим «Точные пиксели» и введите ширину. Оставьте высоту 0: она возьмется из соотношения сторон рисунка, и изображение не исказится. Если нужно намеренно растянуть в фиксированный прямоугольник, введите высоту вместо ширины. Обе стороны ограничены 16384 пикселями: это предел canvas в браузере.

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

Да, по умолчанию. Незакрашенные области в PNG получаются с альфой 0. Если нужен сплошной фон, в разделе «Фон» выберите белый или произвольный цвет. Некоторые старые инструменты и почтовые клиенты показывают прозрачные области PNG черными.

Что если в SVG нет viewBox?

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

Сколько файлов можно конвертировать за раз?

До 100 файлов, по 10 МБ каждый и до 200 МБ суммарно. Они используют один набор настроек и обрабатываются по очереди. Ошибка в одном файле не отменяет остальные, а все успешно сконвертированные файлы возвращаются в одном ZIP-архиве.

Файл загружается на сервер?

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

Статьи по теме

Как сделать фавиконку без мыла на Retina-экранахРаньше одного маленького favicon.ico хватало для всего сайта. Уже много лет это не так, и поэтому столько иконок выглядят размытыми.