В этой статье
Александр
Чтобы преобразовать SVG в PNG, импортируйте файл в редактор, выберите нужный объект или фрейм, задайте формат PNG и размер экспорта. Результат будет растровым: важно заранее определить, сколько пикселей нужно в готовом изображении и должен ли фон оставаться прозрачным.
Pixso поддерживает работу с векторной графикой и экспорт элементов интерфейса, поэтому подготовку изображения можно выполнить рядом с макетом. Ниже — последовательность действий, расчёт размера и способы найти причину размытых краёв или неожиданного фона.
1. В чем разница между SVG и PNG?
SVG описывает графику с помощью элементов документа: среди них могут быть векторные контуры, текст и встроенные растровые изображения. PNG хранит пиксели фиксированного размера и может содержать прозрачность. Если внутри SVG находится маленькая фотография, увеличение экспорта не добавит ей новых деталей.
| Характеристика | SVG (Вектор) | PNG (Растр) |
|---|---|---|
| Тип данных | Элементы XML: контуры, текст и изображения | Растровое изображение (пиксели) |
| Масштабируемость | Векторные контуры масштабируются; встроенный растр имеет собственное разрешение | Ограниченная (появляется «зерно» при зуме) |
| Редактируемость | Инструменты «Перо» и узловые точки | Кисти, фильтры и ластик |
| Сфера применения | Иконки, логотипы, схемы | Изображения фиксированного размера, в том числе с прозрачностью |
2. Зачем дизайнеру конвертировать SVG в формат PNG?
Хотя векторная графика идеальна для гибкости, реальный дизайн интерфейсов часто требует стабильного формата для финальных ассетов, чтобы избежать ошибок рендеринга на специфических платформах или в старых браузерах.
- Широкая совместимость: PNG поддерживается многими устройствами и CMS; проверьте требования целевой платформы.
- Защита от визуальных багов: PNG фиксирует результат рендеринга, но ошибки шрифта или импорта нужно исправить до экспорта: они тоже попадут в файл.
- Удобство в воркфлоу: Растровые файлы проще использовать для быстрой отправки превью клиентам в мессенджерах.
- Анимация: Отдельные PNG можно использовать как кадры или спрайты, если этого требует проект. Обычный экспорт одного PNG не превращает SVG-анимацию в готовую анимацию.
3. Популярные методы: как конвертировать SVG в PNG
Выбор метода зависит от ваших целей: онлайн-сервисы удобны для разовых задач, локальный софт (AI, Inkscape) — для сложной подготовки к печати, а редактор макетов Pixso удобен, когда изображение уже используется в интерфейсе и его нужно подготовить рядом с остальными элементами.
4. Инструкция: как конвертировать SVG в PNG в Pixso
Сначала попробуйте экспортировать один объект. Проверьте его содержимое и границы; затем тем же способом подготовьте остальные изображения. Для каждого файла должен быть понятен целевой размер.
- Шаг 1: Доступ к инструменту. Перейдите в веб-версию Pixso и откройте новый дизайн-файл.
- Шаг 2: Импорт. Просто перетащите SVG-файлы с вашего компьютера прямо на холст Pixso.
- Шаг 3: Экспорт. Выделите объекты, в правой панели Export нажмите «+» и выберите формат PNG.
- Шаг 4: Масштабирование. Выберите масштаб под необходимый размер файла и нажмите «Экспорт». Например, объект 24×24 px при 2× даёт PNG 48×48 px. Больший множитель не исправит низкое качество растровой картинки, встроенной в SVG.
5. Как выбрать размер PNG и прозрачный фон
Допустим, иконка отображается на сайте в области 24×24 CSS px. Если разработчику нужен вариант плотностью 2×, экспортируйте 48×48 пикселей и сохраните отображаемый размер 24×24. Если после этого растянуть файл до 96×96 CSS px, края могут снова выглядеть размытыми.
| Размер объекта в макете | Масштаб экспорта | Размер PNG |
|---|---|---|
| 24×24 px | 1× | 24×24 пикселя |
| 24×24 px | 2× | 48×48 пикселей |
| 24×24 px | 3× | 72×72 пикселя |
| 300×180 px | 2× | 600×360 пикселей |
Для прозрачного результата проверьте не только формат, но и содержимое выбранного объекта. Белый прямоугольник или заливка фрейма останутся белыми пикселями после экспорта. Если фон не нужен, уберите его из экспортируемой области и откройте готовый файл на светлой и тёмной подложке. Белый фон программы просмотра сам по себе не доказывает, что прозрачность потеряна.
Выбор объекта влияет и на края изображения. Экспорт выделенного контура может дать иные границы, чем экспорт фрейма с внутренними отступами. Для набора иконок задайте одинаковую область и положение знака внутри неё; иначе при одинаковых внешних размерах картинки будут визуально прыгать в кнопках.
6. Что делать, если результат отличается от SVG
| Что видно в PNG | Что проверить первым | Следующее действие |
|---|---|---|
| Размытые края | Фактический размер PNG и размер его отображения | Экспортировать из исходного вектора в нужном размере, не увеличивать готовый PNG |
| Изменился текст | Загружен ли нужный шрифт и совпадают ли переносы | Исправить шрифт до экспорта; для неизменяемой надписи рассмотреть перевод текста в контуры |
| Появился белый прямоугольник | Есть ли фоновый слой или заливка фрейма | Изменить экспортируемую область и проверить прозрачность |
| Обрезана тень или край | Границы фрейма, обрезка содержимого и эффекты | Оставить нужный запас вокруг рисунка |
| Пропала часть изображения | Внешние ссылки, маски и особенности исходного SVG | Сравнить импорт с исходником и исправить расхождения перед экспортом |
Сохраните редактируемый SVG и исходный дизайн-файл: PNG удобен для доставки, но не заменяет исходник. Перед передачей разработчику укажите отображаемый размер, плотность, наличие фона и назначение файла. Названия вроде search-24@2x.png помогают отличать варианты, но сами по себе не задают их размер в интерфейсе.
После экспорта поместите PNG в тот же макет рядом с исходной иконкой и сравните контуры, текст, фон и отступы при нужном размере. Такой контроль быстрее выявляет ошибку, чем проверка одного большого превью. Когда результат совпадает с задачей, передайте файл вместе с указанными параметрами использования.
