PerfectVector
Автор: Irene Kim5 мин чтения

Векторизация изображения на Android: получите настоящий SVG

Преобразуйте фото или рисунок в SVG на телефоне Android, проверьте наличие настоящих контуров и не путайте стандартный SVG с XML Android VectorDrawable.

На этой странице

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

Есть и ловушка в названиях: стандартный SVG для браузеров и дизайнерских инструментов — не тот же файл, что XML VectorDrawable Android для приложений.

Процесс на телефоне
  • Выберите чёткое изображение с простым объектом и чистым фоном.
  • Загрузите его в браузерный векторизатор и проверьте предпросмотр.
  • Скачайте SVG в файлы или папку загрузок телефона.
  • Откройте в целевом приложении и проверьте контуры, слои и масштаб.
  • Для разработки Android-приложения конвертируйте совместимый SVG через Vector Asset Studio вместо переименования файла.

Сначала решите, какой векторный файл нужен

Большинству людей, ищущих решение на телефоне, нужен обычный SVG для Cricut, печати, передачи логотипа или дальнейшего редактирования. Это векторный документ веб-стандарта.

Разработчикам Android может вместо этого требоваться ресурс VectorDrawable. Документация Google по Vector Asset Studio объясняет, что Android Studio может импортировать поддерживаемую графику SVG или PSD и создать VectorDrawable. Форматы близки по назначению, но не взаимозаменяемы. Стандартный SVG может использовать возможности, которых VectorDrawable не поддерживает.

Если файл предназначен для дизайнерского приложения или программы резки, создайте SVG. Если он пойдёт в ресурсы Android-приложения, сначала создайте или получите SVG, затем выполните конвертацию в Android Studio и проверьте результат.

Векторизуйте изображение в браузере Android

  1. Найдите на телефоне самый крупный и чистый исходник. Не используйте снимок экрана, если доступен оригинальный файл.
  2. Обрежьте фон и выровняйте сфотографированную иллюстрацию.
  3. Откройте браузерный конвертер, например векторизатор изображений PerfectVector.
  4. Загрузите изображение и проверьте восстановленные формы при большом увеличении.
  5. Сократите лишние цвета или области, если инструмент даёт такие настройки.
  6. Скачайте SVG, затем найдите его в списке загрузок браузера или файловом менеджере телефона.

Браузерный способ позволяет оценить результат до выбора приложения. Adobe Capture — ещё один мобильный вариант; Adobe описывает его как способ превращения мобильных фотографий в дизайнерские материалы, включая формы. Если вы уже используете Infinite Design, его встроенная функция Vectorize и проверки SVG предлагают другой способ. Какой бы инструмент вы ни выбрали, оценивайте экспортированный файл, а не маркетинговое название.

Концептуальный процесс на телефоне Android: проверка изображения, преобразование в контуры, сохранение в векторный файл и выбор между стандартным SVG и ресурсом приложения
Концептуальный мобильный процесс, а не снимок Android или конвертера: создайте SVG, проверьте его контуры и отправьте в правильное место.

Проверьте, что SVG действительно пригоден

Контейнер SVG может встраивать растровое изображение, поэтому чёткое отображение в браузере само по себе не является полным доказательством. Выполните практические проверки:

  • Откройте в целевом приложении. Формы должны импортироваться как векторные объекты или контуры, а не одна плоская картинка.
  • Увеличьте масштаб. Границы контуров должны оставаться чёткими, но помните, что внутри оболочки SVG может находиться встроенный растр.
  • Проверьте слои или объекты. Плоский логотип должен иметь разумное число форм, а не тысячи фрагментов.
  • Проверьте маленькие отверстия и пустые пространства. Просветы букв часто первыми теряются при трассировке.
  • Подтвердите физический размер. Программы резки и печати могут по-разному интерпретировать размеры документа.

Если можете посмотреть файл как текст, настоящая трассированная иллюстрация обычно содержит элементы path. Элемент image, ссылающийся на встроенные пиксельные данные, предупреждает, что контейнер всё ещё может содержать растр. Редактировать код не нужно; проверки объектов в целевом приложении обычно достаточно.

Что хорошо конвертируется на телефоне

Ограничивающий фактор — качество исходника, а не оборудование телефона.

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

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

SVG и VectorDrawable

Не переименовывайте SVG в XML и не помещайте его в Android-проект. Используйте Vector Asset Studio или другой намеренный способ конвертации. После преобразования проверьте ресурс в размерах и темах, которые будет использовать приложение. Сложные фильтры SVG, маски, текст и другие возможности может потребоваться упростить до импорта.

Для задач вне разработки остановитесь на стандартном SVG. Для Cricut, вывесок, печати и браузера обычно нужен этот файл, а не XML-ресурс Android.

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

Можно ли векторизовать изображение на Android без приложения? Да. Браузерный векторизатор может загрузить изображение, создать предпросмотр и скачать стандартный SVG. Сохраните его на телефон и проверьте в приложении, где собираетесь использовать.

Какой тип изображения на Android лучше для векторизации? Используйте самый крупный и чёткий доступный PNG, JPG или WebP. Плоская графика с ясными границами и небольшим числом цветов конвертируется чище, чем фотография с тенями или маленький снимок экрана.

Как узнать, что SVG содержит настоящие векторные контуры? Импортируйте его в приложение, работающее с векторами, и проверьте, выделяются ли формы как объекты или контуры. Увеличение помогает, но SVG может встраивать растр, поэтому проверка объектов даёт более сильное подтверждение.

SVG — то же самое, что Android VectorDrawable? Нет. SVG — веб-формат векторов; VectorDrawable — XML-ресурс Android с другим набором поддерживаемых функций. Vector Asset Studio в Android Studio может конвертировать совместимую графику SVG в VectorDrawable.

Источники

  1. Android Developers — Добавление векторной графики для разных плотностей экрана — Официальные рекомендации по Vector Asset Studio и импорту VectorDrawable.
  2. Android Developers — Как устроен VectorDrawable — Техническое объяснение векторного формата ресурсов Android от разработчика платформы.
  3. Adobe — Capture — Официальное описание превращения мобильных фотографий в дизайнерские материалы и формы.
  4. PerfectVector — Изображение в вектор — Описание браузерной векторизации, предпросмотра и скачивания SVG от самого сервиса.

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

Ещё из блога

Превратите изображение в
чистые редактируемые контуры