SVG в PNG
Преобразуйте поддерживаемый статический SVG в PNG с заданными размерами в пикселях и прозрачным или однотонным фоном. Преобразование выполняется локально; проверьте результат и скачайте то же изображение.
Создание PNG из векторного изображения
- Выберите один файл SVG или вставьте его разметку в UTF-8. Исходные данные проверяются до передачи в модуль отрисовки.
- Используйте определённую область просмотра или задайте холст вручную, затем выберите исходный размер, ширину или высоту и фон результата.
- Нажмите «Преобразовать в PNG», проверьте результат и скачайте его. При изменении исходных данных или настроек прежнее изображение становится недействительным.
Холст и пиксели
Атрибут viewBox в SVG описывает прямоугольную область координат, а не универсальный размер в пикселях. Конвертер использует явно заданные размеры корневого элемента, а при их отсутствии — описанное правило для viewBox.
Пользовательская область просмотра задаёт исходный холст. При выборе ширины или высоты результата второй размер вычисляется по пропорциям холста; округление до целых пикселей может немного изменить пропорции.
PNG поддерживает прозрачность. Шахматный фон предпросмотра не входит в файл. Однотонный фон заменяет прозрачные области выбранным непрозрачным цветом.
Текст отрисовывается с помощью включённых в приложение шрифтов обычного начертания. Запрошенные семейства, насыщенность, интервалы или системы письма могут выглядеть иначе; некоторые символы могут отсутствовать. Чтобы точно сохранить типографику, преобразуйте текст в кривые до конвертации.
Примеры размеров
Для viewBox 10 20 400 200 без размеров корневого элемента используется исходный холст 400 на 200. При выборе ширины 1200 получится PNG 1200 на 600; ненулевое начало координат viewBox сохраняет значение.
Если viewBox равен 100 на 50 и задана только ширина 200, инструмент вычисляет высоту 100. Это принятое здесь правило расчёта, а не утверждение, что все автономные средства отрисовки одинаково определяют отсутствующий размер.
При масштабировании холста 3 на 2 до ширины 10 высота округляется до 7 пикселей. Дробная геометрия и сглаживание по-прежнему отрисовываются фиксированной версией движка, а не восстанавливаются формулой размера.
Поддерживается определённый статический профиль SVG
Профиль включает обычные контуры, фигуры, группы, текст, стили, градиенты, локальные ссылки на повторно используемые элементы, обрезку, маски, маркеры и проверенные встроенные изображения PNG или JPEG. При неподдерживаемых возможностях инструмент отказывает в обработке, а не выдаёт молча неполный результат.
Фильтры, узоры, анимация, скрипты, HTML foreignObject, внешние ресурсы и вложенные изображения SVG в этой версии не поддерживаются. Поэтому некоторые экспортированные изображения, особенно с эффектами или тенями, нужно подготовить заранее.
Размер исходных данных ограничен 4 МиБ, каждая сторона результата — 8192 пикселями, а весь растр — 8 388 608 пикселями. Также действуют ограничения структуры, встроенных изображений, раскрытия ссылок, промежуточных поверхностей и времени. Малый исходный файл не гарантирует малую нагрузку при отрисовке.
Инструмент не гарантирует идентичную браузеру отрисовку, исходные шрифты, цветовые профили ICC, метаданные DPI печати, поддержку любых символов Unicode или сохранение метаданных источника. Здесь DPI задаёт пересчёт физических единиц, а не метаданные печати PNG.
За раз преобразуется один документ. Исходный SVG не редактируется, не загружается на сервер, не показывается как исполняемая разметка и не заменяется скачиваемым переписанным SVG. Пакетного ZIP, редактора SVG и гарантированной степени сжатия нет.
Локальное преобразование и используемые ресурсы
Преобразование использует локальные веб-воркеры и фиксированные ресурсы движка и шрифтов с того же источника. Инструмент не загружает предоставленный SVG, изображения и содержимое файла на сервер, не сохраняет их в истории и не добавляет в ссылки для обмена. Сетевые ресурсы, указанные в исходном документе, отклоняются. Это описание потока данных инструмента, а не универсальная гарантия безопасности браузера.
Вопросы о преобразовании SVG в PNG
Источники
Эти материалы описывают входные форматы и фиксированные версии пакетов для профиля преобразования; они не гарантируют корректность каждого SVG и его отображения.
- W3Cw3.orgW3C: Scalable Vector Graphics 1.1
- W3Cw3.orgW3C: системы координат и области отображения SVG
- W3Cw3.orgW3C: ссылки и обращения к ресурсам SVG
- W3Cw3.orgW3C: Extensible Markup Language 1.0
- W3Cw3.orgW3C: синтаксис CSS
- W3Cw3.orgW3C: спецификация PNG
- registry.npmjs.orgПакет resvg-wasm 2.6.2
- raw.githubusercontent.comИсходный код зафиксированной оболочки resvg
- raw.githubusercontent.comЗафиксированный механизм: документированные неподдерживаемые возможности
- registry.npmjs.orgПакет saxes 6.0.0
- registry.npmjs.orgПакет CSS Tree 3.1.0
Источники профиля проверены 9 ноября 2026 года. Поддерживаемое подмножество уже возможностей механизма; поставляемые шрифты, отсутствующие глифы и обработка цвета могут изменить результат.
Похожие инструменты
Генератор CSS-фильтров
Настройте порядок эффектов, сравните образец и скопируйте объявление filter.
Открыть инструмент — Генератор CSS-фильтровКалькулятор плавного размера шрифта
Задайте размеры шрифта для двух значений ширины окна. Скопируйте CSS с единицами rem и изучите модель, рассчитанную по тем же коэффициентам, что и в коде.
Открыть инструмент — Калькулятор плавного размера шрифтаГенератор CSS-кнопок
Настройте состояния кнопки, проверьте фокус клавиатуры и скопируйте HTML и CSS.
Открыть инструмент — Генератор CSS-кнопокГенератор CSS border-radius
Настройте восемь радиусов, посмотрите результат и скопируйте CSS в пикселях или процентах.
Открыть инструмент — Генератор CSS border-radiusГенератор CSS Grid
Создайте пример CSS Grid с дорожками, размещением и именованными областями. Просматривайте, копируйте CSS и HTML или скачивайте полный пример.
Открыть инструмент — Генератор CSS GridГенератор CSS Flexbox
Создайте пример Flexbox с элементами управления контейнером и элементами, явными осями макета, соответствующими CSS и HTML, а также локальной загрузкой полного примера.
Открыть инструмент — Генератор CSS FlexboxГенератор CSS-тени текста
Создавайте упорядоченные тени текста, просматривайте пример и копируйте точный CSS.
Открыть инструмент — Генератор CSS-тени текстаГенератор преобразований CSS
Создавайте повторяемые двумерные преобразования CSS, редактируйте px или процентный перевод и начало координат, проверяйте поле ссылки и копируйте точные текущие объявления.
Открыть инструмент — Генератор преобразований CSSГенератор теней CSS
Создавайте упорядоченные слои box-shadow с предпросмотром и копируйте код.
Открыть инструмент — Генератор теней CSSВодяной знак на изображениях
Добавьте текст или логотип к изображениям, проверьте результаты и скачайте отдельные файлы или ZIP.
Открыть инструмент — Водяной знак на изображенияхГенератор CSS-градиентов
Создавайте линейные и радиальные градиенты с цветами, непрозрачностью и позициями.
Открыть инструмент — Генератор CSS-градиентовКонвертер цветов
Преобразуйте поддерживаемые значения sRGB HEX, RGB и HSL с альфа-каналом и указанной точностью.
Открыть инструмент — Конвертер цветовИзображение в текст (OCR)
Распознавайте печатный текст на локальных PNG и JPEG, выбирайте язык и проверяйте результат перед копированием или скачиванием.
Открыть инструмент — Изображение в текст (OCR)Чтение QR-кода из изображения
Прочитайте один QR-код из локального PNG или JPEG и проверьте текст или байты, не открывая ссылки.
Открыть инструмент — Чтение QR-кода из изображенияПроверка контрастности цветов
Сравните цвета переднего плана и фона, настройте непрозрачность и проверьте числовые пороги контрастности WCAG для текста и важных деталей интерфейса.
Открыть инструмент — Проверка контрастности цветовКалькулятор размера печати и разрешения
Рассчитайте размер отпечатка, нужное число пикселей и фактическое PPI с полями или обрезкой.
Открыть инструмент — Калькулятор размера печати и разрешенияКалькулятор соотношения сторон
Найдите соотношение ширины и высоты или рассчитайте новый размер в пикселях по одной заданной стороне.
Открыть инструмент — Калькулятор соотношения сторонСжатие изображений
Попробуйте уложить JPEG, PNG или WebP в заданный размер файла: проверьте результат и при желании уменьшите размеры изображения.
Открыть инструмент — Сжатие изображенийHEIC в JPG
Преобразуйте поддерживаемые HEIC-фото в полноразмерные JPG в браузере. Настройте качество и фон, скачайте проверенные файлы по отдельности или в ZIP.
Открыть инструмент — HEIC в JPGКонвертер изображений
Конвертируйте поддерживаемые PNG, JPEG и WebP локально, настройте прозрачность, фон и качество и скачайте проверенные результаты.
Открыть инструмент — Конвертер изображенийСоздать фотоколлаж
Расположите фотографии в сетке и скачайте PNG или JPEG.
Открыть инструмент — Создать фотоколлажПоворот и отражение изображений
Поверните или отразите набор локальных статичных PNG, JPEG и WebP, затем проверьте и скачайте обработанные изображения.
Открыть инструмент — Поворот и отражение изображенийОбрезать изображение
Обрежьте локальный JPEG, PNG или WebP с точностью до пикселя и скачайте результат в PNG или JPEG.
Открыть инструмент — Обрезать изображениеИзменить размер изображения
Измените размер JPG, PNG или WebP в пикселях или процентах, проверьте результат и скачайте его.
Открыть инструмент — Изменить размер изображения