Vector Drawable: What It Is, XML Format, and How It Works

What is Vector Drawable?

Vector Drawable is an Android resource that represents a vector image in XML format, based on the SVG (Scalable Vector Graphics) specification. Google introduced this format in Android 5.0 (API 21) as an alternative to raster images for icons, illustrations, and other graphical UI elements.

Unlike PNG, where an image is stored as a fixed-size pixel array, Vector Drawable describes shapes mathematically — through point coordinates, Bezier curves, fills, and strokes. This means that a single vector image can replace up to six PNG files for different screen densities (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), dramatically simplifying graphics resource maintenance.

The format supports not only static images but also animation via AnimatedVectorDrawable, as well as dark theme adaptation and custom colors through theme attributes. Since Android 7.0 (API 24), Vector Drawable also supports gradient fills and complex clip operations (clipPath), expanding design possibilities.

Key Components of Vector Drawable

Each Vector Drawable contains a root vector element with width, height, and viewport parameters — a virtual coordinate system in which shapes are drawn. Inside are groups and paths, where path defines geometry through a sequence of commands: M (moveTo), L (lineTo), C (cubicTo), Z (close), and others. Each path can have its own fillColor and strokeColor, which can reference theme resources.

Additional elements include clip-path for clipping, gradient for gradient transitions, and dark theme adaptation attributes via the android:theme attribute. All colors in Vector Drawable can be specified as references to theme attributes (e.g., ?attr/colorPrimary), which changes icon appearance when switching themes without duplicating resources.

Vector Drawable Format: XML Structure

A Vector Drawable XML file is placed in the res/drawable/ directory and has a root element. Inside, there can be nested elements for hierarchy organization and elements for describing contours. Each path contains a pathData attribute — a string of drawing commands in SVG path format.

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

The example describes a circle with a radius of 10 units in a 24×24 viewport. The fillColor parameter references a color resource, while strokeWidth and strokeColor define the stroke. The width and height are specified in dp — this ensures correct scaling on screens with different pixel densities without additional transformations.

Grouping and Transformations

The group element allows grouping multiple paths and applying common transformations to them: rotation, translation (translateX, translateY), and scaling (scaleX, scaleY). Groups can be nested, enabling the creation of complex hierarchies with hundreds of elements without performance loss.

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

Grouping with the pivotX/pivotY attribute is used for animation: you can rotate or scale part of an image independently from other elements, which is particularly useful for creating animated state icons (e.g., loading → success).

Vector Drawable vs Raster Graphics

The choice between vector and raster graphics depends on the use case. Vector Drawable is ideal for icons, illustrations, and UI elements with few details, while photos and complex images with thousands of colors remain in raster formats.

According to Android Performance Patterns (Google I/O 2016), replacing PNG icons with Vector Drawable reduces APK size by 40–60% for applications with a large number of graphical resources. However, when rendering complex vectors with hundreds of paths, CPU load increases, so for animations and frequent redraws, it is recommended to use pre-cached rasters.

When to Choose Vector Drawable

Vector Drawable is optimal for interface icons (toolbar, navigation, statuses), logos, simple illustrations, and animated elements. The format is especially beneficial when supporting multiple screens: instead of generating PNGs for six densities, a single XML file suffices. This simplifies design maintenance and eliminates size mismatch errors. For photos and photorealistic gradient images, raster formats with WebP compression are still used.

Vector Drawable Animation

Android supports Vector Drawable animation through two mechanisms: AnimatedVectorDrawable (available since API 21) and AnimatedStateListDrawable. The first allows animating path attributes — rotation, translation, color change, and shape morphing. The second switches between different states (press, highlight) with smooth transitions.

AnimatedVectorDrawable uses three XML files: the Vector Drawable itself, an ObjectAnimator describing the animation, and a binding AnimatedVectorDrawable that connects the target (group or path name) with the animator. The animation can change fillColor, strokeColor, rotation, translateX/Y, scaleX/Y, and even pathData — smoothly transforming one shape into another (morphing).

Morphing Animation Example

Consider an animation where a plus icon turns into a close icon. The main limitation: the number of pathData commands must match in the initial and final states, otherwise the animation will not work.

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

The ObjectAnimator plus_to_close changes the pathData property from the original plus shape to the close shape over 300 milliseconds. The system automatically interpolates coordinates between the two sets of SVG path commands. This type of animation is widely used in Material Design for smooth button and icon state transitions.

Vector Drawable Code Examples

Let’s look at a complete XML vector example for a back arrow icon with dark theme support. The color is set via a reference to a theme attribute, which automatically changes the icon color when switching between light and dark themes without duplicating resources.

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

The android:tint parameter with the value ?attr/colorControlNormal automatically applies the system control color — dark gray on light themes, white on dark themes. The group named arrow allows animating this icon via AnimatedVectorDrawable.

Loading Vector Drawable from Code

To programmatically load a Vector Drawable in Android, use the AppCompatResources.getDrawable() class or ContextCompat.getDrawable() method. In modern Jetpack Compose projects, raster and vector Drawables are loaded via painterResource, which automatically determines the resource format.

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
)

When using AppCompatResources.getDrawable(), the AppCompat library automatically selects the correct drawable version based on the API Level: on devices before Android 5.0 (API 21), a raster fallback may be used; on newer devices, Vector Drawable is used. In Jetpack Compose, painterResource handles this compatibility automatically.