Легко переходим на векторный формат картинок вместо нарезки под разные плотности экранов в Android 4.0+. Часть 2 из 2



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

    Когда Андроид читает XML-ресурсы, он игнорирует атрибуты, которые не поддерживаются текущим устройством. Это означает, что неподдерживаемые атрибуты в vector drawable XML придется продублировать в пространстве имен 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 & PrivacyGeneral. Нужно нажать Click the lock to make changes и разблокировать запуск Inkscape.

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

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

    Update 10.09.2015: Появилась онлайн-версия конвертера.
    • +19
    • 18,6k
    • 6
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 6
    • +2
      Android Studio версии 1.4 умеет сама конвертить svg в VectorDrawable. (А Android gradle plugin версии 1.4 будет уметь из svg генерить png-шки
      • 0
        image.online-convert.com/ru/convert-to-png — SVG to PNG (и не только)
        • 0
          Я смотрел встроенную в студию возможность конвертации и не нашел способ сконвертировать пакетно несколько файлов. Плюс студийный конвертер менее функционален, чем конвертер из статьи (у меня не съел то, что съедает SvgToVectorDrawableConverter).
        • +1
          Ребята, не рекламы ради, а в тему: не могли бы вы потестить ещё один конвертер SVG -> AndroidDrawable github.com/icons8/svg2android на базе node.js

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

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

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.