Scalable Vector Graphics（SVG）は、ベクトル形式でイラストレーションやアイコンを表現するためのXMLベースのフォーマットです。SVG画像の色を変更することは、ウェブデザインやグラフィックスにおいて一般的な要望です。本記事では、SVG画像の色を変更するための4つの異なる方法を紹介します。
直接SVGコードを変更する
SVGファイルのコードを開いて、各要素のfillやstroke属性を変更することで、色を変更できます。以下は円を赤色に変更する例です。
<circle cx="50" cy="50" r="40" fill="red" />
CSSを使用する
SVGに対してCSSを使用してスタイルを適用することもできます。以下は、SVGファイル内でCSSを使用してスタイルを指定する例です。
<style>
<![CDATA[
circle {
fill: blue;
}
]]>
</style>
外部CSSファイルを使用する
外部のCSSファイルを作成し、SVGファイルからそのスタイルを参照することもできます。
<link rel="stylesheet" type="text/css" href="styles.css" />
そして、styles.css ファイル内でスタイルを指定します。
circle {
fill: green;
}
JavaScriptを使用する
JavaScriptを使ってSVG要素のスタイルを動的に変更することもできます。
document.getElementById("myCircle").style.fill = "purple";
よくある質問（FAQ）
Q. SVGのfill色をCSSで変更するには？
A. インラインSVGではfill属性を削除してCSS fill: colorで設定します。currentColorを使うと親のcolorプロパティの値が継承されます。imgタグ経由では直接変更できません。
Q. SVG画像をCSSのfilterプロパティで色変更するには？
A. imgやbackground-imageのSVGにはfilter: hue-rotate()・brightness()・invert()等の組み合わせで色を変えられます。特定の色への変換はフィルター値の計算が複雑です。
Q. SVGスプライトを使ってアイコンの色をCSSで管理するには？
A. SVGスプライトのシンボルにfill: currentColorを設定し、useタグで呼び出してcssでcolorを指定します。ホバー時の色変化などをCSSで管理できる便利な手法です。
まとめ
これらの方法は、それぞれの状況によって選択するべきです。SVGコードの直接変更はシンプルで直感的ですが、CSSを使用すると外部スタイルの再利用が可能です。JavaScriptは動的な変更が可能であるが、必要な場合に限定して使用するのが一般的です。色を変更する手法を使い分けて、より柔軟でメンテナンスしやすいSVG画像を作成しましょう。
