PNG в Android Vector Drawable: проверка импорта

Android Studio не трассирует PNG в векторные контуры. Его инструмент Vector Asset Studio импортирует SVG или PSD и преобразует поддерживаемую геометрию в VectorDrawable XML. Поэтому надёжный процесс работы с PNG состоит из двух этапов: сначала трассируйте пиксели в настоящий SVG, затем импортируйте этот SVG в Android Studio.

Прямой конвертер PNG в VectorDrawable может объединять оба этапа. Это может быть удобно для простой иконки, но проверки остаются теми же. Убедитесь, что результат содержит контуры, соответствует исходнику, использует нужную область просмотра и не зависит от возможностей, которые импортёр Android не может представить.

Для интерфейса Flutter следуйте процессу подключения SVG-ресурсов во Flutter. В нём SVG объявляется и отображается через flutter_svg, а не преобразуется в нативный Android VectorDrawable XML.

Для проекта .NET MAUI используйте список проверок графических ресурсов MAUI, чтобы проверить исходник, результат сборки и размер отображения. Прежде чем применять инструкции по импорту нативного Android VectorDrawable, следуйте процессу обработки изображений своего проекта.

Краткий порядок действий

1. Начните с чистого PNG, похожего на иконку, а не с фотографии или текстуры.
2. Трассируйте его в SVG и убедитесь, что файл содержит редактируемые контуры, а не встроенный PNG.
3. Удалите лишние фигуры и упростите чрезмерное количество узлов, сохранив силуэт.
4. Импортируйте SVG через Vector Asset Studio в Android Studio.
5. Проверьте в созданном XML область просмотра, контуры, заливки, обводки, градиенты и обрезку.
6. Протестируйте drawable в реальном размере на самой старой версии Android, которую поддерживает ваше приложение.

Выберите прямой конвертер или путь через SVG

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

Путь с промежуточным SVG обычно легче проверить. Вы можете сравнить трассировку с PNG, изучить отдельные фигуры, исправить отверстия и сократить лишнюю геометрию, прежде чем Android Studio снова преобразует файл.

Прямые конвертеры сами по себе не плохи. Например, SVG2Vector сейчас заявляет преобразование PNG в VectorDrawable наряду с SVG и другими входными форматами. Рассматривайте его XML как кандидат, а не готовый ресурс: откройте предпросмотр в Android Studio, проверьте контуры и выполните те же проверки на устройствах, что описаны ниже (SVG2Vector).

Этап 1: превратите PNG в настоящие SVG-контуры

Начните с самого чистого доступного исходника. Плоские иконки с чёткими краями и небольшой палитрой хорошо подходят для этой задачи. Фотографии, мягкие тени, свечение и текстура могут дать множество мелких фигур, не превращаясь при этом в полезный ресурс для Android.

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

Трассируйте пиксели

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

Проверьте:

• чистый внешний силуэт;
• сохранность отверстий и пустых пространств;
• ожидаемое количество цветовых областей;
• отсутствие случайных точек и фонового прямоугольника;
• плавные кривые без плотных цепочек точек;
• viewBox, который правильно обрамляет рисунок.

Расширение .svg не доказывает, что трассировка выполнена. Согласно спецификации встроенного содержимого W3C, SVG может содержать растр через элемент <image>. Если рисунок выделяется как один прямоугольник или при сильном увеличении видны пиксели, воспользуйтесь диагностикой встроенного растра, прежде чем переходить в Android Studio.

Упрощайте только там, где это полезно

Сложность контуров важна, поскольку Android должен разобрать и отрисовать созданную геометрию. Универсального целевого количества узлов нет. Простую кривую с десятками плотно расположенных точек стоит проверить; неровному краю иллюстрации действительно может требоваться больше узлов.

Удалите отдельные фрагменты и упростите очевидные цепочки точек, сравнивая результат с исходником. Если очистка меняет углы или закрывает небольшие отверстия, отмените её. Руководство по SVG с чрезмерным количеством узлов объясняет, как отличить полезные детали от лишней геометрии.

Два преобразования, три проверки

Этап 2: импортируйте SVG в Android Studio

