以下のようなシンプルなsvgを、Vector Asset Studioを使ってxmlに変換しようとしました。
ところが実際に変換をかけようと思ったら、以下のように★が黒になってしましたした。。
(今回のように単純な単色で良ければ、黒で書き出し + android:tint
で色付けでも良いですが、色情報を失いたくないという前提で話を進めます)
画面下に出ている「Error」を見てみます。
In hoshi.svg:
ERROR@ line 2 <defs> is not supported
どうやら現状のVector AssetStudioではsvgに含まれるdefs
タグを読み込めないようです。
StackOverFlowにも同様の症状が載っていました。
これが原因でVectorDrawableを諦めるのは少し悔しいのでなんとか対応してみます。
まず読み込めなかったsvgファイルをテキストエディタで見てみます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="574.448 207.512 31.072 29.984">
<defs>
<style>
.cls-1 {
fill: #ffd100;
}
</style>
</defs>
<path id="_" data-name="★" class="cls-1" d="M16-27.488l-3.744,11.52H.448l9.5,7.136L6.3,2.5,16-4.512,25.664,2.5,22.048-8.832l9.472-7.136H19.712Z" transform="translate(574 235)"/>
</svg>
これを見ると、defs
の中で色指定(#ffd100
)されていることがわかります。
これを以下のように書き換えてみます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="574.448 207.512 31.072 29.984">
<path id="_" fill="#ffd100" data-name="★" class="cls-1" d="M16-27.488l-3.744,11.52H.448l9.5,7.136L6.3,2.5,16-4.512,25.664,2.5,22.048-8.832l9.472-7.136H19.712Z" transform="translate(574 235)"/>
</svg>
色の指定をpath
の中に直接入れました。
これでVector Asset Studioで色付きで読み込めるようになりました。
シンプルな画像であれば、こうした対応で良いのですが複雑なsvgだと対応が難しそうです。。。
drawableの中にsvgを直接取り込める&いろんな形式のsvgに対応してくれれば色々と楽なのですが。。。
追記:
http://inloop.github.io/svg2android/ だとdefs
に付いてる色指定も反映してくれますね!
非公式なツールなので、使いどころは限られるかもしれませんが、手軽に対応するときには便利そうです。