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 обробляє цю сумісність автоматично.