Android Vector to SVG: как конвертировать Vector Drawable в SVG

Конвертация Android Vector Drawable в SVG чаще всего требуется, когда иконку из проекта Android нужно открыть в Figma, Illustrator или передать дизайнеру — а исходный SVG-файл утерян. Прямой экспорт из Android Studio не предусмотрен: IDE умеет импортировать SVG в Vector Drawable, но обратная операция в интерфейсе отсутствует, поэтому приходится использовать сторонние конвертеры или ручной перенос данных.

Хорошая новость в том, что оба формата построены на одинаковой логике: фигуры описываются командами пути pathData, которые почти напрямую переносятся в атрибут d элемента <path> в SVG. Ниже разберём рабочие способы конвертации, ограничения каждого метода и типичные ошибки.

Чем Vector Drawable отличается от SVG

Оба формата описывают векторную графику, но синтаксис и набор возможностей различаются. Vector Drawable — это XML-файл с корневым элементом <vector>, где размеры задаются через android:viewportWidth и android:viewportHeight, а контуры — через элементы <path> с атрибутом android:pathData. В SVG размер холста определяется атрибутом viewBox, а пути — элементами <path d="...">.

Ключевые отличия, которые влияют на конвертацию:

• 📐 Система координат — viewport в Vector Drawable обычно напрямую становится viewBox в SVG, но нужно проверить совпадение значений.
• 🎨 Цвета — android:fillColor превращается в fill, android:strokeColor — в stroke; ссылки на ресурсы вида @color/... придётся заменить на HEX-значения.
• 🧩 Группы и трансформации — элементы <group> с rotate/scale/translate переносятся в SVG-группы с атрибутом transform, но синтаксис отличается.
• ⚡ Неподдерживаемые функции — градиенты, clip-path и анимации (AnimatedVectorDrawable) конвертируются не всеми инструментами или не конвертируются вовсе.

⚠️ Внимание: если Vector Drawable ссылается на цвета из ресурсов (@color/primary) или использует темные атрибуты (?attr/colorControlNormal), автоматический конвертер не сможет разрешить такие ссылки. Перед конвертацией замените их на конкретные HEX-коды цветов.

Способ 1: онлайн-конвертеры

Самый быстрый вариант — вставить XML-код в онлайн-конвертер. Известные инструменты вроде vd.flo.at и подобных сервисов принимают содержимое XML-файла и выдают готовый SVG для скачивания. Работает это так: вы открываете свой .xml из папки res/drawable, копируете весь код, вставляете в поле конвертера и получаете SVG.

Метод удобен для одиночных иконок, но у него есть ограничения. Конвертеры по-разному обрабатывают группы, градиенты и обрезку (clip-path), поэтому результат всегда стоит открыть в браузере или графическом редакторе и сверить с оригиналом. Также не загружайте в сторонние сервисы графику, содержащую коммерческую тайну или неопубликованный дизайн.

Способ 2: ручная конвертация через pathData

Если иконка простая — один-два пути без групп — ручной перенос занимает пару минут и даёт максимально чистый результат. Суть в том, что строка android:pathData копируется без изменений в атрибут d, а остальные атрибуты переписываются по таблице соответствия.

Минимальный шаблон SVG выглядит так:

<svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24"
viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
fill="#000000"/>
</svg>

Обратите внимание на атрибут xmlns в корневом элементе — без него часть редакторов и валидаторов не распознает файл как SVG. Размеры width и height можно задать равными viewport, а можно опустить: тогда размер будет управляться из CSS или контейнера.

Способ 3: скрипты и CLI-утилиты для пакетной конвертации

Когда нужно конвертировать не одну иконку, а целый набор из res/drawable, ручной метод не масштабируется. Для пакетной обработки существуют open-source утилиты и скрипты (например, на Python или Node.js), которые парсят XML и генерируют SVG-файлы. Их легко найти на GitHub по запросу «vector drawable to svg».

