One SVG, nine posters: the link-parameters property
CSS Linked Parameters lets you pass parameters into a single SVG file from HTML and CSS without duplication.
Vadim Makeev has explored the new CSS Linked Parameters specification, already available in Firefox Nightly and behind a flag in Safari TP.
The key feature is the ability to pass parameters into an SVG file directly from the HTML/CSS of the page that loads it.
How it works:
- Inside the SVG, use a variable instead of hardcoded values:
env(--color, fallback). - On the external website, pass the desired parameter when loading the SVG (for example, through
<img>):link-parameters: param(--color, coral).
For the demo, Vadim takes an Andy Warhol-style SVG poster and embeds it nine times using ordinary <img> elements. The result is a single cached file rendered in different colors without duplicating code or embedding inline SVG.
It is an excellent solution to the problem of having to put SVG into the DOM or create multiple file copies just to customize its color.