1. 序論
~SVGは、 ~CSSで~style可能である — この能力は、 ~HTML内に~inlineに利用するとき ごく有用になり得る。 例えば，~SVG~iconは、 利用者が それを~hoverしているか否かに基づいて，異なる色をとれる — それに `fill$p ~propを変更する `hover$ps 規則を適用するだけで。 ◎ SVG is stylable with CSS, and when used inline in HTML, this capability can be very useful. For example, an SVG icon can take on a different color based on whether the user is hovering it or not, just by applying a :hover rule to it that changes the fill property.
~SVG画像が［ 外縁~pageからの［ `選択子$／`継承$ ］を自身に適用することを許容しない仕方 ］で参照されるときには （ ~HTML内の［ `img$e ／ `iframe$e ］を介して それを埋込むなど）、 この機能性は失われる。 そのような “外部” ~SVG画像の表示を変更するための仕方は、 一連の画像を生産して，どの画像を参照するか変更する他にない。 そのようにした場合、 新たな資源が~downloadされるに伴い，当の~pageは遅延を被ることに加え、 ~CSS遷移の様な動的な効果は許容されない。 ◎ When the SVG is referenced in a way that doesn’t allow selectors or CSS inheritance from the outer page to apply to it (such as embedding it via img or iframe in HTML), though, this functionality is lost. The only way to change the display of such "external" SVG images is to produce several of them, and change which image you’re referencing. This incurs delay on the page as a new resource is downloaded, and disallows dynamic effects like CSS Transitions.
~CSS `~link~parameter@ は、 “外部” 資源に対し［ ~CSS~propにより／ ~URLの特別な素片~schemeを通して ］~CSS`~custom環境~変数$を設定するための仕方を与える。 これは、［ “~inlineな” ~SVG画像など，自身を~styleするために~CSSを利用する資源 ］が有する~custom化~能を成す［ 制限されるが，強力な下位集合 ］を “外部” 資源に与える。 ◎ CSS link parameters are a way to set CSS custom environment variables on an "external" resource, either by a CSS property or thru a special fragment scheme on the URL. This gives a limited, but powerful, subset of the customizability that "inline" SVG images have to "external" SVG images, or to other linked resources that use CSS to style themselves.
各`~link~parameter$は、 次が成す~pairである ⇒＃ `dashed-ident$t が成す名前, `declaration-value$t が成す任意な値, または空な値 ◎ A link parameter is a pair of a <dashed-ident> name, and an arbitrary (possibly empty) <declaration-value> value.
例えば，~SVG画像は、 `~link~parameter$を利用して，［ その色が，その場で変更されることを許容する ］よう書くこともできる — 次の様に： ◎ For example, an SVG image can be written to use link parameters, allowing it to have its colors changed on the fly, like:
<svg> <path fill="env(--color, black)" d="..." /> </svg>
それは，既定では［ 自身の図形を~fallback用に指定された色 `black^v で~fillする ］ことになるが、 `~link~parameter$は，次に挙げる仕方で この色を~custom化できる： ◎ By default, it will fill its shape with black, as that’s the fallback color specified. But link parameters can customize the color in several ways:
<img src="image.svg#:~:param(--color,green)">
img {
link-parameters: param(color, green);
}
.foo {
background-image: url("image.svg", param(--color, green));
}
2. ~link~parameterの設定-法
外部~資源には、 `~link~parameter$たちが成す~listを付随させれる — それは、 次に挙げるものからなる`構造体$である： ◎ An external resource can be accompanied by a list of link parameters, a struct composed of:
- `名前@lP ⇒ 通例的には，ある `dashed-ident$t ◎ a name, usually a <dashed-ident>
- `型@lP ⇒ ε （ “無し” ）／ある `css-type$t ◎ an optional type, a <css-type>
- `値@lP ⇒ ある~CSS値 （空にもなり得る） ◎ a value (potentially empty), a CSS value
`~link~parameter$を指定する仕方には、 次に挙げる 3 種がある： ◎ There are three ways to specify a link parameter:
-
`link-parameters$p ~propを介して — それは、 次に挙げるものに適用される：
- 当の要素が外部~資源を表現するならば，それ
- 当の要素の~propに利用されるすべての外部~資源
- 外部~資源の~URLにおける`素片~指令$を介して直に ◎ via a fragment directive directly in the URL of an external resource.
- `url$t における `param$f 引数を介して ◎ via a param() argument in a <url>
これらのうち複数の仕方で指定された場合、 `~link~parameter$たちは， 外部~資源~用には単独の~listの中へ次に挙げる順序で付加される： ◎ If specified in multiple of these ways, all of the link parameters are appended into a single list for the external resource, in the order:
- 当の要素の `link-parameters$p ~prop【！, if relevant】 ◎ the link-parameters property on the element, if relevant
- 当の~URLの`~link~parameter指令$ ◎ the link parameter directives of the URL
- `url$t【！`url^f】 内の `url-modifier$t として与えられた `param$f ◎ the param() <url-modifier>s in url()
同じ名前を伴う複数個の`~link~parameter$が存在する場合、 当の~list内の最後のものが利用される。 ◎ If multiple link parameters exist with the same name, the last one in the list is used.
~link先の資源~内で`~link~parameter$へ~accessする方法は、 `§ ~link~parameterの利用-法＠#using$ にて定義される。 ◎ How to access link parameters in the linked resource is defined in the next section, § 3 Using Link Parameters.
2.1. `param$f 関数
`~link~parameter$を設定する~methodには、 以下に挙げる 3 種があり，同じ構文 — `param@f 関数 — を利用して~parameterを`定義する^em： ◎ All three methods of setting link parameters share the same syntax for defining a parameter, using the param() function:
`param()$t = param( `param-spec$t , `declaration-value$t? ) `param-spec@t = `color$v | `accent-color$v | [ `dashed-ident$t `css-type$t? ]
各 `param$f 関数は、 その `param-spec$t に応じて， `~link~parameter$【を成す各~item】を少し異なる仕方で定義する： ◎ Depending on the <param-spec>, the param() function defines a link parameter in slightly different ways:
- `color@v
- `名前$lP ⇒ `color^v ◎ Name: color
- `型$lP ⇒ `color$t ◎ Type: <color>
- `値$lP ⇒＃ 2 個目の引数が指定されたならばそれ／ ~ELSE_ 当の要素の `color$p の値 ◎ Value: The second argument, if specified. Otherwise, the value of color on the element.
- `accent-color@v
- `名前$lP ⇒ `accent-color^v ◎ Name: accent-color
- `型$lP ⇒ `color$t ◎ Type: <color>
- `値$lP ⇒＃ 2 個目の引数が指定されならばそれ／ ~ELSE_ 当の要素の `accent-color$p の値 ◎ Value: The second argument, if specified. Otherwise, the value of accent-color on the element.
- `dashed-ident$t
- `名前$lP ⇒ 当の `dashed-ident$t ◎ Name: the <dashed-ident>
- `型$lP ⇒＃ `css-type$t が指定されたならば それ／ ~ELSE_ ε ◎ Type: the <css-type>, if specified.
- `値$lP ⇒＃ 2 個目の引数が指定されたならばそれ／ ~ELSE_ 当の要素の［ 指定された名前を伴う`~custom~prop$ ］の値 ◎ Value: The second argument, if specified. Otherwise, the value of the custom property with the specified name on the element.
注記： 2 個目の引数は、 完全に空であっても妥当であることに注意 — そのことは、 それを 1 個目の引数から分離する~commaを指定することにより指示される。 ◎ Note that a completely empty second argument is valid, and is indicated by specifying the comma separating it from the first argument.
すなわち， `param(--foo)^v は、 当の`~link~parameter$が既定の値を利用している — その`値$lPを当の要素の `--foo^p `~custom~prop$から取り出す — ことを指示する。 ◎ That is, param(--foo) indicates that the link parameter is using the default value, drawing from the --foo custom property on the element.
他方， `param(--foo,)^v は、 `~link~parameter$に明示的に空な値を与える。 ◎ On the other hand, param(--foo,) explicitly gives the link parameter an empty value.
このことは、 `var$f 関数において［ `var(--foo)^v は~fallbackを有さないが， `var(--foo,)^v は空な~fallbackを有する ］ことに類似する。 ◎ This is similar to var(--foo) having no fallback, but var(--foo,) having an empty fallback.
当の`~link~parameter$の`型$lP ~NEQ ε ならば、 その`値$lPは， （既定の値も, 手動で供された値も） 当の型を成す値として構文解析される。 この構文解析に失敗した場合、 当の`~link~parameter$は，無効になり無視される （それを定義している `param$f は、 無効にならない）。 ◎ If the link parameter has a type, the value (default or manually provided) is parsed as that type. If it fails to parse as the given type, the link parameter is invalid and ignored. (The param() defining it is not invalid.)
注記： 作者は、 `param$f を複数回~繰返すことにより，~fallbackたちを指定できる — `param(--foo <color>, blue), param(--foo <color>, xztheta(1 2 3))^v の様に。 この場合，~UAは、 （現時点では未定義な） `xztheta^f 色~関数を［ ~supportするならば それ／ ~supportしないならば `blue$v ］を利用することになる — ある~propを複数回~指定したときと類似に。 ◎ Note: Authors can specify fallbacks by repeating a single param() multiple times, like param(--foo <color>, blue), param(--foo <color>, xztheta(1 2 3)), which will use the (currently undefined) xztheta() color function if it’s supported and blue in user agents that don’t support that function, similar to specifying a property multiple times.
`param$f 関数は、 通例的には，それが利用された仕方から `要素~文脈@lP を有する。 在る場合、 当の文脈を（および`型$lP ~NEQ ε の場合にはそれも）利用して， `値$lPを — ~link先の資源へ渡される前に — `使用~値$へ全部的に解決する。 そうするためには`要素~文脈$lPが`必要になる^em場合に，それが無い場合、 当の`~link~parameter$は，無効になり無視される。 ◎ A param() function usually has an element context from the way it’s used. If present, the value uses that context (and the type, if present) to fully resolve itself to a used value before being passed into the linked resource. If the value needs an element context to fully resolve, but doesn’t have one, the link parameter is invalid and ignored.
注記： 例えば， `param(--foo <color>, currentcolor)^v は、 特定の色へ解決するために，`要素~文脈$lPを利用することになる — いくぶん有用さに劣る~keywordとして渡すことなく。 ◎ For example, param(--foo <color>, currentcolor) will use the element context to resolve to a specific color, rather than somewhat uselessly passing as the keyword.
`型$lP ~EQ ε の場合： ◎ ↓
- `任意-代入~関数$は、 `値$lPを解決するよう試みることになる — そのためには、 `要素~文脈$lPが必要になるものもある （例えば， `var$f や `attr$f ）。 ◎ Even without a type, arbitrary substitution functions will attempt to resolve in the value, and might need an element context (for example, var() and attr() both do).
- 他の値は、 解決されずに残される — 例えば， `param(--foo, currentcolor)^v は、 それを `color$t として解決することなく， `currentcolor$v ~keyword自体を渡すことになる — なので、 `要素~文脈$lPは不要になる。 ◎ Other values will be left unresolved without a type; for example, param(--foo, currentcolor) will pass the currentcolor keyword itself, without resolving it as a <color>, and thus doesn’t need an element context.
類似に，［ `param$f は 2 個目の引数を供さない ］かつ［ `要素~文脈$lPは無い ］場合、 当の`~link~parameter$は，無効になり無視される （既定では，その`値$lPを当の要素の ある~propから取り出すので）。 ◎ Similarly, if a param() doesn’t provide a second argument, and doesn’t have an element context, the link parameter is invalid and ignored. (Because the default draws on the value of a property on the element.)
2.2. 要素~全体~用の~link~parameter： `link-parameters^p ~prop
`link-parameters$p ~propは、 次に挙げるものに`~link~parameter$を設定する仕方を成す： ◎ The link-parameters property is one way to set link parameters＼
- 要素が外部~資源を表現しているならば （~HTML `img$e や `iframe$e など）、 その資源。 ◎ on the element itself (if it is an element representing an external resource, such as an HTML img or iframe),＼
- ~CSSを介して要素に指定された すべての外部~資源（背景~画像, 等々）。 ◎ and on all external CSS resources specified on the element (such as background images, etc).＼
各種~値の意味は： ◎ Its values are:
- `none@v
- 指定される`~link~parameter$は無い。 ◎ No link parameters specified.
- `param()$t#
- `~link~parameter$たちが成す空でない~list。 ◎ A list of one or more link parameters.
所与の要素の `link-parameters$p において利用された `param$f 関数は、 当の要素を その`要素~文脈$lPとして利用する。 ◎ The param() functions used in link-parameters use the element they’re set on as the element context.
注記： 所与の要素~上に複数の画像が在る場合 （内容~画像【文書~言語による画像】や背景の様な~CSS画像） それらは、 各 `link-parameters$p の値をすべて受取ることになる — それらの~parameterを利用しないもの【利用するよう意図されないもの】であっても。 このことは、 一般に，安全である — ~link先の資源において`~link~parameter$へ~accessするためには、 作者は `env$f を利用する必要があるので — ［ `color$v, `accent-color$v ］には，追加的な副作用が有るが。 ◎ Note: If there are multiple images on the given element (content image and/or CSS images like backgrounds), they’ll all recieve all the values in link-parameters, even if they don’t use them. This is generally safe, as you need to use env() to access a link parameter in the linked resource, tho color and accent-color do have additional side-effects.
2.3. 単独の~URL用の~link~parameter： `url-modifier^t
`link-parameters$p は， 要素~上の`あらゆる^em~URL用に`~link~parameter$を設定するが、 ときには，［ 一部の資源~用に限り，ある~parameterを設定する／ 要素~上で同じ資源を異なる~parameterたちを伴って複数回~利用する ］よう求まれることもある。 そのためとして、 ~link先の資源を指定している `url$t 内に 1 個以上の `param$f 関数を `url-modifier$t として直に利用できる。 ◎ While link-parameters sets link parameters for every URL on an element, sometimes you want to set parameters for only one resource, or use the same resource multiple times on an element with different parameters. For this, you can use one or more param() functions directly in the <url> specifying the linked resource, as a <url-modifier>.
ある~siteが `--primary-color^p ~custom~propを~pageの~theme色に利用していて， それを `env(--color)^v を利用している~SVG背景に反映させるよう求める場合、 次のように書くこともできる： ◎ For example, if the site is using a --primary-color custom property to theme its elements with, and wanted an SVG background using env(--color) to reflect it, it could write:
.foo {
background-image: url(
"http://example.com/image.svg"
param(--color, var(--primary-color))
);
}
所与の要素【の ある~prop】に設定された `url$t において利用された `param$f 関数は、 当の要素を その`要素~文脈$lPとして利用する。 ◎ The param() functions used in a <url> use the element they’re set on as the element context.
2.4. ~CSSの外側：~URL自体
`~link~parameter$は、 ~CSSの外側でも利用できる — それを~URLの中へ`素片~指令$として直に埋込むことにより。 ◎ Link parameters can be used outside of CSS, by embedding them directly into the URL as a fragment directive.
注記： `~text指令$は、 別の`素片~指令$の例であり， 文書~内のどこかにある特定の~textへ~linkできるようにする。 ◎ Note: Text directives are another example of fragment directives, letting you link to specific text somewhere in a document.
`~link~parameter指令@ は、 次の構文を伴う`素片~指令$である： ◎ The link parameter directive is a fragment directive with the following syntax:
:~:param(...)
ここで， `...^c は、 `~URL単位$【！URL codepoints and/or percent-encoded bytes】たちが成す任意の並びを表現する。 ◎ Where the ... represents any sequence of URL codepoints and/or percent-encoded bytes.
`~link~parameter指令$は、 当の~URL【成す`~percent-符号化された~byte$たち】を復号してから， `param$f の`文法に則って構文解析-$される。 その結果が `失敗^i ならば、 当の指令は無視される。 他の場合、 結果の `param^f により指定される`~link~parameter$は， 当の埋込まれた文書【~link先の資源】の~link~parameterたちが成す~listに追加される — § `param^f 関数 にて指定されるとおり【無視されないならば】。 ◎ After URL-decoding, the link parameter directive is then parsed as a <param()>. If it fails to parse, the directive is ignored. Otherwise, it’s added to the embedded document’s list of link parameters, as specified in § 2.1 The param() Function.
例えば、 次の様な~URLで~SVG画像を参照すれば， 当の画像の`~custom環境~変数$ `env(--text-color)^v を `blue$v に設定できる ⇒ `http://example.com/image.svg#:~:param(--text-color,blue)^l ◎ For example, to set the env(--text-color) custom environment variable of an SVG image to blue, one can reference the image with a url like “http://example.com/image.svg#:~:param(--text-color,blue)”.
注記： ~spaceその他のある種の【！some】文字は、 ~CSS構文においては妥当であっても， ~URLにおいては【！technically】妥当でないかもしれない。 一部の文脈においては、［ 妥当な~URLを形成するよう，それらの文字を~escapeする必要がある ］かもしれない。 ほとんどの事例 — ~HTMLの `a$e 要素【の `href^a 属性】や ~CSSの `url$f 関数など — においては、 ~spaceは受容され，~escapeする必要はないが 【引数どうしを分離する~commaの前後の~spaceなど】。 ◎ Note: Spaces, and some other characters that might be valid in CSS syntax, are not technically valid in URLs. In some contexts, you might need to escape those characters to form a valid URL. In most cases, though, such as HTML’s a element or CSS’s url() function, spaces are accepted and do not need to be escaped.
画像には複数個の`~link~parameter$を渡せる
— 当の~URLに複数個の`~link~parameter指令$を付加することにより。
［
複数個の~link~parameter／
~link~parameterと他の “素片~識別子”
］が組合されるときは、
それらは，文字 & で互いに分離される
— ~URLの~query~parameterたちと同じく。
◎
Multiple link parameters can be passed to an image by appending multiple link parameter directives to the URL. When combined, either with each other or with other "fragment identifiers", each value is separated with an & character, as in a URL’s query parameters.
例えば，前の例の画像が `env(--bg-color)^v も利用していた場合、 次の様な~URLで参照すれば，［ `env(--text-color)^v, `env(--bg-color)^v ］どちらも設定できる ⇒ `http://example.com/image.svg#:~:param(--text-color,blue)¶m(--bg-color,white)^l ◎ For example, if the image from the previous example also used env(--bg-color), it could be referenced with a url like “http://example.com/image.svg#:~:param(--text-color,blue)¶m(--bg-color,white)” to set both env(--text-color) and env(--bg-color).
当の~URLが ある要素の~URL属性 — `img$e 要素の `src^a 属性など，~URLを値にとる属性 — において指定された場合、 各 `param$f 値を （ § `param^f 関数 にて指定されるとおり） 解決する際には， `要素~文脈$lPとして当の要素を利用する。 他の場合 （例えば，~URL~bar内の~URLへ直に~navigateされた場合）、 `要素~文脈$lPは無い。 ◎ If the URL is specified in a URL attribute on an element, such as <img src="...">, resolving the param() values (as specified in § 2.1 The param() Function) uses that element as the context. Otherwise (for example, if navigated to directly in the URL bar) there is no element context.
例えば、 `param(color)^v には，`要素~文脈$lPが要求される （ `color$p ~propから既定の値を得するために）。 ◎ For example, param(color) requires an element context (to obtain the default value, taken from the color property).
文書~内の `img$e 要素の `src^a 属性の値に利用された `example.svg#:~:param(color)^v は、 期待されるとおり — 当の `img$e 要素から その `color$p ~propを取り出すよう — 働く。 代わりに `example.svg#:~:param(color)^c へ直に~navigateした場合、 `param(color)^v は — それがまったく渡されなかったかのように — 無視されることになる。 ◎ Using <img src="example.svg#: ~:param(color)"> in your document works as expected, drawing from the img element’s color property. Navigating directly to example.svg#: ~:param(color) will instead ignore the param(color), as if it weren’t passed at all.
類似に， `param(color, light-dark(black, white))^v は、 （当の要素の`色~scheme$el【！`色~scheme$】を決定するために） `要素~文脈$lPを要求するので， 上と同じに働くことになる。 ◎ Similarly, param(color, light-dark(black, white)) requires an element context (to determine the color scheme), and would work the same as above.
他方， `param(--foo, light-dark(black, white))^v は、 当の~parameterの`型$lP ~EQ ε なので，`要素~文脈$lPを`要求しない^em。 値 `light-dark(black, white)^v は、 `src^a 属性~内に指定されようが, 直に~navigateされようが， いかなる仕方でも解決されることなく，そのまま~link先の資源へ渡されることになる。 ◎ On the other hand, param(--foo, light-dark(black, white)) does not require an element context, as the parameter is untyped. The literal value light-dark(black, white) will be passed down to the linked resource, without resolving in any way, whether specified in <img src> or directly navigated to.
3. ~link~parameterの利用-法
ある外部~資源~linkに 1 個以上の`~link~parameter$が指定されたとき， ~link先の資源が~CSSを解するならば（~SVG文書や~HTML文書など）、 それら各`~link~parameter$は， 当の資源の~styleに ある種の仕方で影響する — ~link先の資源においては、 当の~parameter %~parameter の`名前$lPに応じて： ◎ When an external resource link has one or more link parameters specified, if the linked resource understands CSS (such as an SVG or HTML document), then those link parameters affect the style of the linked resource in certain ways, depending on the parameter’s name:
- `color$v
- `color$p ~propの`初期~値$は、 %~parameter の`値$lPに設定される。 ◎ The initial value of the color property on the linked resource is set to the value.
- `accent-color$v
- `accent-color$p ~propの`初期~値$は、 %~parameter の`値$lPに設定される。 ◎ The initial value of the accent-color property on the linked resource is set to the value.
- `dashed-ident$t
- %~parameter の［ `名前$lP, `値$lP ］を利用して`~custom環境~変数$が確立される。 ◎ A custom environment variable is established on the linked resource, using the name and value.
例えば，ある~SVG画像が `--color^p ~parameterを公開するよう求めていた場合、 それを次の様に利用することもできる： ◎ For example, if an SVG image wanted to expose a --color parameter, it could use it like:
<svg>
<g style="fill: env(--color);">
<path d="..." />
</g>
</svg>
別法として， `currentcolor$v ~keywordだけに依拠することもできる — 当の色が `param(color, blue)^v で渡されることを許容するよう。 【？】 ◎ Alternately, it could just rely on the currentcolor keyword, allowing the color to be passed with param(color, blue).
注記： ~parameterが与えられなかった場合でも，~SVG画像を — 各`~custom~prop$用に “既定の値” を供することにより — 利用-可能にすることは、 通例的に良い案になる。 これを行う仕方は，いくつかある： ◎ It’s usually a good idea to make your SVG image usable even if no parameters are given, by providing "default values" for each of the custom properties. There are several ways to do this.
-
各 `env$f 関数に~fallback値を供する
—
`fill$p: `env(--color, blue)^vの様に。 ◎ On each env() function, provide a fallback value, like fill: env(--color, blue). -
前項の仕方では面倒事になるまでに， `env$f が何度も利用される場合、 当の`~custom環境~変数$を根~要素の`~custom~prop$内に格納する — 次の様に： ◎ If the env() is going to be used a lot, such that providing a fallback for each individual env() is troublesome, store the custom environment variable in a custom property on the root element with the default specified, like:
:root { --color: env(--color, blue); }この例においては、 `var(--color)^v は，［ `--color^css が`~link~parameter$を介して供されたならば その値／ 他の場合は 既定の値 `blue$v ］を包含することになる。 どちらの事例でも、 ~stylesheetにおいて `var(--color)^v を無条件に — すなわち，常に値を有することを知った上で — 利用できる。 ◎ In this example, if --color is provided via a linked parameter, var(--color) will contain its value. If not, it will contain the default blue value. In either case, var(--color) can be used in the stylesheet unconditionally, secure in the knowledge that it will always have a value.
`color$v や `accent-color$v 用の値を ある`環境~変数$を介して給することも有用になるか？ おそらく，これは、 すべての文書に対し， `env(color)^v 等々を — `color$p の初期~値へ解決されるよう — 定義することだけを意味する。 ◎ Is it useful to supply the "color" and "accent-color" values via an environment variable as well? This would probably just mean defining env(color)/etc on all documents, resolving to the initial value of color.
3.1. 染法
`~link~parameter$により作成される`~custom環境~変数$は、 当の`~link~parameter$を定義した `param$f が `attr() に染まっ$ていたならば， `attr() に染まっ$たものとされる。 ◎ A custom environment variable created by a link parameter is attr()-tainted if the param() that defined the link parameter was attr()-tainted.
3.2. 同じ~URLを伴う複数個の画像
ある~HTML文書が `src^a 属性に同じ値を伴う複数個の `img$e 要素を包含するとき、 それらすべては，ある~~意味で “同じ画像” であるものと見なされる。 特に，~animation~timer （~animateされる~raster形式（~GIFなど）を~animateしているそれ／ ~SVG上で ある~CSS~animationを駆動しているそれ） は、 そのような要素~すべてにわたって合致する【同期する】ものと定義される — いずれかの要素が何回かにわたって当の文書に追加し直された場合でも。 ◎ When an HTML document contains multiple img elements with the same src value, it considers them all "the same image" in some respects. Notably, animation timers (animating a GIF or similar animated raster format, or driving a CSS animation on an SVG) are defined to match across all such elements, even if they’re added to the document at different times.
一般に，~UAは、 すべての `img$e 要素から共有される単独の画像~文書しか作成しないことにより，これを実装する。 これは、［ ~animation問題【各~画像の~animationが互いに同期しなくなる問題】を解消する ］ことに加え，［ ある~pageで同じ画像が何回も繰返されたとき （悪名高い~web~site “`Hamster Dance＠https://en.wikipedia.org/wiki/Hampster_Dance$cite” など）， 重複な文書を無駄に作成すること ］を避ける。 ◎ User agents generally implement this by creating only a single image document, shared by all the img elements. This solves the animation problem, and avoids wastefully creating duplicate documents when a single image is repeated many times on a page (such as in the infamous "Hamster Dance" website).
しかしながら、 `~link~parameter$は，これらの別々な画像に異なる~styleをあてがうことを許容する （それは、 `color-scheme$p と同じく， 当の画像に`選好される色~scheme$に影響することに加え、 当の画像の［ 横幅／縦幅 ］に影響することもある — 後者は、［ `width$d ／ `height$d ］`媒体~特能$に影響することになる）。 ◎ However, link parameters allow these separate images to be styled differently. (As does color-scheme, which affects the image’s preferred color scheme, and potentially the width/height of the img, which would affect the width/height media features.)
~UAは、 これらの事例においては，各~画像を正しい~style用の値で塗るモノトスル。 それでも，~UAは、 観測-不能になる限り，共有される文書を利用できる; 例えば，各 `img$e に自前の［ 塗ng~commandたちが成す~list／ ~cacheされた~raster化 ］を結付ける一方で， それらが依然として下層の~SVG文書を共有するようにさせれる。 ◎ User agents must paint images with the correct styling values in these cases. To the extent that it’s unobservable, they can still use a shared document; for example, they can associate each img with its own bespoke list of painting commands or cached rasterization while still having them share an underlying SVG document.
~privacyの考慮点
この仕様が導入する新たな~privacyの考慮点は無い。 ◎ This specification introduces no new privacy considerations.
~securityの考慮点
この仕様は、［ 敵対的な~sourceから~link先の資源へ情報を渡す新たな仕方 ］を導入するものになり得る。 ◎ This specification introduces a new way to pass information to a linked resource, potentially from a hostile source.
この~channel用に確立される明示的な~handshakeは無いが、 当の情報を利用するための `env$f の利用は， ~link先の資源が当の情報により`意に沿わなく^emなり得る機会cを最小~化する。 ~pageにとって脆弱になる唯一の仕方は，自身の~styleに`未知^emな `env$f を利用することだが、 それは，既定では［ 無効な~propになるだけであり，開発~toolにおいて開発者から可視になる ］。 ◎ While no explicit handshake is established for this channel, the use of env() to use the information minimizes the chance that the linked resource can be surprised by the information. The only way for the page to be vulnerable is to somehow be using an unknown env() in their styles, which will just result in invalid properties by default, and be visible in the developer’s Dev Tools.
敵対的な情報は、 当の資源が明示的に任意選択した個々の~CSS~propにしか【！also only】影響し得ない。 ◎ Any hostile information can also only affect individual CSS properties that the resource explicitly opts itself into.