インラインSVGを使えば画像の色変更をCSSから楽にできる！

2019年12月2日2021年11月29日

はにわまん

HTMLの画像部分を（たとえばホバー時）に色を変えたい場合は、CSSかJavaScriptで画像を切り替えるといった対応しかありませんでした。

しかし、インラインSVGを使えば、画像もHTMLのように扱うことができるようになり、フォントカラーは背景色のように簡単にCSSから変更もできるようになります！

色が変わりがちなボタンに使うアローアイコンなどはインラインSVGを使えば、めちゃくちゃ管理が楽です。使い方も簡単なのでぜひ試してみてください！

DEMO（デモ）

↓マウスを重ねてみてください。

はにわまん

画像の色変更ができるって感覚が新鮮です

インラインSVGはHTMLに直接タグで貼り付けられる

SVGファイルの実態はパスなどの情報が記載されたXML形式の文字になります。手元にSVGファイルがあればテキストファイルで開いてみてください。

例えば以下のSVG画像は、実はこの記事に直接HTMLタグとして貼り付けていますが画像として表示されていることが分かるかと思います。

上の画像の文字としては実態は以下のとおりです。

<svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='#666'>
<path d='M0 64 L32 32 L0 0 Z' />
</svg>

こんな感じで、SVG画像の実態はパスの集合がテキスト情報で書かれたファイルでして、画像としての扱いではなくHTMLタグとして使うことができるようになっています。

インラインSVGをCSSから制御してみる

それでは、今回のメインテーマであるHTMLに貼り付けたSVG画像をCSSから制御してみます。

SVGタグにidやclassを付与

SVGタグはHTMLタグなので、他の要素と同様にidやclassを付与することができます。CSSから制御したいSVGタグに対して適当なクラスを適応してあげます。

<svg class="arrow-svg" xmlns='https://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='#666'>
<path d='M0 64 L32 32 L0 0 Z' />
</svg>

例えば、.arrow-svgというクラスを付与してみました。

SVGタグの値をCSSから変更

先ほど指定した.arrow-svgを以下のようにCSSから制御してあげると、ホバー時にオレンジに色が変わるという動きにすることができます。

.arrow-svg {
  transition: all 0.3s ease 0s;
}

.arrow-svg:hover {
 fill: #fb8c00;
}

DEMO（デモ）

↓マウスを重ねてみてください。

CSSから制御できそうなSVGの属性としては以下のような値かと思います。

fill	塗りつぶしの色
fill-opacity	透過度
stroke	線の色
stroke-width	線の幅

ボタンのアイコンとして使ってみる

ボタンのベースとしては、以下の「HTMLタグ」のやつを使ってみます。

あわせて読みたい

ボタンでアローアイコンをCSSで表現する3つの方法ボタンでアローアイコンをCSSで表現する3つの方法です。ボタンでアローアイコンをCSSで表現する3つの方法ボタンでアローアイコンを表現する3つの方法です。背景画像…

画像の部分を今回のインラインSVGに変えてクラス名だけ調整しました。

<a class="btn-arrow" href="">ボタン<svg class="btn-arrow-icon" xmlns='https://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='#666'>
<path d='M0 64 L32 32 L0 0 Z' />
</svg></a>

.btn-arrow {
  background: #fff;
  border: 1px solid #666;
  color: #666;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 12px 36px;
  position: relative;
  text-decoration: none;
	font-weight: 700;
	transition: all 0.3s ease 0s;
}

.btn-arrow-icon {
  -webkit-transform: translateY(-50%);
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  margin: 0;
  box-shadow: none;
	transition: all 0.3s ease 0s;
}

.btn-arrow:hover {
  background: #666;
  color: #fff !important;
}

.btn-arrow:hover .btn-arrow-icon {
  fill: #fff;
}

ホバー時にsvgタグのクラスの.btn-arrow-iconに対して、fill: #fff;にて塗りつぶし色の変更をしてあげています。

DEMO（デモ）

↓マウスを重ねてみてください。
ボタン