Repository navigation
CSS Linked Parameters for SVG #1346
Description
Description
Linked parameters provides three ways for developers to style SVG images.
img {
link-parameters: param(--color, blue);
}<img src="example.svg#:~:param(--color,blue)">.icon {
background-image: url("example.svg", param(--color, blue));
}Specification
https://drafts.csswg.org/css-link-params/
web-feature
web-features: link-parameters
https://web-platform-dx.github.io/web-features-explorer/features/link-parameters/
Test Links
https://wpt.fyi/results/svg/styling/css-linked-parameters?label=experimental&label=master&aligned
Additional Signals
This feature received 40 👍 in last years Interop.
Developer Signals entry
The Chromium issue has 17 +1s.
This Tweet about the feature received 111 likes.
This Bluesky post about the feature received 134 likes.
Implementation work in Firefox is ongoing.
In the 2025 State of HTML survey, SVG came second in the Graphics & Multimedia Pain Points chart. In the comments, certain issues were voiced repeatedly:
- "No way to pass
currentColorand other params to remote SVGs makes icons very hard to manage" - "I'd like to refer to an SVG (e.g. to use as a repeated icon) that's less verbose than
<svg><use>...</use></svg>" - “Want to be able to do
<img src='file.svg'>and still retain ability to style. Currently if i want to pass throughcurrentColorfor example i have to inline the entire icon which is silly if i'm using it in dozens of places" - "Inlining SVGs causes a lot of repetition and noise in the HTML"
Currently developers are using unfortunate workarounds such as mask-image.
The <use> element provides something of a solution but is more complex and verbose than an <img>. <use> elements are stripped out by the Web Sanitizer.
Activity
github-actions commentedon Sep 3, 2026
This comment was automatically generated based on the information you provided. Please don't edit it.
Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include
web-features: <feature-id>.To find feature IDs, use the web-features explorer.
Feature Link parameters
link-parametersCSS property,param()modifier for theurl()CSS function, and the#:~:param(…)URL fragment set custom CSS environment variables on an external resource, such as an SVG image, allowing the external resource to adapt its presentation based on the variables.link-parametersCSS property,param()CSS functionLeaVerou commentedon Sep 10, 2026
Btw there is a web-feature for it: https://web-platform-dx.github.io/web-features-explorer/features/link-parameters/
svgeesus commentedon Sep 13, 2026
@o-t-w Looks like the github bot needs the literal string "Link parameters" to be edited into the original post, not the link to the feature.
phantomxx29474 commentedon Oct 9, 2026
Safari is gonna join us. Starting from Safari TP 254
https://webkit.org/blog/18420/release-notes-for-safari-technology-preview-254/
Oh, and Chrome is prototyping the feature.
https://groups.google.com/a/chromium.org/g/blink-dev/c/8FpImg92-4s