В предыдущей части мы обсудили библиотеку BetterVectorDrawable, реализующую VectorDrawable для Android 4.0+.
В этой части речь пойдет о преобразовании изображений из SVG в vector drawable XML.

Когда Андроид читает XML-ресурсы, он игнорирует атрибуты, которые не поддерживаются текущим устройством. Это означает, что неподдерживаемые атрибуты в vector drawable XML придется продублировать в пространстве имен http://schemas.android.com/apk/res-auto, чтобы у BetterVectorDrawable была возможность их прочитать. Например:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:better="http://schemas.android.com/apk/res-auto"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100"
    better:viewportHeight="100"
    better:viewportWidth="100">
…

При этом нужно дублировать только неподдерживаемые атрибуты (список можно посмотреть здесь; см. атрибуты без префикса android:).
К счастью, все это для нас проделывает конвертер и нам не нужно даже задумываться об этом.

SVG to VectorDrawable Converter


Этот конвертер позволяет создавать vector drawable ресурсы как для Android 5.0+, так и для библиотеки BetterVectorDrawable. Это контролируется с помощью аргумента командной строки.

Конвертер является кроссплатформенным консольным приложением: его можно запустить на Windows или OS X. Для его работы требуется установить зависимости, об этом речь пойдет позже. Сам конвертер распространяется в виде архива с исполняемым файлом, который можно скачать здесь.

Архив нужно распаковать и, открыв консоль на Windows (терминал на OS X), сменить текущую директорию на директорию с конвертером.
Команда, запускающая конвертацию, выглядит так:

[mono] svg2vd.exe -i in_dir/\* -o out_dir [--lib BetterVectorDrawable]

Опциональные параметры указаны в квадратных скобках (хотя используются без скобок):
  • mono следует указать, если Вы запускаете конвертер на OS X
  • --lib BetterVectorDrawable следует указать, если Вы хотите, чтобы в выходных XML были продублированы неподдерживаемые атрибуты, т.е. сконвертировать SVG в vector drawable XML для библиотеки BetterVectorDrawable, иначе конвертер создаст vector drawable ресурсы для Android 5.0+.

Остальные параметры, думаю, понятны и так; аргумент --help выводит их описания.

Установка зависимостей


Если у Вас Windows


Microsoft .NET Framework


Если у Вас Windows 8 или выше, то этот пункт можно пропустить.
В системе должен быть установлен .NET Framework 4.5+. Проверить версию установленного .NET Framework можно согласно этой инструкции. Скачать .NET Framework 4.5 можно здесь.

Inkscape


Inkscape – это бесплатный редактор векторной графики с открытым кодом. Установка под Windows не отличается от обычной установки программы. Скачать можно здесь.

Если у Вас OS X


Понадобиться OS X 10.7 или лучше.

Mono


Скачать Mono можно здесь. Установка у меня прошла без затруднений.

Inkscape


Inkscape – это бесплатный редактор векторной графики с открытым кодом. Для установки под OS X сначала потребуется установить XQuartz, после чего нужно перезапустить компьютер или выйти и снова войти в систему.
Скачать Inkscape можно здесь. Убедитесь, что после установки Inkscape свободно запускается. Мне потребовалось разблокировать его в System Preferences… > Security & Privacy > General. Нужно нажать Click the lock to make changes и разблокировать запуск Inkscape.

Если у Вас возникли затруднения, можно написать мне. О проблемах с конвертером лучше сообщать разработчикам в GitHub, добавив ссылку на проблемный SVG-файл.

Спасибо за внимание.

Update 10.09.2015: Появилась онлайн-версия конвертера.

Комментарии (6)


  1. xotta6bl4
    02.09.2015 12:32
    +2

    Android Studio версии 1.4 умеет сама конвертить svg в VectorDrawable. (А Android gradle plugin версии 1.4 будет уметь из svg генерить png-шки


    1. patch1
      02.09.2015 12:59

      image.online-convert.com/ru/convert-to-png — SVG to PNG (и не только)


    1. astudent
      02.09.2015 13:28

      Я смотрел встроенную в студию возможность конвертации и не нашел способ сконвертировать пакетно несколько файлов. Плюс студийный конвертер менее функционален, чем конвертер из статьи (у меня не съел то, что съедает SvgToVectorDrawableConverter).


  1. copist
    02.09.2015 22:58
    +1

    Ребята, не рекламы ради, а в тему: не могли бы вы потестить ещё один конвертер SVG -> AndroidDrawable github.com/icons8/svg2android на базе node.js

    Я сделал несколько сотен преобразований, но у меня не хватило терпения каждый их них открыть в Android Studio и проверить визуально.
    Android Studio тот ещё монстр по ресурсам.

    Спасибо всем, кто откликнется и создаст issue по найденным ошибкам с примерами некорректно сконвертированных SVG.


  1. ninJo
    07.09.2015 10:31

    А цвет менять при помощи кода можно? Т.е. чтобы одну и туже иконку в разные цвета красить.


    1. astudent
      07.09.2015 12:03

      В Lollipop можно, например, сослаться из drawable XML на атрибут из темы, и подменять тему у этого drawable. Но это не работает на Android 4.0 из-за бага, который как раз и починили в Lollipop.
      Думаю, самое просто решение – это завести несколько drawable, отличающихся только цветом, и переключать их.