Vector Drawable : qu’est-ce que c’est, format XML et fonctionnement

Qu’est-ce que Vector Drawable ?

Vector Drawable est une ressource Android qui représente une image vectorielle au format XML, basée sur la spécification SVG (Scalable Vector Graphics). Google a introduit ce format dans Android 5.0 (API 21) comme alternative aux images raster pour les icônes, illustrations et autres éléments graphiques d’interface.

Contrairement au PNG, où l’image est stockée comme un tableau de pixels de taille fixe, Vector Drawable décrit les formes mathématiquement — par des coordonnées de points, des courbes de Bezier, des remplissages et des contours. Cela signifie qu’une seule image vectorielle peut remplacer jusqu’à six fichiers PNG pour différentes densités d’écran (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), simplifiant considérablement la maintenance des ressources graphiques.

Le format prend en charge non seulement les images statiques, mais aussi les animations via AnimatedVectorDrawable, ainsi que l’adaptation au thème sombre et les couleurs personnalisées via les attributs de thème. Depuis Android 7.0 (API 24), Vector Drawable prend également en charge les remplissages dégradés et les opérations de coupe complexes (clipPath), élargissant les possibilités de conception.

Composants principaux de Vector Drawable

Chaque Vector Drawable contient un élément racine vector avec des paramètres de largeur, hauteur et viewport — un système de coordonnées virtuel dans lequel les formes sont dessinées. À l’intérieur se trouvent des groupes (group) et des chemins (path), où path définit la géométrie via une séquence de commandes : M (moveTo), L (lineTo), C (cubicTo), Z (close) et autres. Chaque path peut avoir son propre fillColor et strokeColor, qui peuvent référencer des ressources de thème.

Les éléments supplémentaires incluent clip-path pour le rognage, gradient pour les transitions dégradées et les attributs d’adaptation au thème sombre via l’attribut android:theme. Toutes les couleurs dans Vector Drawable peuvent être spécifiées comme des références à des attributs de thème (par exemple, ?attr/colorPrimary), ce qui modifie l’apparence des icônes lors du changement de thème sans dupliquer les ressources.

Format Vector Drawable : structure XML

Le fichier XML Vector Drawable est placé dans le répertoire res/drawable/ et possède un élément racine . À l’intérieur peuvent se trouver des éléments imbriqués pour l’organisation hiérarchique et des éléments pour décrire les contours. Chaque path contient un attribut pathData — une chaîne de commandes de dessin au format 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>

L’exemple décrit un cercle de rayon 10 unités dans un viewport de 24×24. Le paramètre fillColor référence une ressource de couleur, tandis que strokeWidth et strokeColor définissent le contour. Les dimensions width et height sont spécifiées en dp — cela garantit une mise à l’échelle correcte sur les écrans de différentes densités de pixels sans transformations supplémentaires.

Regroupement et transformations

L’élément group permet de regrouper plusieurs chemins et d’appliquer des transformations communes : rotation, translation (translateX, translateY) et mise à l’échelle (scaleX, scaleY). Les groupes peuvent être imbriqués, permettant la création de hiérarchies complexes avec des centaines d’éléments sans perte de performances.

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

Le regroupement avec l’attribut pivotX/pivotY est utilisé pour l’animation : vous pouvez faire pivoter ou mettre à l’échelle une partie d’une image indépendamment des autres éléments, ce qui est particulièrement utile pour créer des icônes d’état animées (par exemple, chargement → succès).

Vector Drawable vs graphiques raster

Le choix entre les graphiques vectoriels et raster dépend du cas d’utilisation. Vector Drawable est idéal pour les icônes, illustrations et éléments d’interface avec peu de détails, tandis que les photos et images complexes avec des milliers de couleurs restent dans les formats raster.

Selon Android Performance Patterns (Google I/O 2016), remplacer les icônes PNG par Vector Drawable réduit la taille de l’APK de 40 à 60% pour les applications avec un grand nombre de ressources graphiques. Cependant, lors du rendu de vecteurs complexes avec des centaines de paths, la charge CPU augmente, donc pour les animations et les redessins fréquents, il est recommandé d’utiliser des rasters précachés.

Quand choisir Vector Drawable

Vector Drawable est optimal pour les icônes d’interface (barre d’outils, navigation, statuts), les logos, les illustrations simples et les éléments animés. Le format est particulièrement avantageux pour prendre en charge plusieurs écrans : au lieu de générer des PNG pour six densités, un seul fichier XML suffit. Cela simplifie la maintenance du design et élimine les erreurs de décalage de tailles. Pour les photos et les images aux dégradés photoréalistes, les formats raster avec compression WebP sont toujours utilisés.

Animation Vector Drawable

Android prend en charge l’animation Vector Drawable via deux mécanismes : AnimatedVectorDrawable (disponible depuis l’API 21) et AnimatedStateListDrawable. Le premier permet d’animer les attributs de path — rotation, translation, changement de couleur et transformation de forme. Le second bascule entre différents états (appui, surbrillance) avec des transitions fluides.

AnimatedVectorDrawable utilise trois fichiers XML : le Vector Drawable lui-même, un ObjectAnimator décrivant l’animation et un AnimatedVectorDrawable de liaison qui connecte la cible (nom du groupe ou du path) à l’animateur. L’animation peut modifier fillColor, strokeColor, rotation, translateX/Y, scaleX/Y et même pathData — transformant en douceur une forme en une autre (morphing).

Exemple d’animation morphing

Considérons une animation où une icône « plus » se transforme en une « croix ». La principale limitation : le nombre de commandes pathData doit correspondre dans les états initial et final, sinon l’animation ne fonctionnera pas.

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

L’ObjectAnimator plus_to_close modifie la propriété pathData de la forme originale « plus » à la forme « croix » en 300 millisecondes. Le système interpole automatiquement les coordonnées entre les deux ensembles de commandes SVG. Ce type d’animation est largement utilisé dans Material Design pour les transitions fluides d’état des boutons et icônes.

Exemples de code Vector Drawable

Examinons un exemple complet de vecteur XML pour une icône de flèche retour avec prise en charge du thème sombre. La couleur est définie via une référence à un attribut de thème, ce qui change automatiquement la couleur de l’icône lors du passage entre les thèmes clair et sombre sans dupliquer les ressources.

<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>

Le paramètre android:tint avec la valeur ?attr/colorControlNormal applique automatiquement la couleur de contrôle système — gris foncé sur le thème clair, blanc sur le thème sombre. Le groupe nommé arrow permet d’animer cette icône via AnimatedVectorDrawable.

Chargement de Vector Drawable depuis le code

Pour charger programmatiquement un Vector Drawable dans Android, utilisez la classe AppCompatResources.getDrawable() ou la méthode ContextCompat.getDrawable(). Dans les projets modernes Jetpack Compose, les Drawables raster et vectoriels sont chargés via painterResource, qui détermine automatiquement le format de la ressource.

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
)

Lors de l’utilisation de AppCompatResources.getDrawable(), la bibliothèque AppCompat sélectionne automatiquement la version correcte du drawable en fonction du niveau d’API : sur les appareils antérieurs à Android 5.0 (API 21), un fallback raster peut être utilisé ; sur les appareils plus récents, Vector Drawable est utilisé. Dans Jetpack Compose, painterResource gère cette compatibilité automatiquement.