1. はじめに
SVG は CSS でスタイルを設定でき、 HTML 内でインラインとして使用する場合、 この機能は非常に有用です。 たとえば、SVG アイコンに :hover 規則を適用し、 fill プロパティを変更するだけで、 ユーザーがその上にポインターを置いているかどうかに応じて異なる色を使用できます。
外部ページのセレクターや CSS 継承を適用できない方法で SVG が参照される場合
（HTML 内で
img
または
iframe
を介して埋め込む場合など）、
この機能は失われます。
このような「外部」SVG 画像の表示を変更する唯一の方法は、
それらを複数作成し、
参照する画像を切り替えることです。
これにより、新しいリソースがダウンロードされる間にページで遅延が発生し、
CSS トランジションのような動的効果も使用できなくなります。
CSS リンクパラメーターは、 CSS プロパティ、または URL 上の特別なフラグメント方式のいずれかを使用して、 「外部」リソース上に CSS のカスタム環境変数を設定する方法です。 これにより、「インライン」SVG 画像が持つカスタマイズ性の限定的ながら強力な一部を、 「外部」SVG 画像にも提供できます。
リンクパラメーターは、 <dashed-ident> の名前と、 任意の（空でもよい）<declaration-value> の値の組です。
< svg > < path fill = "env(--color, black)" d = "..." /> </ svg >
既定では、指定されたフォールバック色である黒で図形が塗りつぶされます。 しかし、リンク パラメーターを使用すると、 次のようないくつかの方法で色をカスタマイズできます:
< img src = "image.svg#param(--color,green)" >
img{ link-parameters : param ( --color, green); }
.foo{ background-image : url ( "image.svg", param(--color, green )); }
2. リンクパラメーターの設定
外部リソースには、リンクパラメーターのリストを付随させることができます。 各項目は、キーとしての<dashed-ident>と、 値としての（空でもよい）<declaration-value>から構成されます。
リンクパラメーターを指定する方法は3つあります:
-
link-parameters プロパティを使用する方法。 このプロパティは、リソース自体 （要素が外部リソースを表す場合）と、 その要素の CSS プロパティで使用されるすべての外部リソースに適用されます
-
外部リソースの URL のフラグメント部分にある特別な構文を使用する方法
これらの方法のうち複数で指定された場合、 すべてのリンク パラメーターは、 次の順序で外部リソース用の単一のリストに追加されます:
-
該当する場合、要素上のlink-parameters プロパティ
-
param() URL フラグメント識別子
同じ名前を持つ複数のリンク パラメーターが存在する場合、 リスト内の最後のものが使用されます。
リンク先リソース内でリンク パラメーターにアクセスする方法は、 次の節、 § 3 リンクパラメーターの使用で定義します。
2.1. CSS における link-parameters プロパティ
| 名前: | link-parameters |
|---|---|
| 値: | none | <param()># |
| 初期値: | none |
| 適用対象: | すべての要素および疑似要素 |
| 継承: | しない |
| パーセント値: | 該当なし |
| 算出値: | 指定どおり |
| 正規順序: | 文法に従う |
| アニメーション型: | 離散 |
link-parameters プロパティは、
要素自体
（HTML の
img
や
iframe
など、外部リソースを表す要素である場合）と、
要素上で指定されたすべての外部 CSS リソース
（背景画像など）にリンクパラメーターを設定する方法の1つです。
このプロパティの値は次のとおりです:
- none
-
リンク パラメーターは指定されません。
- <param()>#
-
1つ以上のリンクパラメーターのリストです。
param() 関数は、<dashed-ident>をキー、 <declaration-value>?を値とする、 リンクパラメーターを指定します。 （<declaration-value>が省略された場合、 空の値を表します。） 構文は次のとおりです:
<param()> = param( <dashed-ident> , <declaration-value>? )
2.2. URL 内での設定
外部リソースを参照するために使用される URL のフラグメントでは、 特別な「フラグメント識別子」を使用できます。 SVG 文書用の既存の「フラグメント識別子」の例は、 SVG 1.1 仕様にいくつか記載されています。
SVG パラメーターフラグメント識別子の構文は次のとおりです:
param( <dashed-ident> , <declaration-value>? )
（CSS 値定義構文を使用します。TODO: 実際のパーサーを 定義する）。
http://example.com/image.svg#param(--text-color,blue)”。
URL に複数のparam() フラグメント識別子を追加することで、
複数のリンク
パラメーターを画像に渡すことができます。
それら同士、または他の「フラグメント識別子」と組み合わせる場合、
URL のクエリパラメーターと同様に、
各値を & 文字で区切ります。
http://example.com/image.svg#param(--text-color,blue)¶m(--bg-color,white)”
env(--text-color) と env(--bg-color) の両方を設定できます。
注: 空白や、CSS 構文では有効である可能性のある
その他の一部の文字は、
厳密には URL では有効ではありません。
文脈によっては、
有効な URL を形成するためにこれらの文字をエスケープする必要があります。
ただし、ほとんどの場合、
HTML の
a
要素や CSS の url() 関数などでは、
空白が受け入れられ、エスケープする必要はありません。
2.3. CSS の url() 関数による設定
CSS を介して外部リソースを参照する場合、 param() 関数を url() 関数内で使用できます。 しかし、一般的なユースケースとして、 ページ自身のカスタム プロパティの値を渡すことがあります。 たとえば、ページで --primary-color カスタムプロパティを使用しており、 SVG 画像をそれに一致させたい場合があります。 しかし、CSS 内のカスタム プロパティの値を、url() 関数に渡される URL に組み込む方法はありません。
これに対応するため、 param() は、 有効な<url-modifier>です。 <url-modifier>として指定された すべての param() は、 link-parameters と同様に、 リンク パラメーターを定義します。
.foo{ background-image : url ( "http://example.com/image.svg" param(--color, var(--primary-color )) ); }
3. リンク パラメーターの使用
外部リソースのリンクに1つ以上のリンクパラメーターが指定されており、 リンク先リソースが CSS を解釈する場合 （SVG 文書や HTML 文書など）、 それらのリンクパラメーターは、 その名前と値を持つグローバルなカスタム環境変数をリソースに設定し、 スタイルシート内の env() 関数から アクセスできるようにします。
< svg > < g style = "fill: env(--color);" > < path d = "..." /> </ g > </ svg >
-
各 env() 関数に、 fill: env(--color, blue) のようなフォールバック値を指定します。
-
env() を何度も使用するため、 個々の env() にフォールバックを指定するのが煩雑になる場合、 カスタム環境変数を、 既定値を指定したルート要素上のカスタムプロパティに格納します。 次に例を示します:
:root
{ --color : env ( --color, blue); } この例では、--color がリンクパラメーターを介して指定された場合、 var(--color) にはその値が格納されます。 指定されていない場合は、既定の blue 値が格納されます。 いずれの場合も、var(--color) には常に値が存在することが保証されるため、 スタイルシート内で無条件に使用できます。
プライバシーに関する考慮事項
この仕様は、新たなプライバシー上の考慮事項を導入しません。
セキュリティに関する考慮事項
この仕様は、リンク先リソースに情報を渡す新しい方法を導入します。 その情報は、敵対的な情報源から渡される可能性があります。
この通信経路には明示的なハンドシェイクが確立されていませんが、 情報を使用するために env() を使用することで、 リンク先リソースがその情報によって予期しない影響を受ける可能性を最小限に抑えられます。 ページに脆弱性が生じる可能性がある唯一の状況は、 そのスタイル内で何らかの未知の env() を 使用している場合です。 この場合、既定では単にプロパティが無効になり、 開発者の開発者ツールに表示されます。
また、敵対的な情報が影響を与えられるのは、 リソースが明示的に受け入れることを選択した個々の CSS プロパティだけです。