Направление конвертации
Конвертация SVG в PNG
Преобразование SVG → PNG на сервере, без установки программ
- Загрузить
- Выбрать формат
- Скачать
Загрузка файлов
Область приёма файла
или
Файлы SVG. До 5 МБ, до 20 файлов за раз. Изображение можно вставить из буфера обмена: Ctrl+V.
Вектор превращается в пиксели: результат перестаёт масштабироваться без потерь, поэтому размер задавайте с запасом. Прозрачный фон сохраняется, текст рисуется шрифтами сервера — если шрифт нестандартный, переведите надписи в кривые заранее.
Исходники и результаты хранятся 60 минут, затем стираются фоновым уборщиком. Предельный размер файла — 5 МБ, срок хранения — час.
SVG и PNG: характеристики
| Характеристика | .svgSVG | .pngPNG |
|---|---|---|
| Полное название | Scalable Vector Graphics | Portable Network Graphics |
| Разработчик | W3C | PNG Development Group, спецификация — W3C |
| Год появления | 2001 | 1996 |
| Расширение | .svg | .png |
| MIME-тип | image/svg+xml | image/png |
| Содержимое | Текстовое | Двоичное |
| Сжатие | Без потерь | без потерь (Deflate и фильтры строк) |
| Прозрачность | Поддерживается | альфа-канал, 256 уровней |
| Несколько страниц в файле | Нет | Нет |
| Тип графики | векторная, разметка XML | нет данных |
| Масштабирование | без потери качества | нет данных |
| Возможности | прозрачность, градиенты, фильтры, анимация, CSS | нет данных |
| Размер | единицы килобайт для иконок | нет данных |
| Осторожно | файл может содержать скрипты | нет данных |
| Чем открыть | любой браузер, Inkscape, Adobe Illustrator, Figma, CorelDRAW, текстовый редактор | Просмотр фотографий Windows, Фото (macOS), Adobe Photoshop, GIMP, Paint.NET, любой браузер |
| Спецификация | Описание формата | Описание формата |
| Глубина цвета | нет данных | до 16 бит на канал |
| Анимация | нет данных | через расширение APNG |
| Сильная сторона | нет данных | скриншоты, логотипы, графика с текстом |
Преобразование SVG → PNG
SVG не содержит пикселей: это разметка с описанием контуров, заливок и преобразований, у которой нет собственного разрешения. Растеризация назначает его явно — через плотность точек на дюйм либо через целевую ширину. Отрисовку выполняет librsvg внутри libvips; базовая плотность 96 dpi соответствует принятому в вебе соотношению, при котором единица пользовательских координат равна пикселю.
Размер результата — единственная величина, которую нужно выбрать осознанно: после растеризации изображение перестаёт масштабироваться без потерь. Для экранов с удвоенной плотностью точек выгружайте вдвое больший размер, чем занимает элемент в вёрстке: знак шириной 200 пикселей в макете — файл шириной 400. Для печати берите 300 dpi. Прозрачность фона переносится в альфа-канал полностью, поэтому знак ложится на любую подложку.
Текст в разметке остаётся текстом и отрисовывается шрифтами, установленными на сервере. Фирменная гарнитура там отсутствует, поэтому надпись подменится другой и изменит длину строки, что сдвинет соседние элементы композиции. Надёжное решение — перевести текст в кривые в векторном редакторе до конвертации: после этого буквы становятся обычными контурами и отрисовываются в точности как в макете.
Два ограничения безопасности заметны на практике. Изображения, подключённые в разметке внешней ссылкой, не подгружаются — сервер не обращается в сеть за содержимым обрабатываемого файла, поэтому такие вставки нужно встраивать внутрь документа заранее. Скрипты и анимация не исполняются: результат соответствует исходному состоянию документа. Растровые вставки внутри разметки остаются растром и при увеличении размера теряют резкость, в отличие от контуров.
Порядок преобразования SVG → PNG
Шаг 1
Подготовка текста
Переведите надписи в кривые, если в макете использована нефирменная гарнитура. На сервере её нет, и подстановка изменит и рисунок букв, и длину строки.
Шаг 2
Целевой размер
Задайте ширину в пикселях или плотность в точках на дюйм. Это единственная величина, реально определяющая результат: после отрисовки увеличить картинку без потери резкости уже нельзя.
Шаг 3
Отрисовка
Документ разбирается и растеризуется с сохранением альфа-канала. Иконка обрабатывается мгновенно, сложная иллюстрация с сотнями контуров и градиентов — за секунду-другую.
Шаг 4
Контроль
Проверьте, на месте ли надписи и не пропали ли внешние вставки. Отсутствие картинки означает, что она подключена ссылкой: встройте её в документ и повторите задание.
Вопросы по работе сервиса
Какой размер задать?
Отталкивайтесь от места вывода. Для веба — ширина блока, умноженная на два, чтобы знак остался резким на экранах с удвоенной плотностью точек. Для печати — 300 dpi. Запас разумен: уменьшение готового растра проходит без потерь, увеличение — нет.
Почему надписи набраны не той гарнитурой?
Надписи рисуются шрифтами сервера, а фирменных гарнитур там не установлено. Переведите текст в кривые в векторном редакторе до конвертации: буквы станут контурами, и подстановка перестанет влиять и на рисунок, и на длину строки.
Переносится ли прозрачность холста?
Да, целевой формат хранит альфа-канал целиком. Если в разметке фон не задан явным прямоугольником, он останется прозрачным и в растре, включая полупрозрачные тени и сглаженные края контуров.
Почему часть изображения не отрисовалась?
Скорее всего, она подключена внешней ссылкой. Сервер не обращается в сеть за содержимым обрабатываемого документа — это правило безопасности, а не сбой. Встройте такие изображения внутрь разметки перед конвертацией. Также не исполняются скрипты, поэтому построенное ими содержимое в растр не попадает.