[csswg-drafts] Provide a way to pass communicate theming colors (and potentially other info) into SVG images, via e.g. Tab's SVG Parameters spec (#6988)

dholbert has just created a new issue for https://github.com/w3c/csswg-drafts:

== Provide a way to pass communicate theming colors (and potentially other info) into SVG images, via e.g. Tab's SVG Parameters spec ==
@tabatkins has a "SVG Parameters" spec proposal https://tabatkins.github.io/specs/svg-params/ that I'd like to see turned into an official draft, probably under the purview of the CSSWG (since it'd be a way to make information available via CSS).

Here's the elevator pitch, copypasted from the Introduction section of the spec proposal:
> SVG is stylable with CSS, and when used inline in HTML, this capability can be very useful. For example, an SVG icon can take on a different color based on whether the user is hovering it or not, just by appling a :hover rule to it that changes the fill property.
> 
> When the SVG is referenced in a way that doesn’t allow selectors or CSS inheritance from the outer page to apply to it (such as embedding it via img or iframe in HTML), though, this functionality is lost. The only way to change the display of such "external" SVG images is to produce several of them, and change which image you’re referencing. This incurs delay on the page as a new resource is downloaded, and disallows dynamic effects like CSS Transitions.
> 
> SVG Parameters are a way to set CSS custom properties on an "external" SVG image, by passing them through a special fragment scheme on the URL. This gives a limited, but powerful, subset of the customizability that "inline" SVG images have to "external" SVG images.

Mozilla is interested in implementing this feature in Firefox, once there's a CSS spec that's got consensus and seems ready for shipping.  Our primary use-case is to allow our toolbar icons (for add-ons as well as the standard back/forward/home/etc.) to use web standards to style themselves in accordance with the user's chosen browser-theme, beyond just "is it dark or light".  We think there are good uses for this feature on the web in general, too -- anywhere where a web developer might have some SVG assets that are referenced as images (e.g. `<img>` or CSS backgrounds) and where theming/coloring may want to be customized or may evolve over time, this sort of feature might be a good way to set and customize those colors.

Note: one of the core principles of this approach is that it needs to have opt-in from both sides (the outer document as well as the SVG image) in order to avoid data-leakage & unexpected side effects. The spec accomplishes this by: (1) baking the parameter-values into the image URL itself (as part of the fragment identifier or the CSS `url()` function), and by (2) having the image explicitly use the passed-in values (if it cares about them) using an explicit & newly-defined `param()` syntax.

I'm filing this issue to get the conversation started, and hopefully to gain consensus around this being a useful feature worth-speccing, and to find either an existing spec or create a new spec for this to live in.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6988 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 26 January 2022 00:42:58 UTC