SVG画像の色をCSSで簡単に変更する方法【初心者向け解説】

SVG画像の色を変えたいとき、画像編集ソフトで修正するのは少し手間がかかりますよね。

でも、CSSを使えばHTMLやCSS内で簡単に色を変更することができます。

この記事では、SVG画像の埋め込み方法に応じた色変更の方法を、初心者でもわかりやすいように解説します。

インラインSVGの操作から、外部ファイルの活用まで幅広くカバーしているので、ぜひ参考にしてください！

インラインSVGで色を変更する方法。

インラインSVGとは、SVGコードを直接HTML内に記述する方法です。

この方法では、CSSで簡単に色を指定できます。

具体例：円の色をCSSで変更。

以下のコードでは、SVG内の円の塗りつぶし色をfillプロパティで赤に設定しています。

試しにボタンを押して、色を変更してみてください。

See the Pen Untitled by 1buk1 (@1buk1) on CodePen.

ポイント

• SVG内の塗りつぶし色はfillプロパティで指定します。
• 線の色を変更する場合はstrokeプロパティを使用します。

SVGを直接HTML内に埋め込むことができる場合では、最も簡単で柔軟に操作が可能な方法です。

外部SVGファイルで色を変更する方法。

SVGを外部ファイルとして保存し、<img>タグで読み込む場合、デフォルトではCSSで色を変更することはできません。

しかし、以下の方法を使えば、外部SVGの色も柔軟に変更できます。

SVGをインラインSVGに変換する。

外部SVGファイルの内容をコピーしてHTML内に直接埋め込むことで、インラインSVGと同じようにCSSで色を変更できます。

 currentColorを活用。

外部SVGファイルでもcurrentColorを活用することで、CSSのcolorプロパティに基づいて色を変更できます。

SVGファイルの準備。

SVGファイル内でfill属性やstroke属性をcurrentColorに設定します。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="currentColor" />
</svg>

HTMLとCSSで色を指定。

<img src="icon.svg" class="icon" />

.icon {
  color: blue; /* 円の色が青に変更される */
  width: 50px; /* 画像サイズの調整 */
  height: 50px;
}

この設定で、SVG内の塗りつぶし色がCSSのcolorプロパティの値に従って変化します。

１つのSVGファイルを活用して複数の色違いの画像を出力する。

<img src="icon.svg" class="icon red" />
<img src="icon.svg" class="icon green" />
<img src="icon.svg" class="icon blue" />

.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}

上記の方法を活用すれば、SVGファイルを1つだけ用意するだけで、CSSの記述により異なる色を簡単に適用できます。

フィルターを活用する。

<img>タグで読み込んだSVG画像には、CSSのfilterプロパティを使って色調を変更することもできます。

<img src="icon.svg" class="icon-filter" />

.icon-filter {
  filter: hue-rotate(90deg); /* 色合いを変更 */
}

ただし、フィルターの色調変更は自由度が低いため、カラーバリエーションのコントロールには向きません。

ホバーアクションと併用してみる。

それでは、上記のおさらいも兼ねて、マウスホバー時にSVG画像の色が変わるホバーアクションの例をやってみます。

ホバーアクションは、どのWebサイトでも使われている技術なので、覚えておいて損はありません。

See the Pen Untitled by 1buk1 (@1buk1) on CodePen.

簡単に書きましたが、ボタンや、ロゴなどと基本的な記述は同じです。

対象のSVG画像にマウスがホバーしたら、冒頭で書いた色を変更する動作を付け加えてあげるだけです。

SVG画像をアイコンとして使っていて、ホバーでテキストと一緒に色を変えたいときとかに使えますね！

これで、画像を２つ用意して切り替えていた人は、画像も記述も減ります！

まとめ

SVG画像の色をCSSで変更する方法を3つ紹介しました。

1. インラインSVG

SVGコードをHTMLに直接記述し、fillやstrokeをCSSで変更する方法。最も柔軟で使いやすい。

2. 外部SVGでcurrentColorを活用

外部SVGファイルでもcurrentColorを指定することで、CSSのcolorプロパティで色を動的に変更可能。

3. フィルターを使用する

色調の調整が簡単にできるが、細かい色変更には不向き。

どの方法を選べばいい？

• インラインSVGが使える場合は、これが最もおすすめ。CSSで柔軟にスタイルを変更できます。

• 外部SVGを使いたい場合は、currentColorを活用する方法が便利です。

プロジェクトに合った方法を選んで、SVG画像をもっと効果的に活用してください！