*Contact emails* [email protected] *Explainer* https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/SVG/CSSLinkedParameters/explainer.md
*Specification* https://drafts.csswg.org/css-link-params *Design docs* https://docs.google.com/document/d/1Dn0v19ljsQD8EKSxsAj2JhoG7DbK_Y3kZc7z8Fu36jg/edit?pli=1&tab=t.0#heading=h.b7buxfvoh942 *Summary* External SVGs referenced by an element or a CSS image property cannot be styled by the page that references them. CSS Linked Parameters lets a page pass named CSS values into such an SVG, so one cached file can be reused with different themes. Parameters are declared with 'param(<dashed-ident>, <declaration-value>?)' and supplied through either the new link-parameters CSS property, a link parameter directive in the URL, or a param() modifier in url(). The SVG reads each one as a custom environment variable through env(), which also provides a fallback when no value is passed. For example, the page writes: img { link-parameters: param(--color, green); } and the SVG writes: circle { fill: env(--color, black); } The circle is green when the page supplies --color, and black otherwise. *Blink component* Blink>SVG <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ESVG%22> *Web Feature ID* link-parameters <https://webstatus.dev/features/link-parameters> *Motivation* External SVGs loaded by an element or referenced through a CSS image property cannot be styled by the page that references them, so adapting an icon to a site's theme is difficult. Developers work around this by inlining the SVG, which bloats the document and prevents independent caching. Another developer workaround creates a copy of the file per theme variant, which duplicates assets and cache entries for what is logically one image. Yet another developer workaround fetches and rewrites the SVG using JavaScript, which adds complexity and can be blocked by CSP. CSS Linked Parameters address these gaps: a single cached SVG file renders differently at each reference, driven by parameters the page provides. *Initial public proposal* https://github.com/w3c/csswg-drafts/issues/9872 *Goals for experimentation* None *Requires code in //chrome?* False *Tracking bug* https://issues.chromium.org/issues/41482962 *Estimated milestones* No milestones specified *Link to entry on the Chrome Platform Status* https://chromestatus.com/feature/5095153430822912?gate=5149895506919424 This intent message was generated by Chrome Platform Status <https://chromestatus.com/>. -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/19c0b2a5-ce51-498a-83cf-2d1c7b45436fn%40chromium.org.
