SVG の色を変えるということ

SVG はテキストです。そのどこかで図形が fill="#1f2937" と言っていて、アイコンが濃いグレーなのはただそれだけの理由です。この 7 文字を変えれば、アイコンは好きな色になります。

やっかいなのは、それを見つけることです。Illustrator や Figma から出た本物の書き出しは、色を 1 か所にまとめてはくれません。fill 属性、style 属性、クラス規則がぎっしり詰まった <style> ブロック、そしてグラデーションの中のストップへと散らばっています。テキストエディタで開けば、1000 行の中から肝心の 11 行を探すことになります。

このツールはファイル全体を読み、使われている色をすべて集めて、表にまとめます。 行の右側の色を変えれば、その色を使っているすべての図形が一緒に変わります。選んだそばから「編集後」の絵に反映されます。返ってくるのは、色の値だけが新しくなったあなたのファイルです。

色を変える 2 つの方法

色ごと —— 2 つの絵の下の表が、このファイルにある色の一覧です。左が元の色、右が変更後の色。各行は最初どちらも元の色なので、あなたが変えるまで何も変わりません。1 つ変えれば、その色の使用箇所がすべて一緒に変わります。「青いところを緑に」や、アイコンをブランドカラーに合わせるときはこちらです。
図形ごと —— 絵の中の図形をクリックすれば、ほかの 20 個と同じ色を使っていても、その 1 つだけを変えられます。その図形の塗りと線に個別の値が入り、ほかは何も動きません。

2 つは組み合わせて使えます。まずパレットを整え、それから 1 つだけ違う色にしたい図形を直す、という具合です。

すべてを 1 色にする

いちばん多い作業です。アイコンが 5 段階のグレーで届いたけれど、暗いヘッダー用にべた塗りの白が欲しい。印刷用にべた塗りの黒が欲しい。ボタン用にブランドカラー 1 色にしたい。

色を選んで「適用」を押すと、ファイル内のすべての色がその 1 色になります。塗りのない図形は塗りのないままなので、線は線として、抜きは抜きとして残ります。

どこを探すか

属性として書かれた fill と stroke
style 属性の中にある同じプロパティ
<style> ブロック —— .cls-1 { fill: #231f20; } のようなクラス規則。Illustrator の書き出しはほぼこの形です
グラデーション内の stop-color。グラデーションをストップごとに変えられます
フィルターの flood-color と lighting-color

CSS で許されるどの書き方でも読み取ります。#f00、#ff0000、rgb(255,0,0)、rgba(255,0,0,.5)、red や darkslategray のような名前も同じです。透明度も保たれるので、半透明の図形は新しい色でも半透明のままです。

変更しないもの

グラデーションやパターンそのもの。 グラデーションの中のストップは変えられますが、グラデーション自体をべた塗りに変えることはしません。url(#pattern) で塗られた図形もそのままです。
埋め込まれたビットマップ。 SVG の中に貼られた PNG は写真であって図形ではなく、変えるべき塗りを持ちません。その場合は画像から色を取得や画像編集ソフトをお使いください。
色以外のすべて。 不透明度、線の太さ、変形、テキストは、入れたときのまま出てきます。

アップロードはされません

ファイルはあなたのブラウザの中で読み込まれ、色を変えられ、書き直されます。サーバーに届くことはありません。未発表のロゴ、クライアントのブランドマーク、秘密保持契約下の素材なら、これこそが肝心な点です。

アップロード待ちもサイズ制限もなく、ページさえ読み込めばオフラインでも動き続けます。

「何も変えない」への意図的な例外が 1 つあります。ファイルに <script> ブロックが含まれている場合は取り除き、そのことを画面でお知らせします。絵が実行可能なコードを持ち歩く理由はありませんし、このツールはお見せするためにファイルを描画しなければならないからです。

こんなときに使われています

デザインソフトを開かずに、アイコンのセットをブランドカラーに合わせる
ロゴを暗いヘッダー用にべた塗りの白、印刷用にべた塗りの黒にする
色が間違って出てきたその 1 つの図形を直す
同じ絵の明るい版と暗い版を作る
グラデーションを作り直さずに、ストップの色だけを変える
選ぶそばから絵が変わるので、色を手早く試す

知っておくとよいこと

2 つのプレビューは変更前と変更後を同じ倍率で描いたものです。「編集後」のほうは実物のファイルなので、見えているものがそのままダウンロードされます
図形ごとの変更は、それで足りる場合は素の fill / stroke 属性として書き込み、ファイル内の <style> 規則に負けてしまう場合にだけインラインの style にします。推測ではなく、実際にどうなったかを確かめて決めています
色は値でまとめられるので、#FFF、#ffffff、white は 1 つの行になります
行ごとに個別の取り消しがあり、すべての色を元に戻すを押せばファイル全体が届いたときの状態に戻ります
数百色あるファイルはほぼ確実に写真のトレースです。使用回数の多いものだけを一覧します
結果のまわりの余白を切り取るには SVG の余白を切り取るをどうぞ
結果を PNG にするには SVG を PNG にをどうぞ

使い方

クリックしてアップロードを押すか、SVG を枠にドロップします
ファイル内のすべての色が表の行として並びます。左が元の色です
右側の色を決めると（選んでも、16 進数を打ち込んでも）、その色が使われている場所すべてで変わります
あるいは「編集後」の絵の中の図形をクリックして、その 1 つだけを変えます
べた塗り 1 色にしたいときはすべてを 1 色にするを使います
SVG をダウンロードを押すか、SVG コードをコピーしてページに直接貼り付けます

SVG の色を変える