Vector Drawable: vad är det, XML-format och hur det fungerar

Vad är Vector Drawable?

Vector Drawable är en Android-resurs som representerar en vektorbild i XML-format, baserad på SVG-specifikationen (Scalable Vector Graphics). Google introducerade detta format i Android 5.0 (API 21) som ett alternativ till rasterbilder för ikoner, illustrationer och andra grafiska gränssnittselement.

Till skillnad från PNG, där bilden lagras som en matris av pixlar med fast storlek, beskriver Vector Drawable former matematiskt — genom punktkoordinater, Bezier-kurvor, fyllningar och konturer. Detta innebär att en enda vektorbild kan ersätta upp till sex PNG-filer för olika skärmtätheter (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), vilket radikalt förenklar underhållet av grafiska resurser.

Formatet stödjer inte bara statiska bilder, utan även animation via AnimatedVectorDrawable, samt anpassning till mörkt tema och anpassade färger via temaattribut. Från och med Android 7.0 (API 24) stödjer Vector Drawable även gradientfyllningar och komplexa klippoperationer (clipPath), vilket utökar designmöjligheterna.

Huvudkomponenter i Vector Drawable

Varje Vector Drawable innehåller rotelementet vector med parametrar för bredd, höjd och viewport — ett virtuellt koordinatsystem där former ritas. Inuti finns grupper (group) och sökvägar (path), där path definierar geometrin genom en sekvens av kommandon: M (moveTo), L (lineTo), C (cubicTo), Z (close) och andra. Varje path kan ha sin egen fyllning (fillColor) och kontur (strokeColor), som kan referera till temaresurser.

Ytterligare element inkluderar clip-path för klippning, gradient för gradientövergångar och attribut för anpassning till mörkt tema via attributet android:theme. Alla färger i Vector Drawable kan definieras som referenser till temaattribut (t.ex. ?attr/colorPrimary), vilket ändrar utseendet på ikoner vid temaväxling utan att duplicera resurser.

Vector Drawable-format: XML-struktur

XML-filen för Vector Drawable placeras i katalogen res/drawable/ och har rotelementet <vector>. Inuti kan det finnas nästlade <group> för organisering av hierarki och <path> för beskrivning av konturer. Varje path innehåller attributet pathData — en sträng med ritkommandon i SVG-sökvägsformat.

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

I exemplet beskrivs en cirkel med radien 10 enheter i en viewport på 24×24. Parametern fillColor refererar till en färgresurs, medan strokeWidth och strokeColor definierar konturen. Måtten width och height anges i dp — detta säkerställer korrekt skalning på skärmar med olika pixeltäthet utan ytterligare transformationer.

Gruppering och transformationer

Elementet group gör det möjligt att gruppera flera path och tillämpa gemensamma transformationer: rotation, förskjutning (translateX, translateY) och skalning (scaleX, scaleY). Grupper kan vara nästlade, vilket möjliggör skapandet av komplexa hierarkier med hundratals element utan prestandaförlust.

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

Gruppering med attributet pivotX/pivotY används för animation: en del av bilden kan roteras eller skaleras oberoende av andra element, vilket är särskilt användbart för att skapa animerade statusikoner (t.ex. laddning → framgång).

Vector Drawable vs rastergrafik

Valet mellan vektor- och rastergrafik beror på användningsscenariot. Vector Drawable är idealiskt för ikoner, illustrationer och gränssnittselement med få detaljer, medan fotografier och komplexa bilder med tusentals färger förblir i rasterformat.

Enligt Android Performance Patterns (Google I/O 2016) minskar utbyte av PNG-ikoner mot Vector Drawable APK-storleken med 40–60% för appar med många grafiska resurser. Vid rendering av komplexa vektorer med hundratals path ökar dock CPU-belastningen, så för animationer och frekvent omritning rekommenderas användning av cachade rastrer.

När ska man välja Vector Drawable

Vector Drawable är optimalt för gränssnittsikoner (verktygsfält, navigering, statusar), logotyper, enkla illustrationer och animerade element. Formatet är särskilt fördelaktigt vid stöd för flera skärmar: istället för att generera PNG för sex tätheter räcker en enda XML-fil. Detta förenklar designunderhållet och eliminerar storleksavvikelsefel. För fotografier och bilder med fotorealistiska gradienter används fortfarande rasterformat med WebP-komprimering.

Vector Drawable-animation

Android stödjer Vector Drawable-animation genom två mekanismer: AnimatedVectorDrawable (tillgänglig från API 21) och AnimatedStateListDrawable. Den första möjliggör animering av path-attribut — rotation, förskjutning, färg- och formändring. Den andra växlar mellan olika tillstånd (tryck, markering) med smidig övergång.

AnimatedVectorDrawable använder tre XML-filer: själva Vector Drawable, ObjectAnimator med animationsbeskrivning och den sammanbindande AnimatedVectorDrawable som kopplar target (namn på grupp eller sökväg) till animatorn. Animationen kan ändra fillColor, strokeColor, rotation, translateX/Y, scaleX/Y och även pathData — det vill säga smidigt omvandla en form till en annan (morphing).

Exempel på morphing-animation

Betrakta en animation där ikonen „plus” förvandlas till „kors”. Huvudbegränsningen: antalet pathData-kommandon måste vara samma i början och sluttillståndet, annars fungerar inte animationen.

<!-- 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 ändrar egenskapen pathData från den ursprungliga „plus”-formen till „kors”-formen på 300 millisekunder. Systemet interpolerar automatiskt koordinaterna mellan de två uppsättningarna SVG-sökvägskommandon. Sådan animation används flitigt i Material Design för smidiga övergångar av knapp- och ikontillstånd.

Exempel på Vector Drawable-kod

Låt oss titta på ett komplett exempel på en XML-vektor för ikonen tillbaka-pil med stöd för mörkt tema. Färgen definieras via en referens till ett temaattribut, vilket automatiskt ändrar ikonens färg vid växling mellan ljust och mörkt tema utan att duplicera resurser.

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

Parametern android:tint med värdet ?attr/colorControlNormal tillämpar automatiskt systemfärgen för kontrollenheten — i ljust tema är den mörkgrå, i mörkt tema vit. Gruppen med namnet arrow gör det möjligt att animera denna ikon via AnimatedVectorDrawable.

Ladda Vector Drawable från kod

För att programmatiskt ladda Vector Drawable i Android används klassen AppCompatResources.getDrawable() eller metoden ContextCompat.getDrawable(). I moderna projekt med Jetpack Compose laddas raster- och vektor-Drawable via painterResource, som automatiskt detekterar resursformatet.

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
)

Vid användning av AppCompatResources.getDrawable() väljer AppCompat-biblioteket själv rätt version av drawable beroende på API-nivå: på enheter äldre än Android 5.0 (API 21) kan en rasterreservversion (fallback) användas, på nyare enheter Vector Drawable. I Jetpack Compose hanterar painterResource denna kompatibilitet automatiskt.