SVGカラー一括置換ツール
ローカル処理SVGマークアップ内のfill、stroke、stop-colorなどの色指定文字列を高速に検索・置換します。
使い方と処理基準
SVGマークアップ内のfill、stroke、stop-colorなどの色指定文字列を高速に検索・置換します。
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
処理制限
- 最大入力文字数: 100,000文字
アイコンSVGの色をブランドカラーに変えるときに使います。置き換える色と新しい色を選ぶと同じ色をすべて置き換え、「すべて置き換え」をオンにするとソースに書かれたHEXの色（#…）をすべて新しい色1つに揃えます。
できること
- 特定の色を置換
- #FF0000と#ff0000のように表記が違っても同じ色なら置き換えます。
- すべて置き換え
- 色を問わず、ソースのHEXの色（#…）をすべて新しい色にします。
SVGカラー一括置換ツールの使い方
- 1SVGを貼り付けSVGソースを貼り付けます。
- 2色を選ぶ置き換える色と新しい色を選びます。
- 3コピー変更したSVGソースをコピーします。
活用例
赤を青に
入力: <svg><rect fill="#ff0000" stroke="#FF0000"/></svg>、#ff0000 → #3366cc
結果: <svg><rect fill="#3366cc" stroke="#3366cc"/></svg>
主な利用シーン
- 無料アイコンの色をブランドカラーに変えるとき
- ダークモード用のアイコンの色を作るとき
よくある質問 (FAQ)
CSSクラスで色を付けたSVGも変わりますか？
SVGソース内に書かれたHEXの色の値を置き換えるので、<style>内の色も同じ値なら変わります。redのような色名や外部CSSファイルの色は変わりません。