パワポ、やペイントで描き、新規保存で拡張子をsvgに選択することでsvgで保存できます。
簡単な記号(テキスト含む)ならメモ帳でも作成できます。
0Like
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ファイルの以下の手順で作成しました。
- PNGファイルをインクスケープを用いてトレースしSVGにする。
- FlutterIconを使うも失敗。
- 色々調べてSVGOMGを使ってシンプル化
- それでも失敗。
- styleタグを消去するとSVGファイル自体が白黒になってしまう。
0