SVG の色を変える
☞ すべてブラウザ内で処理 — アップロードは一切ありませんここに SVG をドロップ
またはクリックして選択 — SVG のみ
プレビュー
SVG の色を変える
ファイル内のすべての色を 1 つのパレットに集約 — どれを編集してもすぐ結果が見えますし、currentColor にすれば色の管理をまるごと CSS に任せられます。
またはクリックして選択 — SVG のみ
プレビュー
1 つのパレットにすべての色
色は fill や stroke 属性にあることもあれば、インラインの style の中にあることも、ファイルに埋め込まれたスタイルシートの中にあることもあります。Illustrator や Figma からの書き出しは、たいてい最後のパターンです。テキストエディターで SVG を手作業で直すと、いくつかの図形を取りこぼしがちなのはこのためです。
このツールはその 3 か所に加えて、グラデーションのストップやフィルターの色まで読み取り、1 つのパレットにまとめます。スウォッチを変えれば、その色がどこに書かれていようと、すべての出現箇所が一緒に変わります。
3 ステップ
.svg ファイルを選びます。ファイルは端末内に留まります。
ファイル内の色ごとに 1 つずつ、使用回数付きで並びます。
変わるのは色だけで、図形には手を触れません。
かんたん回答
その図形に、置かれている要素の文字色を使うよう指示します。currentColor にしたアイコンは、暗いボタンの中では白に、控えめな文字の中ではグレーになります。2 つ目のファイルも追加の CSS も不要です。アイコンライブラリが SVG を配布する際の標準的なやり方でもあります。
グラデーションは色そのものではなく、ファイル内の別の定義への参照だからです。置き換えると色が変わるのではなくグラデーションが消えてしまいます。グラデーション内の個々のストップカラーはパレットに出てくるので、そちらを編集してください。
そのファイル自体に色が指定されていないということです。多くの場合、図柄がすでに currentColor になっているか、ファイルの外のスタイルシートから色を継承しています。SVG ビューアーで開いてソースを確認してみてください。
色は実際に解決される値でグループ化されるため、#FFF・#ffffff・white は 1 つの項目になります。編集するとそれらすべてが、それぞれ元の表記のまま更新されます。
いいえ。ファイルの解析と書き換えはブラウザ内で行われます。