PNGをAndroid VectorDrawableへ：読み込みチェック

Android StudioはPNGをベクターパスへトレースしません。Vector Asset Studioが読み込むのはSVGまたはPSDで、対応する形状をVectorDrawable XMLへ変換します。そのため確実なPNG変換は2段階です。ピクセルを本物のSVGにトレースし、そのSVGをAndroid Studioへ読み込みます。

PNGからVectorDrawableへの直接変換ツールは、両段階をまとめて行う場合があります。単純なアイコンには便利ですが、同じ確認が必要です。出力にパスが含まれ、元画像に合い、意図したビューポートを使い、Androidの読み込み機能で表現できない機能を避けているか確認します。

Flutterの画面には、FlutterのSVG素材の手順を使います。ネイティブのAndroid VectorDrawable XMLへ変換するのではなく、flutter_svgでSVGを登録・描画します。

.NET MAUIプロジェクトには、MAUIの画像リソースのチェックリストで元データ、ビルド出力、表示サイズを確認します。ネイティブのAndroid VectorDrawableの読み込み手順を適用する前に、そのプロジェクトの画像処理工程に従ってください。

簡単な手順

1. 写真や質感ではなく、きれいなアイコンに近いPNGから始めます。
2. SVGにトレースし、埋め込みPNGではなく編集可能なパスがあるか確認します。
3. シルエットを変えず、不要な図形と過剰なノードを減らします。
4. Android StudioのVector Asset StudioからSVGを読み込みます。
5. 生成XMLでビューポート、パス、塗り、ストローク、グラデーション、クリッピングを調べます。
6. アプリが対応する最も古いAndroidバージョンで、実際のサイズのdrawableをテストします。

直接変換とSVG経由のどちらを選ぶか

到着点は同じですが、確認できる段階が異なります。

中間SVGを使う方法は、通常確認しやすいです。Android Studioが再変換する前に、PNGとトレースを比較し、個別の図形を調べ、穴を修正し、パスの不要物を減らせます。

直接変換ツールが必ず悪いわけではありません。例えばSVG2Vectorは現在、SVGなどの入力と並び、PNGからVectorDrawableへの変換を案内しています。XMLは完成素材ではなく候補として扱います。Android Studioでプレビューし、パスを調べ、以下と同じ端末確認を行ってください（SVG2Vector）。

第1段階：PNGを本物のSVGパスへ変換する

利用できる最もきれいな元画像から始めます。明確な縁と限られた配色を持つフラットなアイコンは有力です。写真、柔らかな影、光彩、質感は、多数の小さな図形になっても使えるAndroid素材にならない場合があります。

PNGの元の解像度を使います。ぼけたアイコンを拡大して増えるのはピクセルで、失われた縁の情報ではありません。意図しない背景長方形を除去し、単色、多色、グラデーションのどれを意図するか、トレース前に決めます。

ピクセルをトレースする

PerfectVectorのPNGからSVGへの変換ツールへ元画像をアップロードするか、結果を確認できる別のツールを使います。スマートフォンに元画像があり、まず標準SVGが必要なら、AndroidスマートフォンでのSVG作成手順を使います。意図したUIサイズでSVGとPNGを比較し、ベクターエディターで開いて図形を選択します。

次を確認します。

• きれいな外周シルエット
• 保持された穴や抜き部分
• 想定した色領域数
• 不要な点や背景枠がない
• 密な点の列のない滑らかな曲線
• 作品を正しく囲むviewBox

.svgの拡張子はトレースの証明ではありません。W3Cの埋め込みコンテンツ仕様によれば、SVGは<image>要素でラスターを含められます。作品が長方形1つとして選択されたり、高倍率でピクセル状になったりするなら、Android Studioへ進む前に埋め込みラスターの診断を使います。

役立つ部分だけを単純化する

Androidが生成された形状を解析・描画するため、パスの複雑さは重要です。共通の目標ノード数はありません。単純な曲線に密集した点が数十個あれば調べるべきですが、不規則なイラストの縁には本当に多くの点が必要かもしれません。

元画像と比較しながら、孤立した断片を除去し、明らかに不要な点の列を単純化します。修正で角が変わる、または小さな穴が閉じるなら元に戻します。ノードの多すぎるSVGのガイドでは、必要な細部と不要なパスを見分ける方法を説明しています。

