web-platform-tests / web-platform-tests/interop

CSS Linked Parameters for SVG

Open
#1,346 3 comments 97 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

focus-area-proposal
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 currentColor and 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 through currentColor for 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.