html - SVG ファイルを再利用する方法はありますか?

Question

SVG ファイルを再利用する方法はあるのでしょうか?

つまり、ヘッダー領域にロゴ SVG ファイルがあり、全体が黒に設定されています。まったく同じファイルをフッター領域で異なる色で使用できますか? または、そのために別の SVG ファイルを作成する必要がありますか?

Answer 1

SVG が (タグではなく) SVG タグに埋め込まれていると仮定するとimg、HTML は次のようになります。

<header>
  <svg xmlns="http://www.w3.org/2000/svg">
     <path d="..." class="logo_fill">
  </svg>
<header>

<footer>
  <svg xmlns="http://www.w3.org/2000/svg">
     <path d="..." class="logo_fill">
  </svg>
<footer>

次に、CSS で次のように記述できます。

header svg .logo_fill {
    fill: red;
}

footer svg .logo_fill {
    fill: gray;
}

Answer 2

SVG は XML であるため、「設計上」再利用可能です。@halfer と @Kroltan が既に指摘しているように、サーバー側の言語を使用してロゴの色を変更できます。

サーバー側にアクセスできない場合は、クライアント側のスクリプトまたは XSLT を使用してこれを行うこともできます。

このスレッドをスターターとして参照してください... JavaScriptでSVG画像の色を変更する