Типовая логика такого скрипта повторяет ручной метод: читается корневой элемент <vector>, извлекаются viewport, группы и пути, затем строится SVG-дерево. Перед запуском чужого скрипта проверьте, поддерживает ли он нужные вам конструкции — особенно <group> с трансформациями и clip-path, иначе часть иконок конвертируется с искажениями.

Почему группы с трансформациями — проблемное место

В Vector Drawable поворот группы задаётся вокруг pivot-точки атрибутами android:rotation, android:pivotX и android:pivotY. В SVG тот же эффект записывается как transform="rotate(угол cx cy)". Если конвертер игнорирует pivot, фигура повернётся вокруг начала координат и «уедет» со своего места. Всегда проверяйте иконки с повёрнутыми элементами после автоматической конвертации.

Обратная задача: из SVG в Vector Drawable

Нередко нужен и обратный путь — вставить SVG в Android-проект. Здесь всё проще: в Android Studio есть встроенный инструмент Vector Asset Studio. Откройте File → New → Vector Asset, выберите Local file (SVG, PSD), укажите файл и задайте размер — IDE сгенерирует готовый XML в res/drawable.

Перед импортом желательно упростить SVG: растровые вставки, фильтры, маски и текстовые элементы Vector Drawable не поддерживает. Если импортированная иконка выглядит неправильно, причина почти всегда в неподдерживаемых конструкциях исходника — откройте SVG в редакторе и преобразуйте всё в простые контуры (в Inkscape это Path → Object to Path).

Типичные ошибки и их решение

Даже при корректном переносе результат иногда отображается не так, как оригинал. Разберём частые симптомы.

Иконка повёрнута или смещена. Возможная причина — проигнорированные трансформации групп или pivot-точка. Проверьте, есть ли в исходном XML элементы <group> с атрибутами android:rotation, android:scaleX или android:translateX, и перенесите их в transform вручную.

Фигура залита не тем цветом или «дырявая». Проверьте атрибут android:fillType: значение evenOdd в SVG соответствует fill-rule="evenodd". Если конвертер его потерял, пересекающиеся контуры будут заливаться иначе.

SVG не открывается в редакторе. Убедитесь, что присутствует пространство имён xmlns="http://www.w3.org/2000/svg" и что в pathData нет символов, специфичных для Android (например, ссылок на ресурсы).

⚠️ Внимание: файлы AnimatedVectorDrawable (с элементами <animated-vector> и <aapt:attr>) нельзя напрямую сконвертировать в статичный SVG — анимация будет потеряна. Конвертируйте только базовый Vector Drawable, на который ссылается анимация.

FAQ: частые вопросы

Можно ли экспортировать Vector Drawable в SVG прямо из Android Studio?

Нет, встроенной функции обратного экспорта в Android Studio нет — IDE поддерживает только импорт SVG в Vector Drawable. Для обратной конвертации используйте онлайн-конвертеры, скрипты или ручной перенос pathData.

Совпадает ли синтаксис pathData и SVG-атрибута d?

Да, команды путей (M, L, C, Z и остальные) в Vector Drawable заимствованы из SVG, поэтому строка pathData обычно переносится в атрибут d без изменений. Исключения встречаются редко и касаются нестандартных сокращений.

Что делать, если в Vector Drawable используются градиенты?

Градиенты в Vector Drawable задаются внутри <aapt:attr name="android:fillColor"> с элементом <gradient>. Не все конвертеры их поддерживают. Ручной путь: перенесите градиент в SVG как <linearGradient> в секции <defs> и сошлитесь на него через fill="url(#id)".

Почему после конвертации иконка стала чёрно-белой?

Скорее всего, цвета были заданы ссылками на ресурсы (@color/...) или атрибуты темы, которые конвертер не смог разрешить. Откройте проект, найдите значения этих цветов в res/values/colors.xml и подставьте HEX-коды напрямую.

Можно ли конвертировать сразу всю папку drawable?

Да, для этого подходят CLI-утилиты и скрипты с GitHub, которые обрабатывают каталог XML-файлов пакетно. После пакетной конвертации обязательно выборочно проверьте иконки с группами и трансформациями — они чаще всего конвертируются с ошибками.