SVG画像の色をCSSで動的に変更する方法【インラインSVG】

2024年5月16日

アイコンなどの画像の色だけを動的に変更したい・切替えたい場面はよくあります。
例えば、以下の星型のアイコンを、通常時はグレー、マウスホバー時に黄色にしたい場合などです。

通常時

マウスホバー時

このような実装をする場合、色違いの２種類の画像ファイルを用意し、それぞれの表示/非表示を切替えるという方法が考えられますが、複数の画像を用意する手間がかかる上、わずかですがページ上で読み込むデータ量も多くなってしまいます。

そんな時、SVGであれば、使用する画像は１つのままCSSで自在に色を変更することが可能です。
画像ファイルを増やさずに済むので、管理コストやページ容量の削減になります。

また、CSSで色を変更するため、transitionアニメーションで滑らかに色を切り替えることも可能です。

この記事では、「SVGを使用して画像の色をCSSで動的に変更する方法」について詳しく解説していきます。

インラインSVGを使い、CSSだけで色を切替える

前提として、SVG画像の色をCSSで変更するためには、SVG画像がインラインである必要があります。

通常、Webページ上に画像を表示させる場合、外部ファイルとして保存した画像を<img>タグなどで読み込むのが一般的です。

その反面、インラインのSVGとは、画像を.svg形式の外部ファイルとして保存するのではなく、HTMLファイルの中に直接SVGのコードを記述したものを指します。

SVGファイルをテキストエディタで開いてみると、以下のようにコード（XML）で表現されていることがわかります。

このコードをHTMLファイル内に直接記述したものがインラインSVGです。

完成形のコードは以下になります。
マウスホバーしてみると、アイコンの色が切り替わるのがわかると思います。

上記コードの実装方法を解説します。

まずは、デザインからSVG形式の画像を書き出す、もしくは素材サイトからダウンロードするなどして、使用するSVGファイルを用意します。

用意したSVGファイルをテキストエディタで開き、コードをコピーしてHTMLファイル内に貼り付けます。

貼り付けたSVGコードは、通常のhtmlタグと同じく、class名をつけてCSSでスタイルを当てることが出来ます。

まずは、<svg>タグ内でカラーコードを指定している箇所を探します。
塗りつぶし色はfill、線の色はstroke属性で設定されています。

カラーコードが設定されているタグに、任意のclass名を付けます。

先程の手順でclass名をつけた要素に、CSSでスタイルを当てます。

SVGの塗りつぶし色はfill、線の色はstrokeプロパティで設定することが可能です。
今回は、マウスホバー時に塗りつぶし色を変更するため、以下のようにCSSに記述しました。

.icon {
    width: 48px;
    height: auto;
}

.path {
    transition: fill 0.5s;
}

.button:hover .path {
    fill: #fcd000;
}

要件によってはSVGを使用できなかったり、SVGのコード量が多くてインラインにしたくないケースなどもあるかと思います。

そのような場合は、以下の考え方で実装を行うことが出来ます。

完成形のコードは以下のようになります。

SVG画像の色をCSSで動的に変更する方法について解説しました。

インラインのSVGを使用することで、複数の画像ファイルを用意せずとも、CSSでSVG画像の色が変更可能です。

「ただの色違いの画像のために、画像ファイルを増やしたくない」といった場合に非常に使えるテクニックになりますので、是非参考にしてみてください。

内容が良かったらSNSでシェアしていただけると嬉しいです！