В текущем процессе Vector Asset Studio принимает локальный SVG или PSD, показывает предпросмотр и создаёт векторный drawable в XML (Android Developers).

1. В окне Project нажмите правой кнопкой на папку res.
2. Выберите New > Vector Asset.
3. В качестве типа ресурса выберите Local file (SVG, PSD).
4. Выберите SVG и проверьте предпросмотр на ошибки и видимые изменения.
5. Задайте имя ресурса и нужный размер.
6. Нажмите Next, подтвердите место сохранения и выберите Finish.

Созданный XML-ресурс размещается среди drawable-ресурсов приложения. Сохраните проверенный SVG как редактируемый оригинал. Если позже понадобится изменить внешний вид, отредактируйте SVG и заново создайте drawable, вместо того чтобы вручную поддерживать две независимые версии.

Что сохраняется при импорте SVG в VectorDrawable?

VectorDrawable не является полноценным средством отображения SVG. Vector Asset Studio поддерживает определённое подмножество возможностей, поэтому SVG может правильно выглядеть в браузере, но измениться при импорте.

Эти ограничения взяты из текущей таблицы совместимости Vector Asset Studio. Импортёр также указывает, что поддерживает только обводки по центру. Если исходник использует внутреннюю или внешнюю обводку, перед импортом превратите её в фигуру с заливкой или перерисуйте край.

Для градиентов нужна дополнительная проверка версии. В документации VectorDrawable API значения в виде градиента или списка цветов состояний для fillColor и strokeColor описаны начиная с API level 24. Варианты fillType evenOdd и nonZero также описаны начиная с API level 24 (справочник VectorDrawable API). Если приложение поддерживает более старые версии, проверьте конкретный способ обеспечения совместимости в вашей сборке, не полагаясь только на предпросмотр Android Studio.

Прочитайте созданный XML перед приёмкой

Вам не нужно писать VectorDrawable XML вручную, но быстрая проверка структуры выявляет многие проблемы импорта.

Ширина, высота и область просмотра

Корневой элемент <vector> разделяет размер отображения и координаты рисунка:

• android:width и android:height задают размеры drawable по умолчанию, обычно в dp;
• android:viewportWidth и android:viewportHeight задают пространство координат, которое используют контуры.

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

Контуры и оформление

Каждый <path> содержит android:pathData, команды которого в целом следуют тому же синтаксису контуров, что и атрибут d в SVG. Проверьте fillColor, strokeColor, strokeWidth, окончания и соединения линий, а также fillType, если они присутствуют.

Не оптимизируйте файл удалением незнакомых команд контуров. Сначала сравните предпросмотр с исходником, а затем упрощайте редактируемый SVG, где форму легче проверить.

Группы и обрезка

Группы могут содержать значения смещения, масштаба, поворота и точки поворота. <clip-path> ограничивает видимую геометрию. Если результат смещён или область под маской исчезла, проверьте иерархию групп и сравните её с преобразованиями и структурой обрезки исходного SVG.

Протестируйте drawable там, где его использует приложение

Предпросмотр импорта доказывает, что Android Studio смог разобрать файл. Он не доказывает, что ресурс будет правильно работать во время выполнения.

Используйте этот список приёмочных проверок:

• В обычном размере интерфейса drawable соответствует предполагаемому силуэту PNG.
• Отверстия, внутрибуквенные просветы и перекрывающиеся области сохранены.
• Сплошные заливки и обводки имеют нужные цвета.
• Градиенты правильно отображаются на самой старой поддерживаемой версии Android.
• Область просмотра сохраняет нужные отступы и пропорции.
• Иконка остаётся разборчивой в светлой и тёмной темах, отключённом состоянии и при тонировании, используемых приложением.
• XML не содержит случайных фрагментов или явно чрезмерного объёма данных контуров.
• Ресурс проверен в настоящем компоненте, а не только в предпросмотре импорта.
• Исходный PNG и редактируемый SVG-оригинал сохранены в архиве.

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

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

Когда стоит оставить PNG

