У SVG нет пикселей, поэтому это рендеринг, а не конвертация

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

Зачем вообще нужен PNG

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

Большой размер здесь ничего не стоит

Увеличение фотографии создает пиксели, которых никогда не было, поэтому изображение становится размытым при увеличении в 2 раза и превращается в кашу при увеличении в 10 раз. При рендеринге вектора таких ограничений нет. Значок размером 24 пикселя, отрендеренный в 1024 пикселя — это не увеличенный 24-пиксельный значок, а то же самое изображение, выполненное заново в 1024 пикселях, с пересчитанными для этого размера всеми кривыми и гранями. Мы проверили это: значок 24 на 24 вернулся как 1024 на 1024 с цветами, идентичными исходным, байт в байт, и с гладкими сглаженными краями без ступенек.

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

Вы выбираете размер — или это делает файл

Введите ширину, и изображение будет подогнано под нее с сохранением пропорций. Если вы запросите логотип 2:1 размером 400 на 400, вы получите четкое изображение 400 на 200, а не сжатый квадрат. Есть готовые пресеты на 256, 512, 1024 и 2048, а также вариант «Оригинал», который рендерит в том размере, который указан в самом SVG. Для файла с размерами 200 на 100, «Оригинал» вернет ровно 200 на 100. Максимум — 16 384 пикселя по стороне и 64 мегапикселя в целом, что покрывает рендер 8000 на 8000.

Прозрачность, включая частичную

PNG поддерживает настоящий альфа-канал, поэтому логотип с прозрачным фоном вернется с прозрачным фоном — готовый для слайда или страницы товара без белого прямоугольника вокруг. То, что отличает хороший рендерер от небрежного — это частичная прозрачность: мягкие тени, размытые края, любые элементы с полупрозрачностью. Для фигуры с прозрачностью 50% на выходе альфа-канал был 128, то есть ровно половина. Каждый рендер возвращался как настоящее RGBA-изображение. Если вы хотите убрать прозрачность, просто выберите сплошной цвет фона и укажите нужный оттенок в палитре.

Текст и градиенты — две вещи, которые обычно ломаются

Серверный рендеринг SVG часто дает сбои в двух местах. Шрифты могут отсутствовать, поэтому текст исчезает или отображается другим гарнитурой. А градиенты, определённые один раз и используемые по id, не разрешаются, из-за чего фигуры становятся плоскими или черными. Мы проверили оба случая. Текст был отрендерен с чистыми сглаженными контурами, а линейный градиент с url() — как настоящий переход от одного цвета к другому. Если файл запрашивает шрифт, которого нет на сервере, используется замена, и результат сообщает об этом, чтобы вы знали об этом сразу.

Загружать чужой SVG здесь безопасно

SVG может по стандарту содержать JavaScript и ссылки на ресурсы в интернете. Поэтому почтовые сервисы блокируют этот формат, и это действительно повод быть осторожным с файлами от незнакомцев. Рендеринг здесь выполняется через специальный векторный движок, а не headless-браузер: скрипты никогда не выполняются, внешние ссылки не загружаются. Ничто внутри файла не может запуститься, связаться с интернетом или что-то прочитать. Вы получаете истинное статичное состояние изображения, поэтому анимации рендерятся только в первом кадре, а не движутся.

Быстро и воспроизводимо

Классический тигр Ghostscript, 94,5 КБ плотных кривых Безье и стандартный стресс-тест для SVG-рендереров, был отрендерен в PNG 512 пикселей за 53 миллисекунды. Повторный рендер того же файла дает байт-в-байт идентичный результат, так что итог можно воспроизвести точно, а не примерно. Сжатые .svgz-файлы читаются напрямую, а формат определяется по содержимому, так что файл с переименованным расширением или вовсе без него всё равно рендерится.

Набор иконок за один раз

Несколько файлов рендерятся с одинаковыми настройками и возвращаются одним ZIP-архивом под исходными именами. Три разных файла с именем icon.svg возвращаются как icon.png, icon_1.png и icon_2.png, а не затирают друг друга. Поврежденный или не-SVG-файл в пакете просто пропускается и указывается в результате, не мешая остальным.

Что вы получаете

• PNG, отрендеренный в выбранном вами размере, а не увеличенная копия маленького изображения
• Сохранение пропорций — ничего не растягивается и не сжимается
• Полная поддержка альфа-канала, включая полупрозрачные фигуры и мягкие тени, или любой цвет фона на ваш выбор
• Текст и градиенты рендерятся, а не пропадают, с отчетом о замене шрифтов
• Скрипты не выполняются и внешние ссылки не загружаются, поэтому неизвестный SVG безопасно загружать
• Без регистрации, без водяных знаков, файлы удаляются с сервера через час

Что дальше?

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