SVG の色を変える

SVG カラーチェンジャー

ファイル内のすべての色を 1 つのパレットに集約 — どれを編集してもすぐ結果が見えますし、currentColor にすれば色の管理をまるごと CSS に任せられます。

SVG の色を変える

☞ すべてブラウザ内で処理 — アップロードは一切ありません

ここに SVG をドロップ

またはクリックして選択 — SVG のみ

1 つのパレットにすべての色

SVG のどこに色が隠れているか

色は fill や stroke 属性にあることもあれば、インラインの style の中にあることも、ファイルに埋め込まれたスタイルシートの中にあることもあります。Illustrator や Figma からの書き出しは、たいてい最後のパターンです。テキストエディターで SVG を手作業で直すと、いくつかの図形を取りこぼしがちなのはこのためです。

このツールはその 3 か所に加えて、グラデーションのストップやフィルターの色まで読み取り、1 つのパレットにまとめます。スウォッチを変えれば、その色がどこに書かれていようと、すべての出現箇所が一緒に変わります。

3 ステップ

SVG の色を変更する手順

01

SVG をドロップ

.svg ファイルを選びます。ファイルは端末内に留まります。

02

スウォッチを編集

ファイル内の色ごとに 1 つずつ、使用回数付きで並びます。

03

ダウンロード

変わるのは色だけで、図形には手を触れません。

かんたん回答

SVG カラーチェンジャーのよくある質問

currentColor は実際に何をしていますか?

その図形に、置かれている要素の文字色を使うよう指示します。currentColor にしたアイコンは、暗いボタンの中では白に、控えめな文字の中ではグレーになります。2 つ目のファイルも追加の CSS も不要です。アイコンライブラリが SVG を配布する際の標準的なやり方でもあります。

グラデーションを編集できないのはなぜですか?

グラデーションは色そのものではなく、ファイル内の別の定義への参照だからです。置き換えると色が変わるのではなくグラデーションが消えてしまいます。グラデーション内の個々のストップカラーはパレットに出てくるので、そちらを編集してください。

パレットが空です

そのファイル自体に色が指定されていないということです。多くの場合、図柄がすでに currentColor になっているか、ファイルの外のスタイルシートから色を継承しています。SVG ビューアーで開いてソースを確認してみてください。

同じに見える 2 つの色が 1 つのスウォッチにまとまっています

色は実際に解決される値でグループ化されるため、#FFF・#ffffff・white は 1 つの項目になります。編集するとそれらすべてが、それぞれ元の表記のまま更新されます。

ファイルはアップロードされますか?

いいえ。ファイルの解析と書き換えはブラウザ内で行われます。