こんにちは。

flutterで使うアイコンに自作アイコンを使いたくなりました。「flutterIcon」というサイトを紹介しているサイトが多くて（というか、それしか出てこなかったな）私も使ってみました。

こんなカワイイ感じのWebサイトで自作アイコンをアップロードすればいいのです。私も張り切ってsvgアイコンを用意して、いざアップロードしても、表示されない事態となります。 結局、何で失敗していたかというと、flutterIconでサポートされていないタグと属性を使っていたからです。以下を例にして試します。ただの線と三角をオブジェクトで作成したものです。

これをアップロードしますと、線の方は以下エラーとなります。 If image looks not as expected please convert to compound path manually. Skipped tags and attributes:line,clip-path(画像が期待どおりに表示されない場合は、手動で複合パスに変換してください。 スキップされたタグと属性：line、clip-path)

三角形の方は以下エラーになります。 If image looks not as expected please convert to compound path manually. Skipped tags and attributes:line,clip-path(画像が期待どおりに表示されない場合は、手動で複合パスに変換してください。 スキップされたタグと属性：polygon、clip-path)

lineやpolygonタグは分からない、と言われるのでSVG編集ツールにて、オブジェクトをパスに変換します。clip-pathはテキストでタグを削除して、以下のようにしました。 線の場合

1
2
3

<svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 512 512" width="512pt" height="512pt">
<path d="M77.59 425.67l-14.66 13.59-27.19-29.33 14.67-13.6 355-329 14.66-13.59 27.19 29.33-14.67 13.6-355 329z"/>
</svg>

三角形の場合

1
2
3

<svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 512 512" width="512pt" height="512pt">
<path d="M477.561 418.052l-221.865-2.857-221.864-2.857 113.406-190.712L260.644 30.914l108.459 193.569 108.458 193.569z"/>
</svg>

編集ツールによってSVGファイルに色々タグが入っているものがあります。シンプルにしたい場合は以下サイトがおすすめです。 https://jakearchibald.github.io/svgomg/

これでもう一度アップロードします。無事表示されました。