SVG画像の色を変更する方法

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";

まとめ

これらの方法は、それぞれの状況によって選択するべきです。SVGコードの直接変更はシンプルで直感的ですが、CSSを使用すると外部スタイルの再利用が可能です。JavaScriptは動的な変更が可能であるが、必要な場合に限定して使用するのが一般的です。色を変更する手法を使い分けて、より柔軟でメンテナンスしやすいSVG画像を作成しましょう。