SVG “Linked Parameters” Will Change How We Do Icon Systems

Vadim Makeev has a great blog post detailing an SVG styling situation as old as time. Basically:

1. Inline SVG is pretty good because it’s fast and has full styling control, but it can bloat the DOM and doesn’t take advantage of caching.
2. SVG <use> is hampered because of the Shadow DOM and inability to link the “sprite” from another domain.
3. Using SVG via <img> or background-image is fine, but you give up almost all styling control.

I’d say “mostly” people are just using inline SVG for icon systems these days. Or, they use an icon font. Icon fonts have always sucked for the job. If the font doesn’t load, you see gibberish, and you need to be really careful with accessibility. Say the “b” character is a “share” icon visually, it’s still a “b” to anything reading, which is silly and weird (and worse: outright confusing).

Imagine if we could have styling control in CSS over an icon used like this:

<img
  src="/images/icons/share.svg"
  width="32" height="32"
  alt="Share">Code language: HTML, XML (xml)

By styling control, I mean literally changing the fill and stroke of individual elements! Of course, we already have some styling control through CSS, like its size, position, rotation, and whatnot. Even with filter we could rotate the hue of the whole thing. But we can’t reach in and style things like we can with inline SVG.

But we can set up the SVG source in such a way that will accept outside styling, even through the <img>. Here’s the example code Vadim showed:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect fill="env(--color, #c1f07c)" width="160" height="160" rx="80" />
  <path fill="black" d="M123.13 36.87a61.02 61.02 0 0 0-86.26 0…" />
</svg>Code language: HTML, XML (xml)

Note the somewhat unusual usage of env() in there. A cool part about this is that browsers that don’t support the rest of this will still set a fill of #c1f07c, making this very progressive enhancement friendly.

So now we’ve got this --color that we can get our hands on. We’ll need to select the image where this SVG is the source, and then use the whole “Linked Parameters” thing:

img {
  link-parameters: param(--color, #ff8052);
}Code language: CSS (css)

That’ll reach into the SVG-as-<img> and colorize that <rect>, which is wild. Same deal with background-images, I think.

So you’d think ahead and set up your icons like:

The reason I think this changes the ballgame with icon system is…

1. Each icon can be an individual file. This is very efficient for browser caching. You could combine them all into a sprite if you really wanted a “one request” situation by using fragment identifiers, but that’s a bit more complex and changing anything would break cache on the whole thing.
2. Usage is easy and DOM-efficient. <img src="/icons/share.svg" />
3. You get alt text.
4. You get loading="lazy" to not load anything at all if you’d like.
5. And now, you have all the styling control you typically need.

I think that’s all upsides and no downsides.

I have no idea if or when this will be “baseline” (supported in all major browsers). But Firefox Nightly has a flag: layout.css.link-parameters.enabled and Safari Technology Preview also has a flag: Settings → Feature Flags → CSS → “CSS Linked Parameters”