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

Что такое конвертация SVG в PNG?

Конвертация SVG в PNG — это процесс растеризации векторной графики, при котором математические описания фигур и кривых преобразуются в сетку пикселей. Этот процесс фундаментально отличается от простого перекодирования между растровыми форматами: здесь происходит интерпретация геометрических инструкций и их визуализация в конкретном разрешении.

SVG (Scalable Vector Graphics) описывает изображение как набор математических объектов: прямоугольников, эллипсов, путей из кривых Безье, текстовых элементов. Файл SVG — это XML-документ, где каждая фигура определена координатами и атрибутами: <circle cx="50" cy="50" r="40" fill="red"/> рисует красный круг с центром в точке (50, 50) и радиусом 40 единиц. При любом масштабе браузер или графический редактор заново вычисляет координаты пикселей, сохраняя идеальную чёткость.

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

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

Когда необходима растеризация SVG в PNG

Совместимость с программным обеспечением

Векторный формат SVG поддерживается далеко не всеми программами. Многие приложения, особенно предназначенные для работы с фотографиями и растровой графикой, не умеют открывать SVG-файлы или делают это некорректно.

Если вам нужно вставить логотип в презентацию PowerPoint, отправить изображение в мессенджере или загрузить иконку в социальную сеть — PNG станет универсальным решением.

Безопасность и ограничения платформ

SVG-файлы могут содержать исполняемый JavaScript-код, что создаёт потенциальную угрозу безопасности. По этой причине многие платформы запрещают загрузку SVG:

• WordPress по умолчанию блокирует SVG-файлы в медиатеке
• Email-провайдеры удаляют SVG из писем или блокируют отображение
• Системы управления контентом часто ограничивают SVG во избежание XSS-атак
• Маркетплейсы (Wildberries, Ozon) требуют растровые форматы для карточек товаров

PNG безопасен по определению — это просто пиксельные данные без возможности внедрения кода.

Фиксация определённого размера

SVG по своей природе не имеет «родного» размера — он масштабируется под контейнер. Иногда требуется изображение строго определённых размеров:

• Favicon — строго 16×16, 32×32, 48×48 пикселей
• Иконки приложений — iOS требует PNG конкретных размеров (180×180 для iPhone)
• Баннеры — рекламные сети требуют точные пиксельные размеры
• Аватары — социальные сети ожидают квадратные изображения определённого разрешения

Конвертация SVG в PNG позволяет получить изображение с точными пиксельными размерами.

Интеграция с растровой графикой

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

Техническое сравнение SVG и PNG

Принципы хранения изображения

SVG (вектор):

• Хранит математические описания объектов
• Размер файла зависит от сложности путей, не от разрешения
• Поддерживает стили CSS, скрипты JavaScript, анимации SMIL
• Текст остаётся редактируемым и индексируемым
• Бесконечное масштабирование без потери качества

PNG (растр):

• Хранит сетку пикселей с информацией о цвете
• Размер файла прямо пропорционален разрешению
• Статичное изображение без интерактивности
• Текст превращается в пиксели, теряя редактируемость
• Масштабирование вверх ведёт к размытию

Сравнительная таблица характеристик

Когда PNG компактнее SVG

Парадоксально, но для некоторых типов изображений PNG оказывается меньше SVG:

• Фотореалистичные иллюстрации — сложные градиенты и текстуры в SVG описываются огромным количеством путей
• Изображения с большим количеством мелких деталей — каждая деталь требует отдельного пути
• Трассированные фотографии — автоматическая векторизация создаёт тысячи узлов

PNG эффективно сжимает такие изображения алгоритмом Deflate, тогда как SVG вынужден описывать каждую кривую математически.

Процесс растеризации SVG: как это работает

Этапы преобразования вектора в растр

1. Парсинг SVG-документа — XML-структура файла разбирается парсером. Определяются все элементы: фигуры, пути, группы, текст, стили, трансформации. Рекурсивно обрабатываются вложенные элементы и ссылки (use, defs).

