- From: Daniel Holbert via GitHub <sysbot+gh@w3.org>
- Date: Tue, 02 Aug 2022 06:51:01 +0000
- To: public-css-archive@w3.org
For discussion purposes, here's some "prior art" in this neighborhood, i.e. other places where we've got SVG/icons that can be customized externally at the embedding site:
(1) Safari's "pinned tab icons", e.g. `<link rel="mask-icon" href="website_icon.svg" color="red">`
* It's one way to pass a custom color into an SVG icon.
* ...but in an extremely limited context (and via a non-standard mechanism).
(2) "icon fonts" that are monochrome & let you customize the icon colors just by literally setting CSS `color`.
* It's one way to define a reusable icon-set which can be arbitrarily colorized.
* ...but only supports customization of a single color (via CSS 'color') and requires you to package up your icons as a font.
(3) Inline-SVG icon toolkits, with `fill`/`stroke` being customizable at the embedding site.
* This gives us nearly the flexibility that we want...
* ...except that it uses inline SVG injected directly into the DOM. So this can't be used as a background or as an `img` element, and it accordingly requires a bit more trust, and doesn't benefit as directly from SVG-image rasterization caching benefits ("surface cache" in Firefox).
(4) SVG image files, referenced as images, with a viewbox specified in the fragment identifier, e.g. `<img src="foo.svg#svgView(...)">`
* This is one way to do "SVG Sprites". It doesn't directly address the use-cases discussed here, but it's an example of how you can already use fragment identifiers to make an SVG image render differently (with cooperation from the SVG, e.g. by placing different components/icons at different predefined locations in the coordinate space).
* This is similar but doesn't give us the flexibility that we're looking for here (passing in values like colors of the brand/theme).
(5) SVG images that render differently in dark mode, per #7213.
* This gives you one bit of information that the image can react to (i.e. it could have a dark version and a light version)
* ...but designers may need to enable more fine-grained customizability than that, and may want to e.g. vary the colors on hover, etc.
--
GitHub Notification of comment by dholbert
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6988#issuecomment-1202088079 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 2 August 2022 06:51:03 UTC