Как конвертировать 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 год) поддерживает пакетный экспорт и командную строку.

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

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

Через командную строку (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».

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

Способ 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% проблем с некорректной растеризацией

Рекомендации по выбору разрешения для разных задач

Назначение PNG	Рекомендуемый DPI	Минимальный размер (px)
Веб-страница (обычный экран)	72–96 dpi	от 800 px по ширине
Retina / HiDPI экран	144–192 dpi	от 1600 px по ширине
Печать (флаер, листовка)	300 dpi	от 2480 px (A4)
Баннер, плакат	150 dpi	от 4960 px
Иконка / favicon	72 dpi	16–512 px
Соцсети (превью, обложка)	96 dpi	1200×630 px (Open Graph)