web-platform-tests / web-platform-tests/interop
CSS Linked Parameters for SVG
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 524
- Forks
- 35
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 10
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the CSS Linked Parameters specification and the linked web-features entry. Then inspect the SVG styling results on WPT.fyi and the linked browser implementation issue; the scope is complete when support for the three described parameter forms is evaluated against the specification and relevant tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100