STORES Product Blog

こだわりを持ったお商売を支える「STORES」のテクノロジー部門のメンバーによるブログです。

コマンドラインでSVGファイルをVectorDrawableに変換する

こんにちは、STORESの @tomorrowkey です。STORES ブランドアプリの開発に携わっています。STORES ブランドアプリはお店ごとにオリジナルアプリを作れるサービスを提供しており、新しいアプリを作る機会が多くあります。そのため、スピーディに新しいアプリを作るための効率化に積極的に投資しています。今日はそんな効率化の一つを紹介したいと思います。

Androidと画像

Androidデバイスにはさまざまな多様性があり、デバイスのサイズ、スクリーンの解像度などから、元来dpという概念を使い、いくつかの画面密度に対してビットマップ画像を用意してリソースを用意することで、それらの多様性に対応してきました。

そんな従来のビットマップ画像を用意する方法では、画像のバリエーションをたくさん用意すればするほどアプリサイズが肥大化してしまう問題がありましたが、最近ではベクター画像を使うことが主流になっています。ベクター画像を使うことによって、アプリの肥大化を防ぐこともできますし、実行中のデバイスに適したサイズで劣化せずに画像を表示できるといういいこと尽くめのメリットがあるわけです。

Androidで扱えるベクター画像ファイル形式は、Vector Drawableという形式です。

Vector Drawableの作り方

Vector Drawableという形式はあまり一般的ではないので、SVGやPSDといった一般的なベクターファイルをAndroid Studioで変換します。

XMLなのでSVGと似ていますが、互換性があるわけではありません。

変換が地味にめんどう

スクリーンレコードでもわかるとおり、ファイルを変換するにはGUIを操作して1つずつのファイルを操作する必要があります。ベクターファイルがいくつもあった場合はとても面倒に感じます。他に方法はないのでしょうか。

実はコマンドラインから変換する処理を実行することができないかというissueがあり、そこでAOSP内にある vector-drawable-tool が紹介されています。 このコマンドラインツールを使えば一括でベクターファイルをVectorDrawableに変換できそうです。

android.googlesource.com

ツールをビルドする

このツールは公式からバイナリで提供されていないので、使うにはビルドする必要があります。AOSPをrepo syncしてツールをビルドするのは骨が折れる作業ですが、有志によってビルドされたものがあるので、そちらの紹介をします。

github.com

このリポジトリのコードを使えば、AOSPのうちvector-drawable-toolに必要なソースコードだけをダウンロードして、ビルドできます。*1 せっかちな人はGithubのReleasesにビルドされたものが配布されているので、そちらを使うのもよさそうです。

vd-toolの使い方

使い方は簡単で -in で変換したいベクターファイルを指定して、-out に出力先のディレクトリを指定します。

vd-tool -in ~/Downloads/ic_gear.svg -c -out ./app/src/main/res/drawable/

GUI操作がなくなったので、大量にベクターファイルがあってもすぐに処理できるようになりました。

さいごに

今回はVector Drawableに変換するツールを紹介しました。STORES ブランドアプリではこのような小さなツールの利用から作業の自動化など、効率化に力を入れています。そのような分野に興味があるモバイルエンジニアの方がいらっしゃいましたら、ぜひ一緒にモバイルアプリ開発をしましょう。 

jobs.st.inc

*1:Issueに指摘がありますが、2024-06-18現在 ダウンロードしたコードの一部を変更する必要があります。