SVGの色変更をCSSでマスター：初心者でも安心のステップバイステップガイド

2024-04-28

SVGパスの塗りつぶしの色をCSSで変更する方法

SVG（Scalable Vector Graphics）は、ベクター画像形式の一種で、Webデザインでよく使用されます。SVG画像は、解像度に依存せずに鮮明な画像を表示できるという利点があります。

SVGパスの色は、fill属性を使用して設定できます。この属性には、16進数カラーコード、名前付きカラー、またはグラデーションなどの値を指定できます。

しかし、個々のSVGパスに対して異なる塗りつぶしの色を設定したい場合は、CSSを使用するのが便利です。CSSを使用すると、SVG要素のスタイルを動的に変更できます。

手順

SVGを作成する

まず、SVG画像を作成する必要があります。SVG画像を作成するには、テキストエディタまたは専用のSVGエディタを使用できます。

<svg width="100" height="100">
  <path d="M 0 0 L 50 50 L 100 0" fill="#000000" />
</svg>

上記の例では、黒い三角形を描画するSVGパスを作成しています。

SVGをHTMLに埋め込む

次に、作成したSVGをHTMLドキュメントに埋め込む必要があります。

<img src="my-svg.svg" alt="My SVG">

CSSを使用して色を変更する

最後に、CSSを使用してSVGパスの色を変更できます。

img[src="my-svg.svg"] path {
  fill: #ff0000;
}

上記の例では、my-svg.svgという名前のSVG画像内のすべてのパスを赤色に変更します。

補足:

特定のパスのみの色を変更するには、そのパスのIDまたはクラスセレクタを使用できます。
グラデーションやパターンなどのより複雑な塗りつぶしを作成するには、CSSの fill プロパティのより高度な機能を使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSでSVGパスの色を変更する</title>
  <style>
    img[src="my-svg.svg"] path {
      fill: #ff0000;
    }
  </style>
</head>
<body>
  <img src="my-svg.svg" alt="My SVG">
</body>
</html>

説明:

このコードは、HTML ファイルと CSS ファイルで構成されています。
HTML ファイルには、my-svg.svg という名前の SVG 画像を埋め込む img タグが含まれています。
CSS ファイルには、my-svg.svg 画像内のすべてのパスを赤色に変更するルールが含まれています。
ルールは、img[src="my-svg.svg"] path セレクタを使用して、my-svg.svg 画像内のすべてのパスをターゲットにします。
fill プロパティは、パスの塗りつぶしの色を赤 (#ff0000) に設定します。

実行方法:

上記のコードを index.html と style.css という名前のファイルに保存します。
ブラウザで index.html ファイルを開きます。

結果:

SVG 画像内のすべてのパスが赤色に表示されます。

SVG 画像を埋め込むには、src 属性に画像のパスを指定する必要があります。
CSS ファイルを HTML ファイルにリンクするには、link タグを使用する必要があります。

このサンプルコードは、あくまでも一例です。必要に応じて変更してください。

SVGパスの色を変更するその他の方法

CSSを使用してSVGパスの色を変更する方法以外にも、いくつか方法があります。

インラインSVG

SVGコードを直接HTMLに埋め込む方法です。この方法を使用すると、CSSを使用せずにパスの色を変更できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インラインSVG</title>
</head>
<body>
  <svg width="100" height="100">
    <path d="M 0 0 L 50 50 L 100 0" fill="#ff0000" />
  </svg>
</body>
</html>

利点:

CSSを使用する必要がない
コードが簡潔になる

複雑なSVGを作成する場合、コードが読みづらくなる
すべてのSVG画像でこの方法を使用するのは非効率的

use要素を使用して、別のSVGファイルからパスを定義できます。この方法を使用すると、CSSを使用してパスの色を変更できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>use要素</title>
</head>
<body>
  <svg width="100" height="100">
    <symbol id="triangle">
      <path d="M 0 0 L 50 50 L 100 0" />
    </symbol>
    <use href="#triangle" fill="#ff0000" />
  </svg>
</body>
</html>

上記の例では、triangleというIDを持つシンボルを定義し、そのシンボルを赤い三角形として使用しています。

コードを再利用できる
複雑なSVGをより小さな部分に分割できる

JavaScriptを使用して、SVGパスの色を動的に変更できます。この方法は、マウスのホバーやクリックなどのイベントに応じて色を変更する場合に便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script>
    function changeColor() {
      var path = document.getElementById('myPath');
      path.setAttribute('fill', '#ff0000');
    }
  </script>
</head>
<body>
  <svg width="100" height="100">
    <path id="myPath" d="M 0 0 L 50 50 L 100 0" fill="#000000" onmouseover="changeColor()" />
  </svg>
</body>
</html>