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

phistuck commented 5 years ago

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 commented 5 years ago

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

phistuck commented 5 years ago

@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.

w3c / csswg-drafts

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