Перейти к содержимому
Toolars
Каталог

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

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

Факты об инструменте

Лимит размера SVG
2 MiB разметки с типом image/svg+xml
Масштаб
Кнопки 1x, 2x, 3x и 4x, здесь заранее выбран 2x; поле «Масштаб экспорта» также принимает значения от 0,01 до 32
Предел результата
8 192 px по стороне и 24 MP после масштабирования
Удаляется перед рендерингом
Скрипты, обработчики событий, атрибуты style и <style>, фильтры, маркеры, <image>, foreignObject, внешние и data:-URL
Отклоняется сразу
Объявления DOCTYPE или ENTITY, а также файлы без width/height и без viewBox
Фон
В PNG прозрачный; цвет заливки применяется, только если переключиться на JPEG

Путь задачи / от ввода к результату

Как растеризовать SVG в PNG

  1. 01

    Добавьте SVG

    Кнопка «Выбрать файл» принимает по одному файлу .svg. Исходная разметка никогда не вставляется в страницу; превью появляется только после рендеринга очищенной версии.

  2. 02

    Выберите размер

    Нажмите 1x, 2x, 3x или 4x под полем «Масштаб экспорта» либо введите точные значения в пикселях в поля «Ширина результата» и «Высота результата».

  3. 03

    Очистите и конвертируйте

    Нажмите «Очистить и конвертировать». В сводке будет итоговый размер в пикселях и число удалённых небезопасных или неподдерживаемых элементов.

  4. 04

    Проверьте и скачайте

    Если удалённых элементов больше нуля, сравните превью с исходным рисунком, прежде чем скачивать PNG.

Как векторная графика превращается в пиксели

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

Именно сетка — главное решение. Масштаб умножает собственные width и height файла SVG или его viewBox, если этих атрибутов нет, так что иконка 64×64 при 2x становится 128×128. Если потом увеличить PNG, он размоется, поэтому рендерите сразу в самом крупном нужном размере.

Большинство сюрпризов объясняется очисткой. Контуры, базовые фигуры, текст, градиенты, обтравочные контуры, маски, узоры и локальные ссылки <use> сохраняются, как и атрибуты оформления вроде fill и stroke. Стили в CSS-классах, атрибутах style или блоке <style> отбрасываются, поэтому графика, экспортированная таким способом, может отрисоваться чёрной или без заливки.

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

Почему мой PNG чёрный или потерял цвета?
Скорее всего, цвета были заданы через CSS: блоком <style>, правилами классов или атрибутами style. Всё это удаляется, а фигуры SVG по умолчанию заливаются чёрным. Экспортируйте SVG заново с атрибутами оформления (fill, stroke) вместо CSS или включите в графическом редакторе экспорт со встроенными атрибутами.
Какой масштаб выбрать для экранов высокой плотности?
Страница открывается с масштабом 2x: он удваивает заявленные размеры SVG и подходит для большинства экранов высокой плотности. Для крупного размещения берите 3x или 4x, помня, что результат всё равно должен уложиться в 8 192 px по стороне и 24 MP.
Почему пропали наконечники стрелок или тени?
В SVG наконечники стрелок рисуются элементами marker, а падающие тени — элементами filter, и ни те ни другие не входят в список разрешённого. Перед экспортом SVG преобразуйте эти эффекты в обычные контуры в редакторе.
Почему мой SVG отклонён?
Частые причины — объявление DOCTYPE или ENTITY, файл больше 2 MiB, файл, тип которого не определяется как image/svg+xml, или корневой элемент без width, height и viewBox. Масштаб, при котором рендер вышел бы за пиксельный предел, отклоняется с указанием этого лимита.
Попадут ли в PNG связанные шрифты и изображения?
Нет. Внешние URL, data:-URL и элементы <image> удаляются, поэтому связанные картинки и веб-шрифты не загружаются. Текст рисуется шрифтом, который уже есть в браузере для указанного font-family, так что, если важна точная форма букв, переведите текст в кривые в редакторе.

Конвертер SVG в изображения