[css-values-4] Pass data to the background image

[phistuck]

https://www.w3.org/TR/css-backgrounds-3/#the-background-image

When using SVG as a background image (this makes the CSS encapsulates everything in the design), its colors cannot be changed and CSS custom properties are not cascaded.
Adding a mechanism to pass data (maybe very limited data, in a standardized fashion, like only fill and stroke or similar) would make the images much more dynamic and suitable to a lot of use cases.
For example, a single image is needed in multiple colors per case.
The current options are -

• Sprite (must create an image per color).
• image.svg#some-id (must create a <use> or similar per color).
• filters (not totally predictable/interoperable/accurate and may affect unrelated things)
  None of them are great.

Maybe media fragments can be reused here, too -

<video src="video.mp4#t=10,20">

But then you cannot combine image.svg#some-use-id and passing more data.

[Crissov]

The solution should be image.svg#key=value and be part of the SVG spec, not CSS.

[phistuck]

@Crissov - while I only mentioned SVG, there might be other formats that can be passed data. Maybe formats that support elaborate alpha channels (WebP). I do not have a concrete idea for how other formats can take data, but maybe others can.

I do not mind filing an issue with SVG as well, just food for thought.