2回の変換、3つの確認

第2段階：Android StudioへSVGを読み込む

Androidの現在のVector Asset Studioは、ローカルのSVGまたはPSDを受け付け、プレビューしてXMLのvector drawableを生成します（Android Developers）。

1. Projectウィンドウでresフォルダーを右クリックします。
2. New > Vector Assetを選びます。
3. 素材の種類として**Local file (SVG, PSD)**を選びます。
4. SVGを選び、プレビューのエラーや見た目の変化を調べます。
5. リソース名と意図したサイズを設定します。
6. Nextへ進み、保存先を確認してFinishを選びます。

生成リソースはアプリのdrawableリソース配下のXMLです。確認済みSVGを編集可能なマスターとして残します。後から見た目を変える場合は、無関係な2つの版を手で管理せず、SVGを編集してdrawableを再生成します。

SVGからVectorDrawableへの読み込みで残るもの

VectorDrawableは完全なSVGレンダラーではありません。Vector Asset Studioは定義された一部に対応するため、ブラウザーでは正しいSVGも、読み込み時に変わる場合があります。

これらは現在のVector Asset Studioの互換性表に基づきます。中央配置のストロークだけに対応するとも記載されています。内側や外側のストロークを使う元データでは、読み込み前に塗り付き図形へ展開するか、縁を描き直します。

グラデーションには追加のバージョン確認が必要です。VectorDrawable APIは、fillColorとstrokeColorのグラデーションまたはカラーステートリスト値をAPIレベル24からと説明しています。fillTypeのevenOddとnonZeroもAPIレベル24からです（VectorDrawable APIリファレンス）。古いバージョンに対応するアプリでは、Android Studioのプレビューだけで解決したと思わず、ビルドで使う実際の互換方法をテストします。

採用前に生成XMLを読む

VectorDrawable XMLを手書きする必要はありませんが、短い構造確認で多くの読み込み問題を見つけられます。

幅、高さ、ビューポート

ルートの<vector>要素は、表示サイズと描画座標を分けています。

• android:widthとandroid:heightは既定のdrawable寸法で、通常dpです。
• android:viewportWidthとandroid:viewportHeightは、パスが使う座標空間を定義します。

幅と高さだけの変更は、同じ形状を拡大縮小します。ビューポートを変えると、その表示領域へパス座標を対応させる方法が変わります。アイコンが切れる、余白がある、伸びる場合は、この4つの値をSVGのviewBoxと意図した素材サイズに照らして確認します。

パスと塗り

各<path>にはandroid:pathDataがあり、コマンドはSVGのd属性と同じ一般的なパス構文に従います。存在する場合は、fillColor、strokeColor、strokeWidth、線端、線の結合、fillTypeを確認します。

知らないパスコマンドを削除して最適化しないでください。まず元画像とプレビューを比較し、形状を調べやすいSVGマスターで単純化します。

グループとクリッピング

グループには移動、拡大縮小、回転、ピボットの値があります。<clip-path>は見える形状を制限します。結果がずれる、マスク領域が消える場合は、グループ階層を調べ、元SVGの座標変換とクリッピング構造と比較します。

実際にアプリで使う場所でテストする

読み込みプレビューが証明するのは、Android Studioがファイルを解析できたことです。実行時に正しい素材であることは証明しません。

次の受け入れチェックを使います。

• 通常のUIサイズで、PNGの意図したシルエットと一致する
• 穴、文字の内部、重なった領域が正しい
• 単色の塗りとストロークが意図した色である
• 最も古い対応Androidバージョンでグラデーションが正しく表示される
• ビューポートが意図した余白と縦横比を保つ
• アプリで使う明色、暗色、無効、着色状態でアイコンが読める
• XMLに偶然の断片や明らかに過剰なパスデータがない
• 読み込みプレビューだけでなく実際のコンポーネントでテストしている
• 元のPNGと編集可能なSVGマスターを保管している

最低対応バージョンを代表するエミュレーターまたは端末の少なくとも1台で、実際のdpサイズをテストします。着色を変える状態やテーマも確認します。技術的に有効なパスでも、余白、視覚的な太さ、色の前提が周囲のアイコンと異なると合わないことがあります。

