【CSS】SVGの色を変更する方法まとめ

【CSS】SVGの色を変更する方法まとめ HTML/CSS

SVG はアイコンやイラストに広く使われる形式で、CSS を使って柔軟に色を変更できます。ただし、埋め込み方法（<img> / CSS 背景 / インライン SVG）によって適用できる手段が異なります。本記事では SVG の色変更テクニックをケースごとにまとめます。

<img>タグで読み込んだSVG

<img src="icon.svg"> の形で読み込んだ場合、直接 CSS の color や fill は適用できません。この場合は以下のような工夫が必要です。

  • 色違いのファイルを用意する
  • SVG を background-image に埋め込み、filter で色調整する
/* 青系 (#1e6dc1) をフィルターで水色系 (#4A93EF) に近づける例 */
.icon-blue img {
  filter: invert(54%) sepia(29%) saturate(643%) hue-rotate(182deg) brightness(95%) contrast(91%);
}

正確な色変更は難しいため、インラインSVGを使う方が推奨です。

CSS背景として使う場合

SVG を background-image として読み込んだ場合も、直接色を変えることはできません。色を変えたい場合は、fill の値を変更した SVG ファイルを別途用意するか、mask-image を使います。 

.icon {
  width: 40px;
  height: 40px;
  background: url('icon.svg') no-repeat center/contain;
}

.icon-mask {
  width: 40px;
  height: 40px;
  background-color: #e35f57; /* 任意の色 */
  -webkit-mask: url('icon.svg') no-repeat center/contain;
  mask: url('icon.svg') no-repeat center/contain;
}

マスクを使う方法なら、背景色を変えるだけで自由に色を切り替えられます。

インラインSVGで埋め込む場合

最も柔軟なのが、HTMLに直接SVGコードを書き込む方法です。fill や stroke を CSS で変更できます。 

<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

.icon {
  width: 40px;
  height: 40px;
  fill: #02a1cd; /* パスの塗りを変更 */
  stroke: #333;  /* 線の色を変更 */
}

currentColor を使う

SVG の fill="currentColor" を指定しておけば、親要素や自身に設定された color を反映できます。テキストと同じ色で統一したいときに便利です。 

<svg class="icon" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
</svg>

.icon {
  color: #e35f57; /* この値が反映される */
}

まとめ

  • <img> や background-image では直接変更不可。フィルターやマスクで代用可能。
  • 自由度が高いのはインラインSVG。CSSの fill・stroke で簡単に変更できる。
  • currentColor を使えば、テキスト色と連動して自動的に色が変わる。

実務では、再利用性やメンテナンス性を考慮して「インラインSVG + currentColor」を基本とし、必要に応じてマスクやフィルターを使い分けるのがおすすめです。