Отображение SVG изображения в Android приложении

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


У этого формата много достоинств (можно прочитать в Wiki). Но используя SVG в своем проекте, вы увидите, что:

- Теперь время разработки приложения сократилось, так как не требуется нарезать большое количество изображений для различных разрешений (как минимум для пяти: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).

- К тому же вес приложения существенно уменьшается. Например, мое приложения Snowy: Контроль веса весит всего 3.3 Мб, а содержит более 50 различных иконок и изображений.

Как подготовить SVG изображения для Android-проекта?

Вы можете либо нарисовать векторные изображения в графическом редакторе, который поддерживает SVG (например, Sketch), либо скачать подходящие иконки. Но, чтобы использовать SVG в Android, файл необходимо переконвертировать в VectorDrawable.

Для этого можно воспользоваться следующим сервисом: http://inloop.github.io/svg2android/

ВАЖНО: Если у вас используются сложные фигуры, повороты, флип, то при конвертации необходимо поставить галочку “Bake transforms into path (experimental)”

Как работать с SVG в Android?

1. Все cконвертированные xml изображения помещаем в папку res/drawable.

2. В gradle файле app модуля делаем следующие изменения:

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}
dependencies {
  compile 'com.android.support:appcompat-v7:27.0.0'
}

Поддержка VectorDrawable доступна в Android Support Library 23.2 и выше, лучше использовать последнюю доступную версию библиотеки (на момент написания статьи - 27.0.0)

3. Теперь просто отображаем наш drawable в android.support.v7.widget.AppCompatImageView (вместо ImageView), не забывая добавлять в корне макета xmlns:app="http://schemas.android.com/apk/res-auto":

<android.support.v7.widget.AppCompatImageView

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    app:srcCompat="@drawable/ic_new_releases_24px"/>

Вы можете изменить цвет изображения с помощью свойства tint:

app:tint="@color/colorPrimary"

---

Все описанное успешно реализовано в моем приложение Snowy: Контроль веса. Если вам не сложно, поддержите проект добрым отзывом и положительной оценкой! Спасибо!