Vector Drawable: その概要、XML形式、動作の仕組み

Vector Drawableとは？

Vector Drawableは、SVG（Scalable Vector Graphics）仕様に基づき、ベクター画像をXML形式で表現するAndroidリソースです。Googleはこの形式をAndroid 5.0（API 21）で、アイコン、イラスト、その他のグラフィカルUI要素向けのラスター画像の代替として導入しました。

画像が固定サイズのピクセル配列として保存されるPNGとは異なり、Vector Drawableは形状を数学的に記述します。点座標、ベジェ曲線、塗りつぶし、ストロークを通じてです。つまり、1つのベクター画像で、異なる画面密度（mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi、nodpi）向けの6つのPNGファイルを置き換えることができ、グラフィックスリソースの管理を劇的に簡素化します。

この形式は、静止画像だけでなく、AnimatedVectorDrawableによるアニメーション、テーマ属性によるダークテーマ適応やカスタムカラーもサポートしています。Android 7.0（API 24）以降、Vector Drawableはグラデーション塗りつぶしや複雑なクリップ操作（clipPath）もサポートし、デザインの可能性を広げています。

Vector Drawableの主要コンポーネント

各Vector Drawableには、幅、高さ、ビューポート（形状が描画される仮想座標系）のパラメーターを持つルートのvector要素が含まれています。内部にはグループとパスがあり、パスは一連のコマンド（M（moveTo）、L（lineTo）、C（cubicTo）、Z（close）など）で形状を定義します。各パスは独自のfillColorとstrokeColorを持ち、テーマリソースを参照できます。

追加要素には、クリッピング用のclip-path、グラデーション遷移用のgradient、android:theme属性によるダークテーマ適応属性が含まれます。Vector Drawable内のすべての色は、テーマ属性（例：?attr/colorPrimary）への参照として指定でき、リソースを複製せずにテーマ切り替え時にアイコンの外観を変更できます。

Vector Drawableの形式：XML構造

Vector DrawableのXMLファイルはres/drawable/ディレクトリに配置され、ルート要素としてを持ちます。内部には、階層構成のためのネストされた要素と、輪郭を記述するための要素があります。各パスには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>

この例では、24×24のビューポート内に半径10単位の円が記述されています。fillColorパラメーターは色リソースを参照し、strokeWidthとstrokeColorはストロークを定義します。幅と高さはdpで指定され、追加の変換なしで異なるピクセル密度の画面で正しく拡大縮小できます。

グループ化と変換

group要素を使用すると、複数のパスをグループ化し、回転、移動（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とラスターグラフィックスの比較

ベクターとラスターグラフィックスの選択は、ユースケースによって異なります。Vector Drawableは、アイコン、イラスト、詳細が少ないUI要素に最適ですが、数千色の写真や複雑な画像はラスター形式が適しています。

Android Performance Patterns（Google I/O 2016）によると、PNGアイコンをVector Drawableに置き換えると、グラフィカルリソースが多いアプリケーションのAPKサイズが40～60%削減されます。ただし、数百のパスを持つ複雑なベクターをレンダリングするとCPU負荷が増加するため、アニメーションや頻繁な再描画には事前にキャッシュされたラスターを使用することをお勧めします。

Vector Drawableを選ぶべき場合

Vector Drawableは、インターフェースアイコン（ツールバー、ナビゲーション、ステータス）、ロゴ、シンプルなイラスト、アニメーション要素に最適です。この形式は、複数の画面をサポートする場合に特に有利です。6つの密度のPNGを生成する代わりに、1つのXMLファイルで十分です。これにより、デザインの保守が簡素化され、サイズ不一致のエラーが排除されます。写真やフォトリアリスティックなグラデーション画像には、WebP圧縮を使用したラスター形式が引き続き使用されています。

Vector Drawableのアニメーション

Androidは2つのメカニズムでVector Drawableのアニメーションをサポートしています。AnimatedVectorDrawable（API 21から利用可能）とAnimatedStateListDrawableです。前者はパス属性（回転、移動、色変更、形状変形）をアニメーション化できます。後者は、スムーズなトランジションで異なる状態（押下、ハイライト）を切り替えます。

AnimatedVectorDrawableは3つのXMLファイルを使用します。Vector Drawable自体、アニメーションを記述するObjectAnimator、ターゲット（グループまたはパス名）をアニメーターに接続するバインディングAnimatedVectorDrawableです。アニメーションは、fillColor、strokeColor、rotation、translateX/Y、scaleX/Y、さらにはpathData（ある形状を別の形状にスムーズに変形するモーフィング）を変更できます。

モーフィングアニメーションの例

プラスアイコンが閉じるアイコンに変わるアニメーションを考えてみましょう。主な制限：初期状態と最終状態で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は、300ミリ秒でpathDataプロパティを元のプラス形状から閉じる形状に変更します。システムは2つの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の読み込み

Androidでプログラム的にVector Drawableを読み込むには、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ライブラリはAPIレベルに基づいて自動的に正しいdrawableバージョンを選択します。Android 5.0（API 21）より前のデバイスではラスターフォールバックが使用され、新しいデバイスではVector Drawableが使用されます。Jetpack Composeでは、painterResourceがこの互換性を自動的に処理します。