1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AndroidAppでSVGを使用する際に注意したいこと

Last updated at Posted at 2018-09-25

※自分への備忘録として書いています

#やりたいこと
余白も含めて、下記のアイコンをSVGで書き出したい
ic_master.png

#書き出し
「別名保存」で書き出すと不要な記述を含んで書き出されてしまうので、「スクリーン用に書き出し」で書き出します。
ファイル > 書き出し > スクリーン用に書き出し でフォーマットはSVGを選択。
歯車マークをクリックしてSVGの形式設定を下記の通りにしておくと、余計なタグや記述を最小限にできます。

###SVGの形式設定
スクリーンショット 2018-09-25 10.48.54.png

###書き出したソースコード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
  <defs><style>.a{fill:none;opacity:0;}</style></defs>
  <title>ic_clear</title>
  <rect class="a" width="72" height="72"/>
  <path d="M54,21.63,50.37,18,36,32.37,21.63,18,18,21.63,32.37,36,18,50.37,21.63,54,36,39.63,50.37,54,54,50.37,39.63,36Z"/>
</svg>

さらに、defsタグは認識されないので、エディタを開いて、rectに直接styleを記述します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
  <title>ic_clear</title>
  <rect fill="none" opacity="0" width="72" height="72"/>
  <path d="M54,21.63,50.37,18,36,32.37,21.63,18,18,21.63,32.37,36,18,50.37,21.63,54,36,39.63,50.37,54,54,50.37,39.63,36Z"/>
</svg>

これでエラーなくAndroidAppでSVGが表示されるかと思います。

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?