Как конвертировать SVG в PNG без потери шрифтов?

Почему выходные данные SVG в PNG имеют размер в 2 раза больше заявленного, и почему браузерная песочница тихо отбрасывает внешние шрифты и связанные изображения во время рендеринга.

August 9, 2026

SVG не содержит пикселей. Это XML: пути, заливки, viewBox и, возможно, элемент <text>, указывающий на шрифт, которого на самом деле нет в файле. Растрирование его в PNG означает выбор пиксельной сетки и рисование этих форм на ней, поэтому два фактора определяют, понравится ли вам результат. Сколько пикселей вы запросили и что рендерер мог загрузить во время рисования.

Мы выполняем этот рендер в вашем браузере. Файл помещается в URL-объект, элемент <img> загружает его, браузер рисует его на OffscreenCanvas, а кодировщик WebAssembly записывает PNG. Это приложение не имеет API-роутов и серверных действий, поэтому нерелизованный логотип никогда не оказывается в временном хранилище, ожидая удаления. Большинство конвертеров SVG в PNG сначала загружают и обещают очистку позже. Наш никогда не отправляет байты никуда, что и является основной идеей нашей модели конфиденциальности.

Что на самом деле происходит, когда браузер растрифицирует SVG?

Ваш SVG передается элементу <img>, и эта деталь управляет всем остальным на этой странице. SVG, загруженный как изображение, работает в ограниченном режиме обработки, где скрипты не выполняются, а внешние ссылки не загружаются, что определено как безопасные режимы обработки правилами соответствия SVG 2. Как только загрузка завершается, мы рисуем его с помощью drawImage на OffscreenCanvas, считываем пиксели, кодируем с помощью @jsquash/png и затем запускаем oxipng на уровне 3 над байтами. Этот шаг без потерь. Альфа-канал сохраняется на всем протяжении, поэтому прозрачный логотип остается прозрачным.

Какой на самом деле будет размер PNG?

Наш конвертер рендерит в два раза больше внутреннего размера SVG. SVG размером 500x500 выходит 1000x1000. Удвоение дает вам файл с качеством Retina бесплатно, и это также то, о чем люди спотыкаются, когда спецификация требует точного количества пикселей. Если браузер не сообщает о пригодном внутреннем размере, мы заменяем его на 1024x1024 перед удвоением, так что PNG оказывается 2048x2048. Спецификация CSS Images объясняет, почему размер может отсутствовать: замененный элемент без внутренней ширины или высоты возвращается к размеру объекта по умолчанию, а viewBox сам по себе предоставляет соотношение без прикрепленного размера. Поэтому установите ширину и высоту на корневом <svg> в половину вашей цели. 256 на входе, 512 на выходе.

Почему мой текст вышел в неправильном шрифте?

Это самая распространенная жалоба, и это не ошибка в конвертере. Правило @font-face, указывающее на URL .woff2, считается внешней ссылкой, поэтому безопасный режим блокирует эту загрузку до начала. Шрифты, загруженные страницей вокруг изображения, тоже не доходят, потому что SVG в <img> является отдельным документом, выполняющим собственное разрешение шрифтов. То, что вы получаете, — это то, что машина может сопоставить из списка font-family, что на ноутбуке рецензента означает запасной шрифт, который вы никогда не выбирали. Исправление заключается в том, чтобы перестать отправлять текст как текст. Illustrator называет это Type > Create Outlines. Inkscape называет это Path > Object to Path. Оба конвертируют каждый глиф в путь, файл немного увеличивается, и рендер перестает зависеть от машины.

Почему фотография внутри моего SVG отсутствует?

То же правило, другой симптом. Если ваш SVG загружает растровое изображение через элемент <image> с абсолютным https URL, этот URL не загружается, и PNG возвращается с пустым местом, где должна быть фотография. data: URI работает нормально, потому что нет сетевого запроса, который можно было бы заблокировать. Есть вторая причина для встраивания: растровое изображение с другого источника, нарисованное на холсте, пятна его, и считывание пикселей затем вызывает SecurityError. Этот сбой по крайней мере объявляет о себе. Заблокированная ссылка молчит, что и стоит людям целый день. Откройте файл в текстовом редакторе и поищите http перед конвертацией.

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

Нет, и мы не делаем вид, что это возможно. Наш конвертер декодирует SVG, и он не может его закодировать: кодировщики в сборке пишут JPEG, PNG, WebP, AVIF и PDF, и ни одна из 24 пар по 11 форматам не имеет SVG в качестве цели. Переход от пикселей обратно к путям — это трассировка, машина пытается угадать, где находятся края, и трассированный логотип редко бывает достаточно близким для отправки. Повторно экспортируйте из оригинала, если он у вас еще есть. Если вам действительно нужен растр большего размера, наш апскейлер использует Real-ESRGAN и всегда записывает PNG: он преобразовал файл 400x269 в 1600x1076 с увеличением в 4 раза.

Как превратить SVG в набор фавиконов?

Генератор иконок принимает SVG напрямую, что компрессор, изменитель размера и обрезчик не делают: эти три принимают только JPEG, PNG, WebP, AVIF и GIF. Он рендерит ваш SVG на квадратном холсте, размер которого равен большему из его двух размеров или 512 пикселей, в зависимости от того, что больше, так что иконка 64x64 все равно получает холст 512 для уменьшения размера. В итоге получается семь файлов: favicon.ico с размерами 16, 32 и 48, favicon-16x16.png, favicon-32x32.png, 180px apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png и site.webmanifest. Почему этот .ico все еще занимает 4,6 КБ — это отдельный вопрос. Один файл за раз, лимит 10 МБ. Конвертер — это инструмент для пакетной обработки: 10 файлов и 50 МБ за раз.

Должен ли я сжать PNG после этого?

Обычно да, и режим имеет большее значение, чем любой ползунок. На прозрачном PNG размером 942,4 КБ при 900x606 путь без потерь (oxipng уровень 3) составил 383,9 КБ, сокращение на 59% с каждым пикселем, идентичным входным данным. Путь палитры (imagequant) уменьшил тот же файл до 98,3 КБ, сокращение на 90%, сократив его до 256 цветов. Плоское векторное искусство — лучший случай для режима палитры, поскольку логотип с шестью заливками не имеет ничего похожего на 256 цветов, которые можно было бы отдать. Сжатие также удаляет все метаданные. Запустите оба в компрессоре и сохраните тот, который лучше всего подходит.

Сделайте это следующим: откройте SVG в текстовом редакторе, поищите http, чтобы поймать связанные шрифты и изображения, обведите любой живой текст, затем установите ширину и высоту на корневом <svg> в половину вашего целевого размера и загрузите его на /convert/svg-to-png. Если PNG предназначен для веб-страницы, отправьте его сразу в компрессор, а PNG против WebP для файла с прозрачностью скажет вам, нужно ли менять формат вообще. Если он предназначен для документа, наши заметки по JPG в PDF охватывают размер страницы, с которым в конечном итоге оказывается преобразованное изображение.