LoginSignup
9
7

More than 5 years have passed since last update.

VectorDrawableを使う際に、SVGで設定している色が反映できないときの対処方法

Last updated at Posted at 2016-03-24

以下のようなシンプルなsvgを、Vector Asset Studioを使ってxmlに変換しようとしました。
スクリーンショット 2016-03-24 10.57.26.png

ところが実際に変換をかけようと思ったら、以下のように★が黒になってしましたした。。
(今回のように単純な単色で良ければ、黒で書き出し + android:tintで色付けでも良いですが、色情報を失いたくないという前提で話を進めます)
スクリーンショット_2016-03-24_10_58_51.png

画面下に出ている「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で色付きで読み込めるようになりました。

スクリーンショット_2016-03-24_11_06_20.png

シンプルな画像であれば、こうした対応で良いのですが複雑なsvgだと対応が難しそうです。。。
drawableの中にsvgを直接取り込める&いろんな形式のsvgに対応してくれれば色々と楽なのですが。。。

追記:
http://inloop.github.io/svg2android/ だとdefsに付いてる色指定も反映してくれますね!
非公式なツールなので、使いどころは限られるかもしれませんが、手軽に対応するときには便利そうです。

9
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
7