Update the CSS Linked Parameters Support for External SVG Images Explainer - #1388
Update the CSS Linked Parameters Support for External SVG Images Explainer#1388rahulthebuilder wants to merge 2 commits into
Conversation
rahulthebuilder
commented
Aug 28, 2026
- Clarifies the explainer's external SVG image scope
- Aligns its syntax and implementation details with the latest spec draft
- Updates the README and issue template to match the new title and owner
|
rahulthebuilder please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
| **Who is affected:** Front-end developers building design systems and icon libraries; teams maintaining multi-brand or themed web applications; any developer using external SVG images that need to adapt to their surrounding context. | ||
| | Maintain separate SVG files for each variant | Duplicates assets and cache entries, increases maintenance, and requires changing the image URL to switch variants | | ||
| | Inline the SVG and style it with mechanisms such as `currentColor` | Increases HTML size and prevents the SVG from being cached and reused independently as an image resource | | ||
| | Fetch, modify, and inject SVG with JavaScript using libraries such as [svg-inject](https://github.com/niclasvaneyk/svg-inject) or [SVGInjector](https://github.com/iconic/SVGInjector) | Adds script complexity, can delay rendering, and may be restricted by Content 安全 Policy | |
There was a problem hiding this comment.
The svg-inject link is broken.
| ### 1. The `link-parameters` CSS property | ||
|
|
||
| A new CSS property, `link-parameters`, sets named parameters on an element. These parameters apply to the element itself (if it represents an external resource, like `<img>`) and to all external CSS resources referenced on that element (like `background-image`). | ||
| A new CSS property, `link-parameters`, sets named parameters on an element or pseudo-element. For the Chromium implementation described in this explainer, those parameters are passed to external SVG images represented by the element, such as an `<img>` source, and to external SVG images referenced by CSS image properties, such as `background-image`. |
There was a problem hiding this comment.
This is an explainer for the entire web platform, not exclusively Chromium. I think it's good to scope this explainer to SVG images, but we should broaden these Chromium references to consider all browsers.
| 1. **`env()` rather than `var()` for consumption.** Link parameters are exposed as custom environment variables in the linked SVG and consumed through `env()`. Environment variables have one value throughout the SVG document and do not participate in the cascade, while custom properties consumed through `var()` do. Using environment variables therefore avoids defining how values from the embedding page would interact with the SVG's own cascade. | ||
|
|
||
| 2. **`link-parameters` applies to all external resources on the element.** This means a single `link-parameters` declaration on an element affects its `<img>` source, `background-image`, `list-style-image`, and any other CSS-referenced external resources. This keeps the API simple, developers don't need per-resource parameter overrides for the common case. | ||
| 2. **A single declaration applies across external SVG image-loading contexts.** On an `<img>`, `link-parameters` applies to its external SVG source. On any element or pseudo-element, it applies to external SVG images loaded by CSS image properties such as `background-image` and `list-style-image`. This keeps the API consistent across the supported image-loading contexts. |
There was a problem hiding this comment.
I don't know if we need to exhaustively list CSS image properties, but there are quite a few more, which will definitely become interesting test cases as we work on the implementation and WPTs:
mask-image
border-image-source
image-set
shape-outside
... and more?
|
|
||
| ## Non-Goals | ||
|
|
||
| - **Cross-origin parameter passing** — link parameters are subject to the same security restrictions as other cross-origin resource interactions. |
There was a problem hiding this comment.
It might be good to call out the cross-origin behavior somewhere as it relates to security/privacy. Should linked parameters apply to cross-origin external SVG images? I think the answer is yes since all rendering is handled locally.
| | **Firefox** | ✅ Positive | Experimental implementation landed ([bug 2022783](https://bugzilla.mozilla.org/show_bug.cgi?id=2022783)) | | ||
| | **Safari/WebKit** | No signal | No known implementation or public position (TODO: file standards position request) | | ||
| | **Web developers** | ✅ Positive | Long-standing demand for parameterized external SVG; [Stack Overflow (3.5M views)](https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element), [State of CSS 2025 survey](https://2025.stateofcss.com/en-US/features/), [Roma Komarov's workaround analysis](https://kizu.dev/svg-linked-parameters-workaround/) | | ||
| | **Firefox** | ✅ Positive | The `link-parameters` property is enabled in Firefox Nightly starting with Firefox 153 ([implementation bug 2022783](https://bugzilla.mozilla.org/show_bug.cgi?id=2022783), [Firefox Nightly enablement bug 2046153](https://bugzilla.mozilla.org/show_bug.cgi?id=2046153)) | |
There was a problem hiding this comment.
Do we know Firefox's plans for the other forms of linked parameters: the URL directive and url() modifier?
| | **Safari/WebKit** | No signal | No known implementation or public position (TODO: file standards position request) | | ||
| | **Web developers** | ✅ Positive | Long-standing demand for parameterized external SVG; [Stack Overflow (3.5M views)](https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element), [State of CSS 2025 survey](https://2025.stateofcss.com/en-US/features/), [Roma Komarov's workaround analysis](https://kizu.dev/svg-linked-parameters-workaround/) | | ||
| | **Firefox** | ✅ Positive | The `link-parameters` property is enabled in Firefox Nightly starting with Firefox 153 ([implementation bug 2022783](https://bugzilla.mozilla.org/show_bug.cgi?id=2022783), [Firefox Nightly enablement bug 2046153](https://bugzilla.mozilla.org/show_bug.cgi?id=2046153)) | | ||
| | **Safari/WebKit** | No signal | No public position | |
There was a problem hiding this comment.
A reminder to file a standards position request for this on WebKit if we don't have one already.