SVGの色を変えるCSSコード生成ツール
SVGを読み込んで色を選ぶと、色を変えるコードを3方式まとめて出力します。 見た目を比べて、使える方式を選んでください。
STEP 1SVGを読み込む
STEP 2色を選ぶ
STEP 3見比べる
元のSVG
方式1：インラインSVG
方式2：mask-image
方式3：filter
STEP 4コードをコピーする
方式1：インラインSVG に書き換える
推奨
HTMLに直接SVGを書き込み、fill を currentColor にします。
色はCSSの color で決まるので、ホバーやダークモードで色を変えられます。
色ズレもありません。使えるならこれが一番です。
方式2：mask-image で塗る
img のまま使える
SVGを型紙（マスク）として使い、背景色で塗りつぶします。
色は background-color で自由に指定でき、ズレません。
ただしSVGの中の色はすべて捨てられるので、単色アイコン向けです。
方式3：filter で近似する
最終手段
<img> のまま、CSSの filter を重ねて目的の色に近づけます。
HTMLを触れないときの逃げ道です。
計算で近似するため、わずかに色がずれます。
ブランドカラーの指定がある場合は方式1か2を使ってください。
どれを使えばいいか
| 方式 | 向いている場面 | 色の正確さ |
|---|---|---|
| インラインSVG | HTMLを編集できる。ホバーやダークモードで色を変えたい。多色のSVGを扱う。 | 完全一致 |
| mask-image | <img> や背景として使いたい。単色のアイコン。HTMLを増やしたくない。 |
完全一致 |
| filter | HTMLもSVGファイルも触れない。CMSが吐き出す <img> をCSSだけで何とかしたい。 |
近似 |
なぜ img のSVGはCSSで色が変わらないのか
<img src="icon.svg"> で読み込んだSVGに fill や color を当てても効きません。
<img> の中身は別のドキュメントとして扱われるからです。
親ページのCSSは、その中の要素には届きません。画像として表示されているだけで、
ブラウザから見れば JPEG を貼っているのと変わりません。
ですので、色を変えたいなら「中身に手を届かせる（インラインSVG）」か、 「中身は諦めて形だけ使う（mask-image）」か、 「画像全体を加工する（filter）」のどれかになります。このツールはその3つを同時に出します。
filter の精度について
方式3は、黒（#000）を起点に invert → sepia → saturate →
hue-rotate → brightness → contrast を重ねて、
目的の色に近づけています。
この組み合わせは手計算では求められないため、数値を少しずつ動かして最も近い解を探索しています。 探索なので、同じ色でも実行するたびに値が変わることがあります。
先頭に付けている brightness(0) saturate(100%) は、
元のSVGが何色でもいったん黒に落とすためのものです。これがないと、
色付きのSVGでは結果がずれます。
なお、この6つの組み合わせでは、そもそも到達できない色があります。
たとえば #FF0000 はぴたりと合いますが、#DC2626 のような
中間の明度・彩度の赤は、何度計算しても誤差が残ります。解の探索に失敗しているのではなく、
フィルタの式の上で届かない色です。
出力の下に出る誤差の目安を見てください。緑なら実用範囲、黄色や赤が出たら方式1か2に切り替えてください。
ブラウザの対応
mask-image は Safari と一部の古い環境で -webkit- 付きが必要です。
出力には両方入れてあります。
filter は主要ブラウザで問題なく動きます。IEは対象外です。
関連記事
- SVGの色をCSSで変更する方法（考え方をくわしく解説しています）
- Illustratorでアウトライン化する方法
ほかのツール
- イメージマップ作成ツール … 1枚の画像に複数のリンクを貼るHTMLを、画像の上でドラッグするだけで作成します。
- HTMLメールチェッカー … メルマガのソースを貼り付けると、メールクライアントで崩れる原因を洗い出します。
- ツール一覧をみる