CSS を使用して HTML の SVG 要素の色を変更する

  2. プログラミングのヒント
  3. CSS ハウツー
  4. CSS を使用して HTML の SVG 要素の色を変更する
Naila Saad Siddiqui 2023年6月20日
CSS CSS Element
  1. SVG の紹介
  2. SVG のメソッド
CSS を使用して HTML の SVG 要素の色を変更する

この簡単なガイドは、HTML ドキュメントで SVG を使用する方法と、CSS プロパティを使用して色を変更するために SVG をカスタマイズする方法について説明しています。 まず、SVG を HTML で簡単に紹介します。

SVG の紹介

XHTML と同様に、SVG は、以下のようなベクター グラフィックスの作成に使用できる XML 言語です。 必要なすべての線と形状を描画したり、既存のラスター画像を編集したり、両方を一度に行ったりして、画像を作成するために使用できます。

イメージとその要素は、フィルタリング、合成、またはその他の手法によって完全に変更できます。

サンプル SVG 画像

いくつかの競合する形式が W3C に提出されたものの、完全には承認されなかった後、1999 年に SVG が作成されました。一般的なブラウザはすべて SVG をサポートしています。

SVG の読み込みが遅いのが欠点です。 SVG には、DOM インターフェースが利用できること、サードパーティの拡張機能が不要であることなどの利点があります。

SVG を使用する利点

  • SVG 画像の作成と編集には、任意のテキスト エディタを使用できます。
  • SVG 画像は、スクリプト化、圧縮、索引付け、および検索が可能です。
  • SVG の画像は拡大縮小できます。
  • どの解像度でも、SVG 画像を高品質で印刷できます。
  • SVG 画像は拡大できます。
  • SVG グラフィックがズームインまたはズームアウトされても、すべての品質が維持されます。
  • SVG ファイルは純粋な XML であり、オープン スタンダードです。

SVG のメソッド

SVG は、さまざまなグラフィックを保持するコンテナーとして機能します。 そのため、HTML ドキュメント上に自分で画像を作成するためのさまざまなメソッドやタグが用意されています。 この記事では、いくつかの要素と利用可能なさまざまなオプションについて説明します。

SVG を使用して円を描く

<circle> タグを使用して、SVG で単純な円を描画します。 円のプロパティを設定するために使用されるさまざまな属性があります。

最初の例として、HTML で SVG を使用して円を描くことから始めます。 次の HTML コードは、SVG で円を描画します。

<!DOCTYPE html>
<html>
<body>

<h1>First SVG Demo</h1>

<svg width="150" height="150">
   <circle cx="60" cy="60" r="50" stroke="red" stroke-width="5" fill="yellow" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>

コードは次のようにレンダリングされます。

  • <svg> 要素は SVG 画像を導入します。
  • <svg> 要素の幅と高さの属性は、SVG 画像のサイズを指定します。
  • <circle> 要素を使用して円を描くことができます。
  • 円の中心の x および y 座標は、cx および cy 属性によって指定されます。
  • cx と cy が設定されていない場合、円の中心は (0,0) に設定されます。
  • r 属性は、円の半径を指定します。
  • シェイプのアウトラインの外観は、stroke および stroke-width 属性によって制御されます。 円の輪郭に 5 px の赤い枠を付けました。
  • fill 属性は、円の内側の色を参照します。
  • 最後に、</svg> タグを閉じると SVG 画像が閉じます。

ブラウザが SVG をサポートしていない場合、申し訳ありませんが、SVG はお使いのブラウザではサポートされていませんというメッセージが表示されます。

SVG を使用して長方形を描画する

SVG の <rect> 要素は、長方形の形状を描画するために使用されます。 <circle> 要素と同様に、長方形のプロパティを設定するために使用できる複数の属性があります。

次のコード セグメントは、SVG を使用して四角形を描画します。

<!DOCTYPE html>
<html>
<body>

<h1>SVG Rectangle</h1>

<svg width="200" height="200">
   <rect width="200" height="100" style="fill:red;stroke-width:5;stroke:black" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>
  • 長方形の幅と高さは、要素 rect の width と height 属性によって決定されます。
  • style 属性は、長方形の CSS プロパティを定義します。
  • CSS 塗りつぶしプロパティは、四角形の塗りつぶしの色を決定します。
  • CSS の stroke-width プロパティは、四角形の境界線の幅を決定します。
  • CSS の stroke プロパティは、四角形の境界線の色を指定します。

SVG <画像> タグ

SVG ドキュメントに含まれる画像は、<image> SVG 要素で表されます。 SVG ファイルまたはラスター イメージ ファイルを表示できます。

JPEG、PNG、およびその他の SVG ファイルは、SVG ソフトウェアがサポートする必要がある唯一の画像形式です。 アニメーション GIF の動作は未定義です。

以下は、<image> タグに設定する必要がある特定の属性です。

  • x: 原点からの画像の水平位置を定義します。
  • y: 原点からの画像の垂直位置を定義します。
  • 幅: 画像がレンダリングされるサイズ。 HTML の <img> タグとは異なり、この属性は必須です。
  • 高さ: イメージのレンダリングされた高さ。 HTML の <img> タグとは異なり、この属性は必須です。
  • xlink および href: 画像ファイルの URL を定義します。
  • preserveAspectRatio: 画像のスケーリングを管理します。

次のコード スニペットは、SVG の image タグを使用して SVG ファイルを表示します。

<!DOCTYPE html>
<html>
<body>

<svg width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

CSS を使用して SVG 画像の色を変更する

SVG 画像の色を変更する必要がある場合は、CSS の filter プロパティを使用して写真にさまざまなフィルターを適用し、色相と色を変更できます。 CSS の filter プロパティは、ぼかしや色の変化などの視覚効果を要素に与えます。

フィルターを使用して、境界線、背景、および画像のレンダリング方法を変更するのは一般的な方法です。

たとえば、前の例で画像の色を変更する必要がある場合は、次のフィルター プロパティを使用できます。

.filter-green{
        filter: invert(58%) sepia(69%) saturate(1276%) hue-rotate(76deg) brightness(110%) contrast(109%);
    }

<!DOCTYPE html>
<html>
<body>

<svg class="filter-green" width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

これにより、画像にオーバーレイ効果が作成され、色が変更されます。 上記の CSS コードでは、次のフィルターを画像に適用しました。

  • 反転: 画像の色を反転します。 0% から 100% までの範囲で、100% で画像が完全に反転します。
  • セピア: 画像にビンテージ効果を追加し、最終的に色を金属面に変更します。
  • saturate: 画像の色の濃さを設定します。 値が高いほど、画像の色がより強く鮮明になります。
  • hue-rotate: これは、画像のカラー サークルの周りで画像の色相回転を変更することです。
  • 明るさ: 画像の明るさを設定します。 値 0 は全体が暗いことを意味し、100% はイメージの元の明るさを示します。 値が 100 を超えると、より明るくなります。
  • contrast: 画像のコントラストを設定します。 0 の値は全体的に暗いことを意味し、100% は画像の元のコントラストを示し、100 より大きい値はよりコントラストを強めます。

関連記事 - CSS Element