Vector Drawable: что это, формат XML и как работает

Что такое Vector Drawable?

Vector Drawable — это ресурс Android, представляющий векторное изображение в формате XML, основанный на спецификации SVG (Scalable Vector Graphics). Google представила этот формат в Android 5.0 (API 21) как альтернативу растровым изображениям для иконок, иллюстраций и других графических элементов интерфейса.

В отличие от PNG, где изображение хранится как массив пикселей фиксированного размера, Vector Drawable описывает фигуры математически — через координаты точек, кривые Безье, заливки и обводки. Это означает, что одно векторное изображение может заменять до шести PNG-файлов для разных плотностей экрана (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), что кардинально упрощает поддержку графических ресурсов.

Формат поддерживает не только статические изображения, но и анимацию через AnimatedVectorDrawable, а также адаптацию под тёмную тему и кастомные цвета через атрибуты темы. Начиная с Android 7.0 (API 24), Vector Drawable поддерживает также градиентные заливки и сложные операции обрезки (clipPath), что расширяет возможности дизайна.

Основные компоненты Vector Drawable

Каждый Vector Drawable содержит корневой элемент vector с параметрами ширины, высоты и viewport — виртуальной системы координат, в которой рисуются фигуры. Внутри располагаются группы (group) и пути (path), где path определяет геометрию через последовательность команд: M (moveTo), L (lineTo), C (cubicTo), Z (close) и других. Каждый path может иметь свою заливку (fillColor) и обводку (strokeColor), которые могут ссылаться на ресурсы темы.

Дополнительные элементы включают clip-path для обрезки, gradient для градиентных переходов и атрибуты адаптации под тёмную тему через атрибут android:theme. Все цвета в Vector Drawable могут быть заданы как ссылки на атрибуты темы (например, ?attr/colorPrimary), что меняет внешний вид иконок при смене темы без дублирования ресурсов.

Формат Vector Drawable: XML-структура

XML-файл Vector Drawable помещается в директорию res/drawable/ и имеет корневой элемент . Внутри могут быть вложенные для организации иерархии и для описания контуров. Каждый path содержит атрибут pathData — строку команд рисования в формате SVG-пути.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

В примере описан круг радиусом 10 единиц в viewport 24×24. Параметр fillColor ссылается на ресурс цвета, а strokeWidth и strokeColor задают обводку. Размеры width и height указываются в dp — это обеспечивает корректное масштабирование на экранах с разной плотностью пикселей без дополнительных преобразований.

Группировка и трансформации

Элемент group позволяет группировать несколько path и применять к ним общие трансформации: поворот (rotation), сдвиг (translateX, translateY) и масштабирование (scaleX, scaleY). Группы могут быть вложенными, что даёт возможность создавать сложную иерархию из сотен элементов без потери производительности.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

Группировка с атрибутом pivotX/pivotY используется для анимации: можно вращать или масштабировать часть изображения независимо от остальных элементов, что особенно полезно для создания анимированных иконок состояния (например, загрузка → успех).

Vector Drawable vs растровая графика

Выбор между векторной и растровой графикой зависит от сценария использования. Vector Drawable идеален для иконок, иллюстраций и элементов интерфейса с небольшим количеством деталей, тогда как фотографии и сложные изображения с тысячами цветов остаются за растровыми форматами.

По данным Android Performance Patterns (Google I/O 2016), замена PNG-иконок на Vector Drawable уменьшает размер APK на 40–60% для приложений с большим количеством графических ресурсов. Однако при отрисовке сложных векторов с сотнями path нагрузка на CPU возрастает, поэтому для анимаций и частых перерисовок рекомендуется использовать предварительно кэшированные растры.

Когда выбирать Vector Drawable

Vector Drawable оптимален для иконок интерфейса (тулбар, навигация, статусы), логотипов, простых иллюстраций и анимированных элементов. Формат особенно выгоден при поддержке множества экранов: вместо генерации PNG для шести плотностей достаточно одного XML-файла. Это упрощает поддержку дизайна и исключает ошибки несоответствия размеров. Для фотографий и изображений с фотореалистичными градиентами по-прежнему используются растровые форматы с компрессией WebP.

Анимация Vector Drawable

Android поддерживает анимацию Vector Drawable через два механизма: AnimatedVectorDrawable (доступен с API 21) и AnimatedStateListDrawable. Первый позволяет анимировать атрибуты path — вращение, перемещение, изменение цвета и формы. Второй переключает между разными состояниями (нажатие, выделение) с плавным переходом.

AnimatedVectorDrawable использует три XML-файла: сам Vector Drawable, ObjectAnimator с описанием анимации и связующий AnimatedVectorDrawable, который соединяет target (имя группы или пути) с animator. Анимация может менять fillColor, strokeColor, rotation, translateX/Y, scaleX/Y и даже pathData — то есть плавно трансформировать одну форму в другую (morphing).

Пример анимации морфинга

Рассмотрим анимацию, в которой иконка «плюс» превращается в «крестик». Основное ограничение: количество команд pathData должно совпадать в начальном и конечном состоянии, иначе анимация не сработает.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

Анимация ObjectAnimator plus_to_close изменяет свойство pathData от исходной формы «плюс» к форме «крестик» за 300 миллисекунд. Система автоматически интерполирует координаты между двумя наборами команд SVG-путей. Такая анимация широко используется в Material Design для плавных переходов состояний кнопок и иконок.

Примеры кода Vector Drawable

Рассмотрим полный пример XML-вектора для иконки стрелки назад с поддержкой тёмной темы. Цвет задаётся через ссылку на атрибут темы, что автоматически меняет цвет иконки при переключении между светлой и тёмной темами без дублирования ресурсов.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

Параметр android:tint со значением ?attr/colorControlNormal автоматически применяет системный цвет элемента управления — на светлой теме это тёмно-серый, на тёмной — белый. Группа с именем arrow позволяет анимировать эту иконку через AnimatedVectorDrawable.

Загрузка Vector Drawable из кода

Для программной загрузки Vector Drawable в Android используется класс AppCompatResources.getDrawable() или метод ContextCompat.getDrawable(). В современных проектах на Jetpack Compose растровые и векторные Drawable загружаются через painterResource, который автоматически определяет формат ресурса.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

При использовании AppCompatResources.getDrawable() библиотека AppCompat сама подбирает корректную версию drawable в зависимости от API Level: на устройствах до Android 5.0 (API 21) может использоваться растровая заглушка (fallback), на более новых — Vector Drawable. В Jetpack Compose painterResource обрабатывает эту совместимость автоматически.