SVGで複数パーツの色を管理する方法｜fill属性とCSSの使い分け

SVGアイコンは、単色だけでなく複数のパーツを異なる色で表示できることが大きな特徴です。

しかし、SVGファイル内に直接色を指定してしまうと、後からデザインを変更したい場合に編集が手間になることがあります。

この記事では、SVGの複数パーツの色を管理する方法をサンプルコード付きで解説します。

SVGで色を指定する3つの方法

SVGの色は、主に次の3つの方法で指定できます。

方法	管理しやすさ
fill属性を直接書く	△
SVG内のstyleを使う	○
外部CSSで指定する	◎

デザイン変更やダークモード対応などを考慮すると、可能な限りCSSから色を管理する方法がおすすめです。

fill属性を直接指定する

もっともシンプルな方法です。

<svg class="my-icon" viewBox="0 0 24 24">
  <path fill="#ff0000" d="M12 2a10 10 ... />
  <path fill="#ff0000" d="M12 6a6 6 ... />
</svg>

メリット

• 分かりやすい
• SVG単体で完結する

デメリット

• 色を変更するたびにSVGファイルを編集する必要がある
• 同じ色を使用するパーツが多いと、指定の手間がかかる
• 同じアイコンを別の色で使い回しにくい

SVG内のstyleで管理する

SVG内にCSSを書くこともできます。

<svg class="my-icon" viewBox="0 0 24 24">
  <defs><style>.icon{fill:#ff0000;}</style></defs>
  <path class="icon" d="M12 2a10 10 ... />
  <path class="icon" d="M12 6a6 6 ... />
</svg>

同じ色を複数のパーツで使用する場合は、fill属性を個別に書くより管理しやすくなります。
ただし、色を変更する場合はSVG自体を編集する必要があります。

CSSで管理する（おすすめ）

もっとも管理しやすい方法は、SVGにはパーツごとにクラス名だけを付与し、色はCSSで指定する方法です。

HTML

<svg class="my-icon" viewBox="0 0 24 24">
  <path class="bg-part" d="M12 2a10 10 ... />
  <path class="icon-part" d="M12 6a6 6 ... />
  <path class="shadow-part" d="M12 8a4 4 ... />
</svg>

CSS

.my-icon .bg-part {
  fill: #0066cc;
}

.my-icon .icon-part {
  fill: #ffffff;
}

.my-icon .shadow-part {
  fill: #004999;
}

このようにパーツごとにクラス名を付けておくと、それぞれの色をCSSから個別に管理できます。

SVGファイルを編集することなく配色を変更できるため、ブランドカラーの変更やダークモード対応、季節ごとのデザイン変更にも柔軟に対応できます。

メリット

• デザイン変更しやすい
• ダークモードにも対応しやすい
• テーマカラーの変更にも強い
• CSSだけで一括変更できる

この方法は、企業サイトなどでブランドカラーの変更や季節イベントに合わせた配色変更を行う場合にも、柔軟に対応できます。

currentColorを使う方法

単色アイコンであれば、currentColor を利用する方法も便利です。

HTML

<path fill="currentColor" d="..." />

CSS

.my-icon {
    color: #ff0000;
}

fill ではなく親要素の color を利用するため、テキストカラーとアイコンの色を簡単に統一できます。

ただし、currentColor は基本的に単色アイコン向けであり、
複数色アイコンでは、一部のパーツに利用するケースはありますが、すべての色を管理する用途には向いていません。

SVGの色管理で注意するポイント

SVGをCSSで制御する場合は、以下の点に注意しましょう。

imgタグではCSSからfillを変更できない

<img src="icon.svg">

このように画像として読み込んだSVGは、通常は内部の fill をCSSで変更できません。
CSSで色を変更したい場合は、HTMLへSVGをインラインで記述する方法が適しています。

CSSで上書きできない場合がある

SVGに直接 fill 属性が指定されている場合や、CSSのセレクタの詳細度によっては、期待どおりに色を変更できないことがあります。

その場合は、
・SVG内の fill を削除する
・CSSの指定を見直す
ことで解決できる場合があります。

まとめ

SVGの色を管理する方法はいくつかありますが、保守性や再利用性を考えると、SVGにはクラスのみを付与し、色はCSSで管理する方法がおすすめです。

• 少数のアイコンなら fill 属性でも問題ない
• 同じ色をまとめるならSVG内の style が便利
• 単色アイコンなら currentColor も活用できる
• 保守性やデザイン変更を重視するならCSSで管理するのがおすすめ

プロジェクトの規模や運用方法に合わせて、適切な色管理方法を選びましょう。