Как конвертировать SVG в PNG без потери чёткости

Полезное

SVG (Scalable Vector Graphics) — это векторный формат изображений, основанный на XML, который масштабируется без потери качества. PNG (Portable Network Graphics) — растровый формат с поддержкой прозрачности. Конвертация SVG в PNG предполагает перевод математических кривых и координат в пиксельную сетку с сохранением максимально возможной чёткости и детализации.

Почему чёткость теряется при конвертации

При переводе векторного изображения в растр происходит растеризация — каждая кривая и линия превращается в набор пикселей. Если разрешение при экспорте задано неверно, итоговый PNG окажется размытым или «мыльным». Основные причины потери качества:

Слишком низкое значение DPI (dots per inch) при экспорте
Неправильно заданные размеры canvas в пикселях
Субпиксельное сглаживание без контроля со стороны пользователя
Использование онлайн-конвертеров с ограничением выходного разрешения
Некорректная настройка viewBox в исходном SVG-файле

Чтобы результат был чётким, нужно понимать, что итоговое качество PNG целиком определяется разрешением, заданным на этапе растеризации, а не качеством исходного SVG.

Параметры, влияющие на качество экспорта

Параметр
Рекомендуемое значение
Назначение

DPI (разрешение)
150–300 dpi для печати, 72–96 dpi для экрана
Определяет плотность пикселей

Ширина/высота в пикселях
Минимум 2× от отображаемого размера
Запас под Retina-дисплеи

Цветовое пространство
sRGB
Совместимость с браузерами и ОС

Bit depth
32 bit (RGBA) при наличии прозрачности
Сохраняет альфа-канал

Antialiasing
Включён (subpixel или grayscale)
Сглаживание диагональных линий

Способ 1: конвертация через Inkscape

Inkscape — бесплатный векторный редактор с открытым исходным кодом, один из наиболее точных инструментов растеризации SVG. Версия 1.3+ (актуальная на 2026 год) поддерживает пакетный экспорт и командную строку.

Через графический интерфейс:

Открыть файл SVG в Inkscape
Перейти: Файл → Экспортировать PNG (Shift+Ctrl+E)
Задать ширину в пикселях — например, 2000 px для логотипа
Установить DPI: 300 для печати или 96 для веба
Нажать «Экспортировать»

Через командную строку (batch-экспорт):

inkscape input.svg --export-type=png --export-filename=output.png --export-dpi=300
Параметр --export-width=4000 задаёт конкретную ширину в пикселях
Флаг --export-background-opacity=0 сохраняет прозрачность фона

Способ 2: конвертация через Adobe Illustrator

В версии Illustrator 2025–2026 процесс экспорта упрощён. Для максимального качества следует использовать функцию «Экспорт для экранов», а не устаревший «Сохранить для Web».

Открыть SVG-файл
Перейти: Файл → Экспорт → Экспорт для экранов
Выбрать формат PNG
Задать масштаб: 1x, 2x, 3x или конкретное значение в пикселях
Включить опцию «Антиалиасинг текста»
Нажать «Экспортировать артборд»

Способ 3: конвертация через браузер и JavaScript

Подходит для автоматизации на стороне фронтенда или Node.js. Используется связка Canvas API + библиотека sharp (Node.js).

Библиотека sharp (версия 0.33+, актуальна 2026): поддерживает SVG → PNG нативно через libvips
Команда: sharp('input.svg').resize(2000).png().toFile('output.png')
Параметр density: 300 задаёт DPI: sharp('input.svg', { density: 300 })
Библиотека puppeteer: открывает SVG в Chromium и делает скриншот с заданным deviceScaleFactor (2–4)
Библиотека resvg-js: высокоточная растеризация на базе Rust, без зависимостей от браузера

Способ 4: онлайн-конвертеры

Онлайн-инструменты удобны для разовых задач, однако имеют ограничения по максимальному разрешению вывода.

Сервис
Макс. разрешение
Поддержка прозрачности
Стоимость

Convertio
до 10 000 px
Да
Бесплатно / от $9.99/мес

CloudConvert
до 14 400 px
Да
Бесплатно 25 конв./день

SVG2PNG (svg2png.com)
до 4000 px
Да
Бесплатно

Squoosh (Google)
Зависит от файла
Да
Бесплатно

Работа с viewBox и единицами измерения в SVG

Перед конвертацией важно проверить сам SVG-файл. Некорректный viewBox — частая причина обрезанного или размытого результата.

Атрибут viewBox="0 0 100 100" задаёт внутреннюю систему координат
Атрибуты width и height в SVG должны совпадать с пропорциями viewBox
Если SVG создан без viewBox, Inkscape и sharp могут растеризовать его в размере 1×1 px
Рекомендуется всегда проверять SVG через xmllint --noout file.svg перед экспортом
Добавление viewBox к SVG без него решает до 80% проблем с некорректной растеризацией