it365

Конвертер SVG в PNG

Быстрое преобразование SVG в PNG. Сохраняйте прозрачный фон, настраивайте отступы, меняйте цвет графики, обрезайте лишние поля и экспортируйте пакетом.

Перетащите файлы для импорта SVG
Поддержка перетаскивания одного или нескольких файлов SVG
Всего: {{ images.length }} {{ images.length === 1 ? 'изображение' : 'изображений' }}
Нажмите или перетащите файлы SVG сюда
Пакетный импорт, мгновенный локальный рендеринг, 100% конфиденциальность без отправки на сервер
Формат вывода:
Качество: {{ Math.round(globalQuality * 100) }}%
#{{ idx + 1 }} .{{ globalFormat }}
Размеры тега: {{ img.specified.width || 'Не указано' }} × {{ img.specified.height || 'Не указано' }}
Размер в пикселях: {{ img.absolute.width ? (img.absolute.width + 'px') : '-' }} × {{ img.absolute.height ? (img.absolute.height + 'px') : '-' }}
ViewBox: {{ img.viewBox.width ? (img.viewBox.x + ' ' + img.viewBox.y + ' ' + img.viewBox.width + ' ' + img.viewBox.height) : 'Нет' }}
Границы контента: {{ img.contents ? (Math.round(img.contents.width) + ' × ' + Math.round(img.contents.height)) : '-' }}
Редактирование SVG-кода (автоматически обновляется и отображается при изменении):
⚠️ {{ img.errorMessage }}
Размер вывода (px):
×
Внешний отступ:
px
Точная обрезка:
Режим масштабирования:
Цвет фона:
Цвет графики:
{{ img.width }} × {{ img.height }} px

Как преобразовать SVG в PNG с сохранением прозрачного фона?

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

1. Принципы прозрачности в форматах SVG и PNG

Формат SVG (Scalable Vector Graphics) представляет собой язык векторной разметки на основе XML. По умолчанию корневой холст SVG всегда прозрачен, если только в коде явно не нарисована сплошная фигура фона (например, <rect fill="#ffffff" ...>).

В свою очередь, PNG (Portable Network Graphics) — это растровый формат, поддерживающий 32-битный цвет RGBA с 8-битным альфа-каналом, обеспечивающим 256 уровней плавной полупрозрачности. При конвертации SVG в PNG через элемент HTML5 Canvas с поддержкой альфа-канала и без заливки искусственного фона оригинальная прозрачность сохраняется безупречно.

2. 5 шагов для конвертации SVG в прозрачный PNG высокой четкости

1
Импорт векторных файлов SVG

Нажмите кнопку «Загрузить SVG» вверху или просто перетащите файлы SVG на страницу. Система мгновенно обработает векторные свойства и размеры прямо в браузере, поддерживая как одиночные файлы, так и пакетную загрузку.

2
Оставьте поле цвета фона пустым

В карточке параметров каждого изображения оставьте поле «Цвет фона» пустым для сохранения полной прозрачности. Используйте шахматную сетку или темный режим предпросмотра для быстрой проверки контуров и прозрачных областей.

3
Укажите разрешение вывода

Установите требуемую ширину и высоту в соответствии с вашими задачами (например, 512px, 1024px или 2048px для экранов Retina). Заблокируйте пропорции сторон, чтобы избежать искажения графики.

4
Обрежьте лишние поля и настройте отступы

Если в исходном SVG слишком много пустого пространства вокруг рисунка, отметьте пункт «Обрезать лишние поля» для автоматического определения границ контента или настройте «Внешний отступ».

5
Экспортируйте прозрачные изображения PNG

Нажмите «Скачать PNG», чтобы сохранить четкое растровое изображение, или нажмите «Копировать PNG» для быстрой вставки в Figma, Sketch, Photoshop или мессенджеры; для группы файлов используйте «Скачать ZIP».

3. Почему у полученного PNG появляется черный или белый фон?

При конвертации векторных файлов традиционными программами пользователи часто сталкиваются с появлением непрозрачного черного или белого фона. Распространенные причины и решения:

01
Неправильно выбранный формат

Форматы JPEG/JPG не поддерживают альфа-канал прозрачности и автоматически заменяют прозрачные пиксели сплошным белым или черным цветом. Всегда выбирайте форматы PNG или WebP.

02
Встроенный фоновый прямоугольник в SVG

Некоторые файлы, экспортированные из графических редакторов, содержат подложку (например, <rect width="100%" height="100%" fill="#fff"/>). Откройте вкладку «Исходный код» в нашем инструменте, чтобы найти и удалить этот тег.

03
Особенности программы просмотра изображений

Стандартные программы просмотра в некоторых ОС отображают прозрачные файлы PNG на сплошном черном или белом фоне окна. Откройте файл в браузере или графическом редакторе для проверки подлинной прозрачности.

4. Часто задаваемые вопросы (FAQ)

Теряет ли изображение PNG четкость при увеличении?
Растровые изображения теряют четкость, если увеличивать их свыше заданного пиксельного размера. Мы рекомендуем перед конвертацией сразу указывать максимальный необходимый размер (например, 1024×1024 или 4096×4096). Наш инструмент выполняет рендеринг напрямую из векторного кода, гарантируя идеальную резкость.
Можно ли пакетом преобразовать десятки иконок SVG с сохранением прозрачности?
Да. По умолчанию все добавленные файлы сохраняют прозрачность. Включив «Синхронное редактирование», вы можете в один клик применить одинаковые размеры, режим заполнения и отступы ко всем иконкам и выгрузить общий ZIP-архив.
Загружаются ли мои файлы на сторонний сервер?
Нет. Все вычисления по конвертации выполняются исключительно на вашем компьютере с помощью HTML5 Canvas и встроенных Web API браузера. Исходные файлы никуда не передаются, что гарантирует абсолютную безопасность данных.