Re: [csswg-drafts] [css-link-params] Let’s fix icons on the Web! Aka a way to pass currentColor and other context to linked SVGs (#9872)

If I understand @dbaron correctly, Gecko already extends [SVG2’s _context element_](https://www.w3.org/TR/SVG2/painting.html#TermContextElement) to the HTML host element, i.e. `<img>`, which can be styled with CSS.
> The **context-fill** and **context-stroke** values are a reference to the paint layers generated for the [fill](https://www.w3.org/TR/SVG2/painting.html#FillProperty) or [stroke](https://www.w3.org/TR/SVG2/painting.html#StrokeProperty) property, respectively, of the **_context element_** of the element being painted. The context element of an element is defined as follows:
>
>* If the element is within a ‘[marker](https://www.w3.org/TR/SVG2/painting.html#MarkerElement)’, (…)
>* If the element is within a sub-tree that is instantiated with a ‘[use](https://www.w3.org/TR/SVG2/struct.html#UseElement)’ element, then the context element is that ‘use’ element.
>* [_Gecko extends this to the HTML host element and both values, `context-fill` and `context-stroke`, become the host’s `currentColor`_.]
>* Otherwise, there is no context element.

This means, the SVG code might need to be changed to use the respective values, `context-fill` and `context-stroke`, but HTML and CSS would not need to be altered in many cases – whereas both must be specially prepared accordingly for CSS Linked Parameters.
~~~~ html
<style>.icon {color: green;}</style>

<img class="icon" src="#icon" />
<img class="icon" src="icon.svg" />
<img class="icon" src="sprites.svg#icon" />

<svg id="icon"><path fill="context-fill" d="M 1744 267, 711 1300, 176 765, 0 941 l 711 711, 1209 -1209 z"/></svg>

<svg><use class="icon" href="#icon"/></svg>
<svg><use class="icon" href="icon.svg"/></svg>
<svg><use class="icon" href="sprites.svg#icon"/></svg>
~~~~

I didn’t look far enough into the “bug” discussions to understand whether this would also apply to SVGs used from CSS, but I would expect so:
~~~~ css
i {color: green;}
i::before {content: url("icon.svg");}
i::after  {content: url("sprites.svg#icon");}
~~~~

I think this is the proper approach, but I understand that this isn’t viable in many scenarios, because the SVG cannot be changed by the CSS author for some reason – but then `param()` will likely also fail.

I also wished, SVG and HTML could simply reference a shared CSS stylesheet or reuse some (proposed) Shadow DOM mechanism.
~~~~css
:host(img.icon) path {fill: green;}
img.icon::shadow > svg path {fill: green;}
img.icon >>> path {fill: green;}
img.icon:root(svg) {color: green;}
~~~~

However, being able to set the initial expansion of predefined keywords from link parameters would be nice as well.
~~~~html
<img class="icon" src="icon.svg#param(context-fill green)"/>
<img class="icon" src="sprites.svg#icon#param(context-fill green)"/><!--?-->
~~~~
~~~~css
i::before {content: src("icon.svg" param(context-fill green));}
i::after  {content: src("sprites.svg#icon" param(context-fill green));}
~~~~

-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9872#issuecomment-1915155004 using your GitHub account


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

Received on Monday, 29 January 2024 16:53:40 UTC