2. Вычисление координатной системы — определяется viewBox и размеры холста. Если указан scale (масштаб), вычисляются итоговые пиксельные размеры. Например, SVG с viewBox="0 0 100 100" при scale=2 даст изображение 200×200 пикселей.

3. Загрузка шрифтов — для корректного рендеринга текстовых элементов загружаются системные шрифты. Если указан конкретный шрифт (font-family), выполняется поиск в системе.

4. Растеризация каждого элемента — в порядке z-index (порядка следования в документе) каждый элемент преобразуется в пиксели:

   • Пути (path) интерполируются кривыми Безье и заполняются цветом
   • Фигуры (rect, circle, ellipse) вычисляются по формулам
   • Текст рендерится с учётом шрифта, размера, межбуквенного расстояния
   • Градиенты интерполируются между цветовыми точками
   • Фильтры (blur, shadow) применяются как попиксельные операции

5. Композиция слоёв — элементы с прозрачностью (opacity) и режимами смешивания накладываются друг на друга по правилам альфа-композитинга.

6. Формирование PNG — результирующий массив пикселей RGBA сжимается алгоритмом Deflate и записывается в структуру PNG-файла.

Параметр масштаба (scale)

Ключевой параметр при растеризации — масштаб, определяющий соотношение между единицами viewBox и пикселями:

• scale=1 — одна единица SVG равна одному пикселю. Если viewBox="0 0 100 100", результат будет 100×100 пикселей
• scale=2 — двойная плотность пикселей для Retina-экранов. ViewBox 100×100 даст 200×200 пикселей
• scale=4 — четырёхкратное разрешение для печати высокого качества

Важно понимать: масштаб не влияет на качество векторных элементов — они всегда рендерятся с максимальной точностью. Масштаб определяет только плотность пиксельной сетки.

Обработка текста в SVG

Текстовые элементы SVG при растеризации требуют особого внимания:

• Системные шрифты — если шрифт установлен в системе, текст рендерится корректно
• Web-шрифты — ссылки на внешние шрифты (Google Fonts) могут не загрузиться при локальной конвертации
• Встроенные шрифты — base64-закодированные шрифты внутри SVG обрабатываются корректно
• Fallback — при отсутствии шрифта используется системный serif/sans-serif

После растеризации текст становится пикселями и теряет возможность редактирования. Если важно сохранить редактируемость текста, оставляйте изображение в формате SVG.

Сохранение прозрачности при конвертации

Как SVG хранит прозрачность

В SVG прозрачность реализуется несколькими способами:

<!-- Атрибут opacity — прозрачность всего элемента -->
<rect opacity="0.5" ... />

<!-- fill-opacity — прозрачность только заливки -->
<rect fill-opacity="0.7" ... />

<!-- stroke-opacity — прозрачность только обводки -->
<rect stroke-opacity="0.3" ... />

<!-- RGBA цвет — встроенная прозрачность -->
<rect fill="rgba(255, 0, 0, 0.5)" ... />

Все эти варианты корректно интерпретируются при растеризации и преобразуются в 8-битный альфа-канал PNG.

Прозрачный фон

SVG по умолчанию не имеет фона — пространство за элементами прозрачно. При конвертации в PNG эта прозрачность сохраняется: области без элементов получают alpha=0 (полностью прозрачный).

Это критически важно для:

• Логотипов — размещение на любом фоне без белых прямоугольников
• Иконок — интеграция в интерфейсы с разным оформлением
• Графических элементов — наложение на фотографии и фоны

Полупрозрачные элементы

Элементы с opacity < 1 сохраняют свою полупрозрачность в PNG. Мягкие тени (drop-shadow), размытые края, наложения с прозрачностью — всё это корректно переносится благодаря 8-битному альфа-каналу PNG (256 градаций прозрачности).

Оптимальные сценарии использования

Подготовка иконок для приложений

Мобильные платформы требуют иконки в растровом формате определённых размеров:

iOS:

• 180×180 — iPhone (3x)
• 167×167 — iPad Pro
• 152×152 — iPad
• 120×120 — iPhone (2x)

Android:

• 192×192 — xxxhdpi
• 144×144 — xxhdpi
• 96×96 — xhdpi
• 72×72 — hdpi
• 48×48 — mdpi