一式を変換するなら、まず代表的なサンプルでこの工程を試します。UIキットの変換手順では、共通のビューポート、視覚的なサイズ、色の挙動、セット全体の納品確認を扱います。

PNGを保つべき場合

VectorDrawableは単純なアイコンやイラストに向きます。Androidの案内は、多くのアプリ起動用画像を含む細かいグラフィックスでは、ラスター素材の方がよい場合があると注意しています。また、vector drawableの初回読み込みコストがラスターより高いことがあり、長い描画時間を避けるため200 × 200 dp以下を推奨しています（Android Developers）。

元画像が次に依存するなら、ラスターを保つか再設計します。

• 写真の細部
• 柔らかな質感、ぼかし、複雑な影
• 多数の小さな色領域
• 外観を決める未対応の効果
• XMLの確認と管理が難しくなるほど密な形状

目的はすべてのPNGを置き換えることではありません。細かい画像を高コストなパスの山にせず、拡大縮小可能な形状によってAndroid素材が小さく、明確に、テーマ変更しやすくなる場面でVectorDrawableを使います。

PerfectVectorを使った場合

PerfectVectorは最初の変換を担当します。適したアイコンをPNGからSVGへ変換し、トレース図形と元画像を比較し、編集可能なマスターとして残すSVGをダウンロードします。その後Vector Asset Studioへ読み込み、生成XMLを確認します。

工程全体で結果を判断します。

1. トレースが元のシルエットと穴を保ったか
2. SVG図形が編集可能で、埋め込みラスターがないか
3. Android Studioが必要な塗り、グラデーション、クリップ、座標変換を読み込めるか
4. 実際のサイズと最低APIレベルでdrawableが正しく表示されるか

整ったSVGは受け渡しを改善しますが、未対応のAndroid機能を動かすものではありません。受け取り先が外観を忠実に再現できないなら、単純化するかPNGを保ちます。

よくある質問

Android StudioはPNGを直接VectorDrawableへ変換できますか？ いいえ。現在のVector Asset StudioはローカルのSVGまたはPSDを読み込み、PNGは読み込みません。先にPNGを本物のSVGへトレースするか、直接変換ツールを使って結果のXMLをAndroid Studioで確認します。

SVGは必ず本物のベクターですか？ いいえ。画像要素でラスターを埋め込めます。読み込み前にベクターエディターやマークアップで調べ、必要な作品がパスなどのベクター図形で構成されているか確認します。

SVGのグラデーションはAndroid VectorDrawableで使えますか？ Vector Asset Studioは線形、放射状、角度グラデーションに対応しますが、実行時の対応は生成XMLとAndroidバージョン対策に依存します。APIはグラデーションの塗り・ストロークをAPIレベル24からと説明しているため、最も古い対応バージョンでテストします。

読み込み後に穴、マスク、文字が変わったのはなぜですか？ 読み込み機能はSVGの一部に対応します。塗り規則にはバージョンを考慮したテストが必要で、クリッピングは制限され、文字は未対応です。必要な文字をアウトライン化し、クリッピングを単純化し、採用前にAndroidプレビューとSVGを比較します。

AndroidアプリのすべてのPNGをVectorDrawable XMLにすべきですか？ いいえ。単純なアイコンやイラストが最も適した候補です。意図した描き直しで単純なパスにできる場合を除き、写真、質感の多い画像、複雑な効果、細かすぎる作品はラスターで保ちます。

参考資料

1. Android Developers — 複数密度のベクターグラフィックスを追加する — SVGとPSDの読み込み、対応するSVGの範囲、性能の注意、生成drawableリソースを説明しています。
2. Android Developers — VectorDrawable APIリファレンス — ビューポート、塗り、塗り規則、APIレベルの挙動を含むvector、path、group、clip-pathのXML属性を定義しています。
3. W3C — SVGの埋め込みコンテンツ — SVGが画像要素でラスターを含められることを示します。
4. Inkscapeマニュアル — 画像のトレース — ラスターピクセルのトレースと元のビットマップを使うことの違いを説明しています。
5. SVG2Vector — PNGからVectorDrawableへの変換 — 手順の比較で扱った、現在の直接変換の方法です。

---

本番用アイコンを試しませんか？ PNGをSVGへ変換し、パスを確認してからAndroid Studioへ読み込みます。ビューポート、色、穴、実行時表示がチェックを通ってからdrawableを採用してください。