初心者でも安心！画像編集ソフト不要でSVG画像のカラーを変更する方法

2024-04-02

SVG画像を背景画像として使用時に塗りつぶしの色を変更する方法

方法

CSSでbackground-imageプロパティを使用する
- SVG画像をbackground-imageプロパティで指定します。
- fillプロパティで塗りつぶしの色を指定します。
- 疑似要素を使用することで、特定の条件下でのみ色を変更することも可能です。

例

<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

.container {
  background-image: url(image.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 200px;
}

.container:hover {
  background-color: #ff0000; /* マウスホバー時に背景色を変更 */
  fill: #ffffff; /* 塗りつぶしの色を変更 */
}

この例では、image.svgを背景画像として設定し、マウスホバー時に背景色を赤色、塗りつぶしの色を白色に変更しています。

svg要素を直接編集する * svg要素のfill属性を直接編集することで、塗りつぶしの色を変更できます。 * JavaScriptを使用することで、動的に色を変更することも可能です。

<div class="container">
  <svg viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="red" />
  </svg>
</div>

const svg = document.querySelector('svg');

svg.addEventListener('click', () => {
  svg.setAttribute('fill', 'blue');
});

この例では、svg要素のfill属性を直接編集することで、クリック時に塗りつぶしの色を青色に変更しています。

JavaScriptライブラリを使用する

Snap.svgなどのJavaScriptライブラリを使用することで、より簡単にSVG画像を操作できます。

<div class="container">
  <svg viewBox="0 0 100 100"></svg>
</div>

const svg = Snap('#svg');

svg.rect(0, 0, 100, 100).attr({
  fill: 'red'
});

svg.click(() => {
  svg.selectAll('rect').attr({
    fill: 'blue'
  });
});

この例では、Snap.svgライブラリを使用して、svg要素内に四角形を描画し、クリック時に塗りつぶしの色を青色に変更しています。

注意点

SVG画像の構造によっては、上記の方法で色が変更できない場合があります。
使用するブラウザによっては、挙動が異なる場合があります。

補足

上記は基本的な方法のみを説明しています。より詳細な情報については、各方法の詳細資料を参照してください。
その他にも、様々な方法でSVG画像の色を変更することができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG画像の色変更サンプル</title>
</head>
<body>
  <div class="container">
    <h1>タイトル</h1>
    <p>本文</p>
  </div>
</body>
</html>

CSS

.container {
  background-image: url(image.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 200px;
}

.container:hover {
  background-color: #ff0000; /* マウスホバー時に背景色を変更 */
  fill: #ffffff; /* 塗りつぶしの色を変更 */
}

SVG

<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
</svg>

JavaScript

const svg = document.querySelector('svg');

svg.addEventListener('click', () => {
  svg.setAttribute('fill', 'blue');
});

上記のコードは、サンプルとして作成されています。実際の使用環境に合わせて、必要に応じて修正してください。
image.svgは、お好みのSVG画像に置き換えてください。

動作確認

上記のコードをHTMLファイルに保存し、ブラウザで開くと、以下の動作を確認できます。

初期状態では、SVG画像の塗りつぶしの色は赤色です。
マウスでcontainer要素をホバーすると、背景色が赤色、塗りつぶしの色が白色になります。
svg要素をクリックすると、塗りつぶしの色が青色になります。

SVG画像の塗りつぶしの色を変更するその他の方法

filterプロパティを使用して、SVG画像にフィルターを適用することで、塗りつぶしの色を変更することができます。

.container {
  background-image: url(image.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 200px;
}

.container:hover {
  filter: url(#sepia); /* マウスホバー時にセピアフィルターを適用 */
}

@media (prefers-reduced-motion: no-preference) {
  .container:hover {
    filter: url(#grayscale); /* マウスホバー時にグレースケールフィルターを適用 */
  }
}

/* セピアフィルター */
<svg id="sepia" viewBox="0 0 100 100">
  <filter id="sepia">
    <feColorMatrix type="matrix" values="
      0.393 0.769 0.189 0 0
      0.349 0.686 0.168 0 0
      0.272 0.534 0.131 0 0
      0 0 0 1 0
    " />
  </filter>
</svg>

/* グレースケールフィルター */
<svg id="grayscale" viewBox="0 0 100 100">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="
      0.2126 0.7152 0.0722 0 0
      0.2126 0.7152 0.0722 0 0
      0.2126 0.7152 0.0722 0 0
      0 0 0 1 0
    " />
  </filter>
</svg>

この例では、filterプロパティを使用して、マウスホバー時にSVG画像にセピアフィルターまたはグレースケールフィルターを適用しています。

<mask>要素を使用して、SVG画像の一部のみを塗りつぶすことができます。

<div class="container">
  <svg viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="red" />
    <mask id="mask">
      <rect x="0" y="0" width="50" height="50" fill="black" />
    </mask>
    <image href="image.svg" mask="url(#mask)" />
  </svg>
</div>