Имея SVG-иконку, можно сгенерировать все необходимые размеры PNG с идеальным качеством.

Создание favicon

Favicon (значок сайта) должен быть в формате ICO или PNG. Из SVG-логотипа создаются версии:

• 16×16 — минимальный размер для вкладки браузера
• 32×32 — стандартный favicon
• 48×48 — Windows-ярлыки
• 180×180 — Apple Touch Icon

Экспорт для социальных сетей

Каждая платформа имеет свои требования к изображениям:

SVG-графика конвертируется в PNG нужного размера для каждой платформы.

Печатная продукция

Для качественной печати требуется разрешение 300 DPI. Из SVG можно создать PNG любого размера:

• Визитка (90×50 мм) при 300 DPI: 1063×591 пикселей
• A4 постер (210×297 мм) при 300 DPI: 2480×3508 пикселей
• Баннер (1×0.5 м) при 150 DPI: 5906×2953 пикселей

Масштаб при конвертации подбирается так, чтобы итоговое разрешение соответствовало требованиям печати.

Ограничения и особенности

Потеря редактируемости

После растеризации SVG теряет свои векторные свойства:

• Нельзя изменить цвет отдельного элемента
• Нельзя отредактировать текст
• Нельзя модифицировать пути
• Нельзя добавить анимацию

PNG — это «замороженное» изображение. Сохраняйте исходный SVG для возможных изменений.

Потеря интерактивности

SVG поддерживает:

• События мыши (onclick, onmouseover)
• JavaScript-манипуляции
• CSS-анимации
• Ссылки внутри изображения

Всё это теряется при конвертации в PNG. Если интерактивность важна — используйте SVG напрямую.

Фиксация масштаба

Бесконечная масштабируемость — главное преимущество SVG. PNG фиксирует изображение в конкретном разрешении. При увеличении PNG выше исходного размера появляется размытие.

Рекомендация: создавайте PNG с запасом разрешения. Лучше уменьшить большое изображение, чем увеличивать маленькое.

Зависимость от шрифтов

Текст в SVG рендерится шрифтами системы. Если на сервере конвертации нет конкретного шрифта, текст отобразится fallback-шрифтом, что может исказить дизайн.

Решения:

• Преобразуйте текст в пути (text-to-path) в векторном редакторе перед конвертацией
• Используйте распространённые системные шрифты
• Встройте шрифт в SVG через base64

Альтернативные форматы для экспорта SVG

SVG в JPG

Если прозрачность не нужна, JPG даст меньший размер файла. Однако JPG использует сжатие с потерями, что может создать артефакты на чётких границах графических элементов.

SVG в WebP

WebP — современный формат с хорошим балансом качества и размера. Поддерживает прозрачность, меньше PNG. Однако совместимость WebP ниже, чем у PNG.

SVG в PDF

Для печати PDF сохраняет векторную природу SVG без растеризации. Однако PDF сложнее использовать в веб-контексте.

Сохранение в SVG

Если целевая платформа поддерживает SVG — оставьте формат без изменений. SVG обеспечивает минимальный размер и бесконечную масштабируемость.

Рекомендации по подготовке SVG

Оптимальная структура файла

• Используйте viewBox — определяет координатную систему независимо от размера
• Минимизируйте количество путей — объединяйте где возможно
• Удалите скрытые элементы — они всё равно не попадут в PNG
• Оптимизируйте градиенты — сложные градиенты увеличивают время рендеринга

Проверка перед конвертацией

1. Откройте SVG в браузере — так он будет выглядеть после растеризации
2. Проверьте отображение текста — все шрифты должны загрузиться
3. Убедитесь в корректности прозрачности — фон должен быть действительно прозрачным
4. Оцените детализацию — мелкие элементы могут потеряться при малом масштабе

Выбор масштаба

• Для экрана — scale=1 или scale=2 для Retina
• Для печати — рассчитайте из требуемого DPI и физического размера
• Для иконок — точный размер в пикселях согласно спецификации платформы
• Для архива — с запасом, scale=4 обеспечит качество для любых целей