В предыдущей части мы обсудили библиотеку 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)
copist
02.09.2015 22:58+1Ребята, не рекламы ради, а в тему: не могли бы вы потестить ещё один конвертер SVG -> AndroidDrawable github.com/icons8/svg2android на базе node.js
Я сделал несколько сотен преобразований, но у меня не хватило терпения каждый их них открыть в Android Studio и проверить визуально.
Android Studio тот ещё монстр по ресурсам.
Спасибо всем, кто откликнется и создаст issue по найденным ошибкам с примерами некорректно сконвертированных SVG.
ninJo
07.09.2015 10:31А цвет менять при помощи кода можно? Т.е. чтобы одну и туже иконку в разные цвета красить.
astudent
07.09.2015 12:03В Lollipop можно, например, сослаться из drawable XML на атрибут из темы, и подменять тему у этого drawable. Но это не работает на Android 4.0 из-за бага, который как раз и починили в Lollipop.
Думаю, самое просто решение – это завести несколько drawable, отличающихся только цветом, и переключать их.
xotta6bl4
Android Studio версии 1.4 умеет сама конвертить svg в VectorDrawable. (А Android gradle plugin версии 1.4 будет уметь из svg генерить png-шки
patch1
image.online-convert.com/ru/convert-to-png — SVG to PNG (и не только)
astudent
Я смотрел встроенную в студию возможность конвертации и не нашел способ сконвертировать пакетно несколько файлов. Плюс студийный конвертер менее функционален, чем конвертер из статьи (у меня не съел то, что съедает SvgToVectorDrawableConverter).