Kilian Valkhof

This is a very interesting proposal: set CSS custom properties for external documents through the link. So your SVGs could have an 'API':

In HTML:
<img src="image.svg#param(--accent,#F60)">

Or CSS:
img {
link-parameters: param(--accent, #F60);
}

Then in your SVG you'd use it like

<path fill="env(--accent)" ... />

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

CSS Linked Parameters Module Level 1

Jun 25 at 8:29amWeb
Show threadChristopher Kirk-Nielsen4d ago
@Kilian Ooh nice. While it feels a little weird to use `env()` (I'm used to it being a "browser level" thing only, not author), it's pretty elegant, and it will unlock a lot of nice powers and let us remove hacks… I'm all for it!
Show threadKilian Valkhof4d ago
@chriskirknielsen for the ‘world’ the svg lives in, that property is part of the environment its in, not of its authored styles. So it seems the right place to me.
Show threadChristopher Kirk-Nielsen4d ago
@Kilian Yeah I can see the logic there. It doesn't bother me as such, and it makes sense to not mix it with var(), while not introducing yet another function to consume it. To be fair I don't think I've ever really used env() for anything else anyways. 😅
Show threadJonathan Dallas4d ago
@Kilian there is a pretty interesting hack to let you get a lot of this functionality today that @kizu came up with a little while back https://kizu.dev/svg-linked-parameters-workaround/
Passing Data into SVG: Linked Parameters Workaround

Twelve years ago, I started a draft for an article. I never published it: there were a few cross-browser issues, and the idea was raw and unpolished. I have many drafts like this in my archives. Sometimes, something new interacts with one of these older ideas and leads to something interesting. This article is about one such case: a hacky technique that allows us to pass some data from CSS to SVG and use it to adjust colors or almost anything else.