AndroidでSVGをそのままdrawableとして使える？

VectorDrawableのリソースは、Android独自のXMLの語彙を使います。ビューポート、表示サイズ、描画パスを持つvector要素です。logo.svgをlogo.xmlに名前変更しても、これらの要素には変換されません。SVGは塗り、線、変形に別の名前を使い、このエクスポーターがあえて受け付けない機能にも対応しています。

UI用のシンプルなアイコンやフラットなイラストには、SVGをAndroidに変換するツールを使ってください。アップロードしたSVGか、ロックを解除済みの自分の結果を使えます。ビットマップから始める場合は、先に画像をベクター化して輪郭を確認してから書き出します。リソースの変換では、もう一度トレースすることはなく、既存の結果のロック解除が不要になることもありません。

自分で試せる小さな例

この三角形をtriangle.svgとして保存してアップロードします。リソース名はic_triangle、長辺は24dpにします。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#fa643c" d="M12 2L22 22H2Z"/>
</svg>

ダウンロードしたXMLには、24×24のビューポート、24dpの表示サイズ、1つのパスが入っています。オレンジの塗りは、Androidのアルファ値が先頭に来る形式の色#fffa643cになります。ic_triangle.xmlをapp/src/main/res/drawable/に置きます。レイアウトではandroid:src="@drawable/ic_triangle"を使い、アプリのコードでは対応するdrawableのリソースIDを使います。

ビューポートは形状を表し、dpのサイズはdrawableの想定される表示サイズを表します。長方形のSVGは縦横比を保つので、長辺を48dpにしても正方形に引き伸ばされることはありません。リソース名は小文字の英字で始め、小文字の英字、数字、アンダースコアを使えます。

変換で残るもの

この変換ツールは、パスと基本的な図形、単色、塗りの不透明度、互換性のある線のスタイル、nonzeroとeven-oddの両方の塗りに対応しています。対応している変形は、パスの座標に統合されます。even-oddの塗りを使うため、この書き出しはAPI 24以降が対象です。古いアプリ向けの互換用ラッパーは作りません。

テキスト、グラデーション、マスク、クリッピング、埋め込み画像、エフェクトには、別の下準備が必要です。テキストはベクター編集ソフトでアウトライン化してください。変形で軸ごとに異なる拡大率がかかっている線は、アウトラインに変換してください。グループの不透明度は図形の重なりを変えてしまうことがあるため、エクスポーターは不透明度を個別に適用して見た目を変えるのではなく、受け付けません。削除した安全でない要素は、結果に一覧で表示されます。

細かいアートワークには、PNGでの書き出しのほうが適したリソースになることがあります。技術的にはベクターでも、パスの数がとても多いと描画に時間がかかります。不要なポイントを減らし、実際の画面上のサイズで試してください。

アプリで結果を確認する

Android Studioでリソースをビルドし、明るい背景と暗い背景で確認します。文字の中の穴、細い線、意図した色、透明部分をチェックしてください。細かな部分が最も気になる小さいサイズで、元の画像とdrawableを見比べましょう。XMLのコンパイルが通れば、リソースが受け付けられたことは確認できますが、最終的な見た目は端末での描画とアプリのtint設定によって決まります。

ランチャーアイコンには、アプリアイコン作成ツールを使ってください。ランチャーアイコンには、通常のdrawableの書き出しでは用意されない、画面密度とアダプティブアイコンのレイヤーの要件があります。