greenrat
@greenrat

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

FlutterIconでカラーのアイコンを作りたい

解決したいこと

flutterでデスクトップアプリを制作しています。
オリジナルのアイコンを作りたいと思いFlutterIcon ( https://www.fluttericon.com ) を使用したのですが、カラーのSVGファイルを使っているのにアイコン(プレビュー)が白黒になってしまいます。FlutterIconでカラーアイコンを作れるSVGの作成法、またはカラーアイコンを作成できる他サービスを教えてください。

発生している問題・エラー(下記 4.)

If image looks not as expected please convert to compound path manually.
Skipped tags and attributes: style

該当するソースコード(下記 3.)

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="377.553" height="377.783" viewBox="0 0 99.894 99.955"><path d="m117.12 180.074.003-7.944 11.312-11.815c6.221-6.498 11.311-11.832 11.31-11.853 0-.022-5.091-5.356-11.312-11.854l-11.312-11.815-.002-7.942-.002-7.943 1.792 1.862c4.697 4.882 35.896 37.493 35.975 37.604.077.107-.16.386-1.618 1.896-.94.974-8.254 8.611-16.254 16.972-8 8.361-15.749 16.456-17.22 17.99l-2.675 2.787z" style="fill:#fdbf00" transform="translate(-55.003 -98.513)"/><path d="M83.174 188.447v-10.02l5.522-5.767 14.32-14.955 8.798-9.187-.177-.193c-.097-.106-6.542-6.843-14.32-14.97l-14.143-14.778V98.513l2.676 2.788a58290.24 58290.24 0 0 1 21.724 22.684l21.26 22.204 2.212 2.308-.296.31a71126.92 71126.92 0 0 1-46.664 48.73l-.912.93z" style="fill:#00afee" transform="translate(-55.003 -98.513)"/><path d="M55.003 188.451v-10.017l14.318-14.952c7.875-8.224 14.299-14.983 14.276-15.02-.024-.039-6.467-6.78-14.319-14.98L55.003 118.57V98.517l2.562 2.67c1.409 1.469 11.926 12.455 23.371 24.415a28502.328 28502.328 0 0 0 21.374 22.32l.564.578-13.744 14.355c-7.559 7.895-14.028 14.65-14.377 15.009-.348.36-4.559 4.759-9.357 9.775-4.799 5.017-9.1 9.505-9.559 9.975l-.834.854z" style="fill:#00af4f" transform="translate(-55.003 -98.513)"/></svg>

自分で試したこと

SVGファイルの以下の手順で作成しました。

  1. PNGファイルをインクスケープを用いてトレースしSVGにする。
  2. FlutterIconを使うも失敗。
  3. 色々調べてSVGOMGを使ってシンプル化
  4. それでも失敗。
  5. styleタグを消去するとSVGファイル自体が白黒になってしまう。
0

1Answer

パワポ、やペイントで描き、新規保存で拡張子をsvgに選択することでsvgで保存できます。

簡単な記号(テキスト含む)ならメモ帳でも作成できます。

0Like

Your answer might help someone💌