Link parameters for styling non-inline SVG

[o-t-w]

Description

The simplest approach to using SVG is the HTML img element. Unfortunately this approach is the most limited when it comes to styling with CSS, a situation that would be remedied by CSS link parameters. Developers need to be able to change the fill or stroke color for hover/focus/disabled states, for example.

CSS link parameters are a way to set CSS custom environment variables on an "external" resource, either by a CSS property or through a special fragment scheme on the URL.

e.g.

<svg>
  <path fill="env(--color, black)" d="..." />
</svg>

<img src="image.svg#param(--color, green)">

img {
  link-parameters: param(--color, green);
}

.foo {
  background-image: url("image.svg", param(--color, green));
}

Specification

https://drafts.csswg.org/css-link-params/

web-feature

No response

Test Links

No response

Additional Signals

In the State of CSS 2025 84 people entered freeform answers about SVG pain points. A large proportion of those comments are complaints such as, to quote:

• “Cannot use currentColor in svg image, only inline svg”
• ”Not easily being able to recolor SVG files in CSS.”
• ”Not being able to (easily) change the stroke-/fill-color of an SVG background-image”
• “Ability to use currentColor and css variables for SVG set using background-image”

On Stack Overflow variations of the question ”How to change SVG color on hover” are perennial - someone asked for the first time over a decade ago and other people keep asking. Developers clearly need this functionality and have even come up with hacky, inelegant and imprecise solutions such as applying a bunch of CSS filters.

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

No web features (from the web-features project) were found in your proposal. If your proposal doesn't correspond to a web feature, that is fine.
Otherwise, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

[mayank99]

These features are largely unrelated/independent. Would love to upvote just "Allow omission of fragment when using <use>", in part because it seems further along than the other two.

[o-t-w]

@mayank99 That's a fair comment. I will split this into two separate issues, one for <use> and one for CSS link parameters. Seeing as there's already a pull request for dark mode in Safari, I am going to remove that, throw a penny in the well and hope that somebody at Apple can merge that eventually...

Please do give that issue a 👍 #1045

[lukewarlow]

I think it's worth adding the dark mode one as it's own issue too just in case. As that's quite a nice addition.

[kizu]

It would be great to have linked parameters for sure — their absence has been a constant pain for years and a source of megabytes of jsx-ified SVGs in js bundles. Recently I explored a few ways we can already hack around things to pass some data into SVGs: https://kizu.dev/svg-linked-parameters-workaround/ — but that's too hacky, and I won't recommend anyone to use this in production. A proper native solution, for which we already have a spec, would be great to have.

[o-t-w]

I have opened a separate issue for dark mode SVG support. Please give it a 👍 #1058

[jakearchibald]

One of the examples in the OP is incorrect. It should be:

img {
  link-parameters: param(--color, green);
}

The wrong example comes from the spec. w3c/csswg-drafts#12916

[o-t-w]

Thanks Jake, I have updated the example.

[captainbrosset]

WPT tests for CSS linked parameters were added in web-platform-tests/wpt#55617. Here they are on wpt.fyi: https://wpt.fyi/results/svg/styling/css-linked-parameters?label=experimental&label=master&aligned