無料で使えるsvgはお手軽ですがほとんどの場合色や向きを変えることができません。
一応cssでsvgをカスタマイズすることはできますが、JQueyを使ったり長かったりと開発に
支障が出るレベルでめんどくさかったりします。
悩ましい案件ですが、自分の場合はGIMPツールを使ってsvgの装飾を変えました。そこまでやるとsvgじゃない？気のせいです。
ここで例として挙げているのはピンクの背景に白色のsvgアイコンを載せたい時の対処法です。
おさえたいポイントは7か所。それでは以下の手順に従ってsvgを加工してみてください。
①ファイル/インポートで目的のsvgを開く。途中で比率を変えるモーダルが現れるがそのままOKを選択。
②svgが表示される。
③選択=>色域を選択をクリック。すると、csvの黒色部分が点線で囲まれます。
④この状態で「背景色で塗りつぶす」を選択。白色になっている場合は黒い部分が白色に塗り替えられます。
⑤選択=>選択を解除を選択。
⑥最後にファイルを保存します。GIMPは普通に名前をつけて保存をすると,xcfファイルという形式に変換されてしまい
そのままでは使用できなくなるので、名前をつけてエクスポートを選択。
⑦エクスポート後最終確認のモーダルが表示されます。ここで背景色を保存のチェックを外す。
後は保存先の開発中アプリなりデスクトップなりで確認して白色になっていれば成功です。
以上で終了になります。cssとそん色ない精度を保ちながら作ることができました。
特に難しいところもないので下手に類似品を探したりcssで加工するよりはこっちのほうが効率的です。
しいていうならGIMPが結構重いので頑張ってインストールしましょう。というだけ。
お疲れ様でした。
P.S.久々にGIMPを使った気がする・・・。