VectorDrawable лучше всего подходит для простых иконок и иллюстраций. Рекомендации Android предупреждают, что подробную графику, включая многие изображения запуска приложений, лучше хранить в растре. В них также указано, что начальная загрузка векторного drawable может быть дороже загрузки растрового изображения, и рекомендуется ограничивать размер векторных ресурсов 200 на 200 dp или меньше, чтобы избежать долгой отрисовки (Android Developers).

Сохраните растр или переработайте рисунок, если исходник зависит от:

• фотографических деталей;
• мягкой текстуры, размытия или сложных теней;
• множества крошечных цветовых областей;
• неподдерживаемого эффекта, определяющего внешний вид;
• настолько плотной геометрии, что XML трудно проверять и поддерживать.

Цель не в том, чтобы заменить каждый PNG. Используйте VectorDrawable там, где масштабируемая геометрия контуров делает ресурс Android меньше, чётче или удобнее для настройки темы, не превращая подробную картинку в дорогую груду контуров.

Как это работает с PerfectVector

PerfectVector выполняет первое преобразование. Для подходящей иконки преобразуйте PNG в SVG, сравните трассированные фигуры с исходником и скачайте SVG, который хотите сохранить как редактируемый оригинал. Затем импортируйте файл через Vector Asset Studio и проверьте созданный XML.

Оценивайте всю цепочку:

1. Сохранила ли трассировка исходный силуэт и отверстия?
2. Редактируются ли SVG-фигуры и нет ли в них встроенного растра?
3. Импортирует ли Android Studio нужные заливки, градиенты, обрезку и преобразования?
4. Правильно ли drawable отображается в реальном размере и на минимальном уровне API?

Чистый SVG улучшает передачу файла, но не заставляет работать неподдерживаемые возможности Android. Упростите рисунок или оставьте PNG, если целевой формат не может точно воспроизвести внешний вид.

Частые вопросы

Может ли Android Studio преобразовать PNG напрямую в VectorDrawable? Нет. Текущий Vector Asset Studio импортирует локальные SVG или PSD, но не PNG. Сначала трассируйте PNG в настоящий SVG либо используйте прямой конвертер и проверьте полученный XML в Android Studio.

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

Работают ли SVG-градиенты в Android VectorDrawable? Vector Asset Studio поддерживает линейные, радиальные и угловые градиенты, но поддержка во время выполнения зависит от созданного XML и вашей стратегии поддержки версий Android. В VectorDrawable API градиентные цвета заливки и обводки описаны начиная с API level 24, поэтому проверьте ресурс на самой старой версии, которую поддерживает приложение.

Почему после импорта изменились отверстия, маски или текст? Импортёр поддерживает ограниченное подмножество SVG. Правила заливки требуют проверки с учётом версии, обрезка ограничена, а текст не поддерживается. Превратите нужный текст в контуры, упростите структуру обрезки и сравните предпросмотр Android с SVG перед приёмкой drawable.

Нужно ли превращать каждый PNG в Android-приложении в VectorDrawable XML? Нет. Лучше всего подходят простые иконки и иллюстрации. Сохраняйте фотографии, текстурные изображения, сложные эффекты и чрезмерно подробные рисунки в растре, если только осознанная перерисовка не даёт более простую геометрию контуров.

Источники

1. Android Developers — добавление векторной графики для разных плотностей экрана — Описывает импорт SVG и PSD через Vector Asset Studio, поддерживаемое подмножество SVG, ограничения производительности и создаваемые drawable-ресурсы.
2. Android Developers — справочник VectorDrawable API — Определяет XML-атрибуты vector, path, group и clip-path, включая область просмотра, оформление, правила заливки и зависимость от уровня API.
3. W3C — встроенное содержимое SVG — Подтверждает, что SVG может содержать растр через элемент image.
4. Руководство Inkscape — трассировка изображения — Объясняет разницу между трассировкой растровых пикселей и работой с исходным растром.
5. SVG2Vector — преобразование PNG в VectorDrawable — Представляет текущий вариант прямого конвертера, рассмотренный при сравнении процессов.

---

Готовы проверить иконку для выпуска? Преобразуйте PNG в SVG, проверьте контуры и импортируйте проверенный файл в Android Studio. Оставляйте drawable только после проверки области просмотра, цветов, отверстий и отображения во время выполнения.