Vector Drawable: qué es, formato XML y cómo funciona

¿Qué es Vector Drawable?

Vector Drawable es un recurso de Android que representa una imagen vectorial en formato XML, basado en la especificación SVG (Scalable Vector Graphics). Google introdujo este formato en Android 5.0 (API 21) como alternativa a las imágenes rasterizadas para iconos, ilustraciones y otros elementos gráficos de la interfaz.

A diferencia de PNG, donde la imagen se almacena como una matriz de píxeles de tamaño fijo, Vector Drawable describe las formas matemáticamente, mediante coordenadas de puntos, curvas Bezier, rellenos y trazos. Esto significa que una sola imagen vectorial puede reemplazar hasta seis archivos PNG para diferentes densidades de pantalla (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), simplificando drásticamente el mantenimiento de los recursos gráficos.

El formato admite no solo imágenes estáticas, sino también animaciones mediante AnimatedVectorDrawable, así como adaptación al tema oscuro y colores personalizados a través de atributos de tema. Desde Android 7.0 (API 24), Vector Drawable también admite rellenos degradados y operaciones complejas de recorte (clipPath), lo que amplía las posibilidades de diseño.

Componentes principales de Vector Drawable

Cada Vector Drawable contiene un elemento raíz vector con parámetros de ancho, alto y viewport (un sistema de coordenadas virtual donde se dibujan las formas). En su interior se encuentran grupos (group) y trazados (path), donde path define la geometría mediante una secuencia de comandos: M (moveTo), L (lineTo), C (cubicTo), Z (close) y otros. Cada path puede tener su propio fillColor y strokeColor, que pueden hacer referencia a recursos del tema.

Los elementos adicionales incluyen clip-path para recorte, gradient para transiciones degradadas y atributos de adaptación al tema oscuro mediante el atributo android:theme. Todos los colores en Vector Drawable pueden especificarse como referencias a atributos del tema (por ejemplo, ?attr/colorPrimary), lo que cambia la apariencia de los iconos al cambiar de tema sin duplicar recursos.

Formato Vector Drawable: estructura XML

El archivo XML de Vector Drawable se coloca en el directorio res/drawable/ y tiene un elemento raíz . En su interior puede haber elementos anidados para organizar la jerarquía y para describir contornos. Cada path contiene un atributo pathData: una cadena de comandos de dibujo en formato 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>

En el ejemplo se describe un círculo con radio de 10 unidades en un viewport de 24×24. El parámetro fillColor hace referencia a un recurso de color, mientras que strokeWidth y strokeColor definen el trazo. Las dimensiones width y height se especifican en dp, lo que garantiza un escalado correcto en pantallas con diferente densidad de píxeles sin transformaciones adicionales.

Agrupación y transformaciones

El elemento group permite agrupar varios path y aplicarles transformaciones comunes: rotación (rotation), desplazamiento (translateX, translateY) y escalado (scaleX, scaleY). Los grupos pueden anidarse, lo que permite crear jerarquías complejas con cientos de elementos sin pérdida de rendimiento.

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

La agrupación con el atributo pivotX/pivotY se utiliza para animación: se puede rotar o escalar una parte de la imagen independientemente de otros elementos, lo que es especialmente útil para crear iconos de estado animados (por ejemplo, carga → éxito).

Vector Drawable vs gráficos rasterizados

La elección entre gráficos vectoriales y rasterizados depende del caso de uso. Vector Drawable es ideal para iconos, ilustraciones y elementos de interfaz con pocos detalles, mientras que las fotos e imágenes complejas con miles de colores siguen siendo competencia de los formatos rasterizados.

Según Android Performance Patterns (Google I/O 2016), reemplazar iconos PNG por Vector Drawable reduce el tamaño del APK entre 40–60% en aplicaciones con una gran cantidad de recursos gráficos. Sin embargo, al renderizar vectores complejos con cientos de path, la carga de la CPU aumenta, por lo que para animaciones y redespliegues frecuentes se recomienda usar rasterizados previamente almacenados en caché.

Cuándo elegir Vector Drawable

Vector Drawable es óptimo para iconos de interfaz (barra de herramientas, navegación, estados), logotipos, ilustraciones simples y elementos animados. El formato es especialmente ventajoso cuando se admite múltiples pantallas: en lugar de generar PNG para seis densidades, basta con un solo archivo XML. Esto simplifica el mantenimiento del diseño y elimina errores de discrepancia de tamaños. Para fotos e imágenes con degradados fotorrealistas, todavía se utilizan formatos rasterizados con compresión WebP.

Animación de Vector Drawable

Android admite la animación de Vector Drawable mediante dos mecanismos: AnimatedVectorDrawable (disponible desde API 21) y AnimatedStateListDrawable. El primero permite animar atributos de path (rotación, desplazamiento, cambio de color y transformación de forma). El segundo cambia entre diferentes estados (presión, resaltado) con transiciones suaves.

AnimatedVectorDrawable utiliza tres archivos XML: el propio Vector Drawable, un ObjectAnimator que describe la animación y un AnimatedVectorDrawable de enlace que conecta el target (nombre del grupo o path) con el animator. La animación puede cambiar fillColor, strokeColor, rotation, translateX/Y, scaleX/Y e incluso pathData, transformando suavemente una forma en otra (morphing).

Ejemplo de animación morphing

Consideremos una animación donde un icono de «más» se convierte en un «aspa». La limitación principal: la cantidad de comandos pathData debe coincidir en el estado inicial y final; de lo contrario, la animación no funcionará.

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

El ObjectAnimator plus_to_close cambia la propiedad pathData de la forma original de «más» a la forma de «aspa» en 300 milisegundos. El sistema interpola automáticamente las coordenadas entre los dos conjuntos de comandos SVG. Este tipo de animación se usa ampliamente en Material Design para transiciones suaves de estados de botones e iconos.

Ejemplos de código Vector Drawable

Veamos un ejemplo completo de XML vectorial para un icono de flecha atrás con soporte de tema oscuro. El color se define mediante una referencia a un atributo del tema, lo que cambia automáticamente el color del icono al alternar entre tema claro y oscuro sin duplicar recursos.

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

El parámetro android:tint con el valor ?attr/colorControlNormal aplica automáticamente el color del sistema de control: gris oscuro en tema claro, blanco en tema oscuro. El grupo llamado arrow permite animar este icono mediante AnimatedVectorDrawable.

Carga de Vector Drawable desde código

Para cargar programáticamente un Vector Drawable en Android se utiliza la clase AppCompatResources.getDrawable() o el método ContextCompat.getDrawable(). En proyectos modernos con Jetpack Compose, los Drawable rasterizados y vectoriales se cargan mediante painterResource, que determina automáticamente el formato del recurso.

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
)

Al usar AppCompatResources.getDrawable(), la biblioteca AppCompat selecciona automáticamente la versión correcta del drawable según el nivel de API: en dispositivos anteriores a Android 5.0 (API 21) puede usarse un fallback rasterizado; en dispositivos más nuevos se usa Vector Drawable. En Jetpack Compose, painterResource maneja esta compatibilidad automáticamente.