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

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

やりたいこと

余白も含めて、下記のアイコンをSVGで書き出したい

書き出し

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

SVGの形式設定

書き出したソースコード

<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が表示されるかと思います。