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

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

通常時

マウスホバー時

通常考えられる方法としては、色違いの2種類の画像ファイルを用意し、マウスホバーの有無で表示画像を切替える方法があると思います。

しかし、SVGを使うことで、使用する画像は1つのままCSSで自在に色を変更することが可能です。
余計な画像ファイル書き出しが必要なくなり、より効率的なコードを書くことが出来ます。

今回はそんな「SVGを使用して画像の色をCSSで動的に変更する方法」を解説します。

目次

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

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

インラインのSVGとは?

通常、Webページ上に画像を表示したい場合、HTMLファイルとは別に画像ファイルを保存(外部ファイル化)し、HTMLからその画像を読み込む形式で画像を表示するのが一般的です。

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

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

SVGファイルをテキストエディタで開いた際の表示例

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

CSSでSVGの色を切替える方法解説

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

See the Pen SVGの塗りつぶし色をCSSで切り替える by iwa (@iwa0109) on CodePen.

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

① SVGコードをHTMLファイルに埋め込み

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

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

SVGコードをHTMLファイルに直接埋め込んだ例

② SVGタグ内の要素にclass名を付ける

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

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

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

<svg>タグ自身にもclass名をつけておきます。

③ CSSで色変更

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

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

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

.path {
    transition: fill 0.5s;
}

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

インラインSVGを使わない実装方法

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

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

  • 「通常時の画像」と「マウスホバー時の画像」の2つを用意
  • 「通常時の画像」の上に、「マウスホバー時の画像」を重ねて表示
  • 「マウスホバー時の画像」は初期状態で透明にしておく
  • マウスホバーされたら、「マウスホバー時の画像」の透明化を解除

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

See the Pen マウスホバーで画像切替え by iwa (@iwa0109) on CodePen.

まとめ

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

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

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

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