はじめに
Web制作では、配布されたSVGアイコンやロゴの色を少しだけ変更したい場面がよくあります。
Illustratorを開かなくても、SVGはXMLベースで記述されたベクター画像なので、fill や stroke、あるいは style やCSSの指定を書き換えることで色を変更できます 。
この記事では、Web制作の実務でよく使うSVG色変更の手順をまとめます。
そもそもSVGとは
SVG（Scalable Vector Graphics）は、XML形式で記述されるベクター画像です。
PNGやJPGのようなピクセル画像ではなく、図形や線、塗りの情報をコードで表現します 。
そのため、テキストエディタで開くと次のようなコードが見えます。
xml<svg>
<path fill="#000000" d="..." />
</svg>
この fill="#000000" が塗り色の指定です。
また、線の色は stroke で指定できます 。
SVGファイルの色を直接変更する手順
手順1：SVGをテキストエディタで開く
SVGファイルをテキストエディタで開きます。
使用ツール例は、VS Code、サクラエディタ、メモ帳などです。
VS Codeなら、ドラッグ＆ドロップですぐに開けます。
手順2：色コードを探す
次に、色が指定されている部分を探します。
主に確認するのは以下です。
fill（塗り色）stroke（線の色）style="fill:..."などのインライン指定- CSS側の
fillやstroke指定
検索するときは、次の文字列が便利です。
fill=stroke=style=fill:stroke:
手順3：色コードを書き換えて保存する
見つけた色コードを、任意のカラーコードに変更します。
xml変更前: fill="#000000"
変更後: fill="#ff6600"
保存後、ブラウザで開いて色が変わっているか確認します。
カラーコードの確認には、Color Hexのようなサイトが便利です。
色が変わらないときの対処
実務では、色を書き換えても反映されないケースがあります。
style属性で指定されている場合
次のような書き方の場合があります。
xml<path style="fill:#000000;" d="..." />
この場合は、style= や fill: を探して変更します 。
CSSで色が指定されている場合
SVG内に class がある場合、外部CSSが影響している可能性があります。
xml<path class="icon-color" d="..." />
この場合は、CSS側の fill を修正します 。
複数のpathに色がある場合
複数の path に色が設定されていることもあります。
xml<path fill="#000000" d="..." />
<path fill="#cccccc" d="..." />
この場合は、該当する色をすべて変更します。
VS Codeの「すべて置換」が便利です。
注意点
<img>タグで読み込んだ外部SVGは、HTML側のCSSから中身のfillを直接変えられないことがあります 。- その場合は、SVGファイル自体を編集するか、インラインSVGにする必要があります 。
currentColorを使ったSVGは、親要素のcolorに応じて色が変わるため、運用方法によっては便利です 。
まとめ
SVGは、コードとして編集できる画像です。
そのため、fill や stroke を書き換えるだけで色変更が可能です 。
実務で押さえておきたいポイントは次の3つです。
fillとstrokeを探す。style指定の有無を確認する。- CSSや読み込み方法の影響を疑う 。
この基本を覚えておくと、アイコン調整やUI修正の作業効率が大きく上がります。
