Конвертация SVG в PNG с прозрачным фоном

Практичный рабочий процесс для экспорта чистых прозрачных PNG-ресурсов из SVG для UI, документации и маркетинговых материалов.

Экспорт прозрачного PNG часто не удаётся из-за несовместимости viewBox, скрытых фоновых слоёв или сглаживания краёв. Это руководство поможет получить стабильный результат.

1) Подготовьте SVG перед экспортом

  • Сохраните корректный viewBox и удалите невидимые увеличенные пути, расширяющие холст.
  • Удалите жёстко закодированные белые фоновые слои, если они не требуются.
  • По возможности выравнивайте штрихи и формы по пиксельной сетке для уменьшения размытых краёв.

2) Настройте параметры экспорта

  • Используйте режим прозрачного фона и проверьте альфа-пиксели вプレвью.
  • Выберите масштаб 1x/2x/3x в зависимости от целевых экранов, чтобы избежать.post-export resizing.
  • Поддерживайте стабильные соглашения об именах файлов, чтобы дизайн и разработка могли безопасно сопоставлять ресурсы.

3) Проведите быстрый контроль качества

  • Тестируйте на светлом и тёмном фоне для обнаружения скрытых ореолов.
  • Проверьте обрезку краёв, добавив временный отступ вокруг артборда.
  • Сравните размеры вывода с требованиями дизайна перед отправкой.

Часто задаваемые вопросы о прозрачном PNG

Почему у моего PNG всё ещё есть белый прямоугольник?
Ваш исходный SVG, вероятно, содержит фоновый прямоугольник или фон экспорта был установлен как сплошной цвет. Удалите слой и экспортируйте с прозрачным фоном.
Как избежать размытых краёв?
Выравнивайте штрихи по пикселям, избегайте дробных преобразований и экспортируйте с подходящим масштабом как 2x для Retina UI.
Следует ли оптимизировать до или после экспорта PNG?
Сначала оптимизируйте SVG для очистки разметки и исправления проблем с геометрией, затем экспортируйте PNG. Это обычно даёт более стабильный результат.
Всегда ли прозрачный PNG лучше JPG?
Для значков и UI-наложений — да. Если прозрачность не нужна и требуется меньший размер для фотографий, JPG может быть лучше.