【Androidアプリ開発】PNG画像をベクター画像（SVG形式）に変換して色も変更してアプリアイコンに設定する方法
yamaday0uです。
会社のタスクで、アプリアイコンに設定したいPNG画像をベクター画像にする時にかなり苦戦したので、同じ苦労をする人を少しでも減らせるよう、解決した方法を紹介します。
本記事の内容は以下のとおりです。
- PNG画像をベクター画像（SVG形式）に変更（無料サービスを利用）
- Android Studioでアイコン設定
- ベクター画像の色を変える
スポンサーリンク
PNG画像をベクター画像（SVG形式）に変更（無料サービスを利用）
説明用のサンプル画像として以下のPNG画像を使用します。
PNG画像をベクター画像に変換するには、Vectorization.orgという無料サービスを利用します。無料でPNG画像をベクター画像に変換してくれるサイトを色々探しましたが、このサイトが一番使いやすかったです。
リンクを開き、「Upload a file」にベクター画像にしたい画像データを選択します。「Output format」はSVGを選択します。
「Start」をクリックすると、次のようにSVG形式のベクター画像が生成されるのでダウンロードします。
Android Studioでアイコン設定
つづいてAndroid Studioでアプリのアイコンを設定します。
任意のAndroidアプリのプロジェクトをAndroid Studioで開き、「Resource Manager」→「＋」→「Image Asset」をクリックします。
Foreground Layerの設定
Configure Image Assetというウィンドウが表示されます。まずForeground Layerを選び、Source Asset → Asset Type: Imageを選択し、さきほどのダウンロードしたSVGファイルの保存場所をPathに指定します。
Background Layerの設定
次にBackground Layerを選びアプリアイコンの背景色を設定します。Source Asset → Asset Type: Colorを選択し、任意の色を選択してください。
アプリをビルド
上記の画面でNext →Finishをクリックしてアプリアイコンの設定を完了します。その後、アプリをビルドすると以下の画像のように設定したアプリアイコンが反映されます。
これでPNG画像をベクター画像に変換してアプリアイコンに設定することができました。
スポンサーリンク
ベクター画像の色を変える
さきほど設定したアプリアイコンはハートの線が黒色でした。これを白色にしてみます。
ベクター画像の色を変えるには、画像ファイルのデータを直接編集します。任意のテキストエディタで先程のSVGファイルを開きます（画像ではVisual Studio Codeで開いています）。
gタグ内のfill属性に設定されている「#000000（黒色）」を「#FFFFFF（白色）」に変更します。
変更を保存したら先ほどの手順でアプリアイコンを設定してからアプリをビルドします。すると以下のとおりアイコンの色を変更することができました！
参考
KeycloakやDockerは以下の書籍を参考に学習していました。非常に読みやすくて初心者の基礎理解には最適な書籍です。
トップ画像：ElisaRivaによるPixabayからの画像
yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村