DEV Community

Cover image for External SVGs May Finally Become Themeable: Meet CSS Linked Parameters
Svg/icons
Svg/icons

Posted on

External SVGs May Finally Become Themeable: Meet CSS Linked Parameters

#svg #css #webdev #frontend

SVG icons have always forced developers into a trade-off.

Keep the SVG inline and you get excellent control from CSS.

Load it as an external image and you get a clean, reusable asset — but most of that styling control disappears.

A new CSS feature called CSS Linked Parameters could narrow that gap.

The interesting part is not simply that an external SVG may become recolorable. It is that an SVG file could expose a small, explicit theming interface while remaining an external resource.

That changes how we can think about reusable icon assets.

The problem with external SVGs

Consider a simple icon:

<img src="/icons/notification.svg" alt="">
Enter fullscreen mode Exit fullscreen mode

This is convenient.

The SVG lives in its own file, the markup stays small, and the browser can treat the icon like any other external image resource.

But there is a boundary.

CSS from the host page cannot normally reach inside that SVG and change its individual paths.

Something as natural as this does not solve the problem:

.notification {
  color: rebeccapurple;
}
Enter fullscreen mode Exit fullscreen mode

If the icon contains hard-coded fills or strokes, changing color on the <img> element does not magically propagate into its internal SVG elements.

Inline SVG behaves very differently.

<svg class="notification" viewBox="0 0 24 24">
  <path fill="currentColor" d="..." />
</svg>
Enter fullscreen mode Exit fullscreen mode

Now currentColor can participate directly in the surrounding page styles.

That makes inline SVG ideal for buttons, menus, states, themes and interactive UI.

But it also means the graphic becomes markup instead of remaining a standalone image asset.

CSS masks solve one important case

For monochrome icons, CSS masks already provide a very useful alternative.

.icon {
  width: 24px;
  height: 24px;

  background: currentColor;

  mask: url("/icons/search.svg") center / contain no-repeat;
}
Enter fullscreen mode Exit fullscreen mode

The SVG provides the shape while CSS provides the visible color.

This works especially well for interface icons that should simply follow the text color.

But a mask reduces the SVG to a silhouette.

That is exactly what you want for many icons — and exactly what you do not want for an icon containing multiple meaningful colors.

Imagine a notification icon with a neutral bell and a red status badge.

A mask cannot independently theme both parts.

What if the external SVG exposed parameters?

This is where CSS Linked Parameters becomes interesting.

Instead of allowing the page to reach arbitrarily into the external SVG, the SVG itself can define values it is willing to receive.

For example, our external notification.svg could contain:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
>
  <path
    fill="env(--icon-primary, #1f2937)"
    d="..."
  />

  <circle
    cx="18"
    cy="6"
    r="4"
    fill="env(--icon-accent, #e11d48)"
  />
</svg>
Enter fullscreen mode Exit fullscreen mode

There are two interesting pieces here:

env(--icon-primary, #1f2937)
env(--icon-accent, #e11d48)
Enter fullscreen mode Exit fullscreen mode

The SVG defines two parameters it knows how to use.

It also defines fallback colors.

Without any values coming from the host page, the icon still has a complete visual appearance.

Now consider the HTML:

<img
  class="notification-icon"
  src="/icons/notification.svg"
  alt=""
>
Enter fullscreen mode Exit fullscreen mode

The host page could supply values through link-parameters:

.notification-icon {
  --theme-icon-primary: #334155;
  --theme-icon-accent: #e11d48;

  link-parameters:
    param(--icon-primary, var(--theme-icon-primary)),
    param(--icon-accent, var(--theme-icon-accent));
}
Enter fullscreen mode Exit fullscreen mode

The page chooses the values.

The SVG chooses what those values control.

That separation is important.

This is not CSS inheritance through a wall

It is tempting to describe this feature as making external SVGs behave like inline SVGs.

That is not quite the right mental model.

The parent page still does not suddenly gain unrestricted styling access to every path inside the external image.

Instead, the SVG exposes an explicit contract:

--icon-primary
--icon-accent
Enter fullscreen mode Exit fullscreen mode

The document consuming the icon supplies values for that contract.

This is much closer to a component API than normal CSS inheritance.

And for reusable icon assets, that may actually be better.

The page should not need to know whether the red badge happens to be the third <path>, a <circle>, or part of a group.

It only needs to know:

This icon accepts an accent color.
Enter fullscreen mode Exit fullscreen mode

The SVG remains responsible for its own structure.

Light and dark themes become more interesting

That contract could make an external icon respond to a design system without duplicating the SVG file.

For example:

.notification-icon {
  --theme-icon-primary: #334155;
  --theme-icon-accent: #dc2626;

  link-parameters:
    param(--icon-primary, var(--theme-icon-primary)),
    param(--icon-accent, var(--theme-icon-accent));
}

@media (prefers-color-scheme: dark) {
  .notification-icon {
    --theme-icon-primary: #e2e8f0;
    --theme-icon-accent: #fb7185;
  }
}
Enter fullscreen mode Exit fullscreen mode

The SVG file itself does not change.

The URL does not need to switch between:

notification-light.svg
notification-dark.svg
notification-red.svg
notification-blue.svg
Enter fullscreen mode Exit fullscreen mode

Instead, the asset describes its visual structure and the consuming page provides the theme values.

That is a subtle but useful shift.

Four different SVG strategies

CSS Linked Parameters would not make the existing approaches obsolete.

They solve different problems.

Approach External asset Page-controlled color Multiple colors Best fit
Inline SVG No Yes Yes Maximum styling and interaction
<img> today Yes Very limited Fixed inside SVG Stable image assets
CSS mask Yes Yes No Monochrome UI icons
Linked Parameters Yes Yes Yes Parameterized reusable assets

This is why the feature is interesting.

It does not introduce a universal “best way” to use SVG.

It potentially adds a missing fourth option.

Use inline SVG when

you need deep styling, animation, DOM access or individual element manipulation.

Use a CSS mask when

the icon is fundamentally monochrome and should follow currentColor.

Use a normal <img> when

the SVG should behave like a fixed image and does not need runtime customization.

Linked Parameters may eventually fit when

the SVG should remain external but expose a controlled set of visual choices.

That last category is something the platform has not handled particularly elegantly before.

Fallbacks matter

A parameterized icon should still be a valid icon when no parameter is provided.

That is why this:

env(--icon-accent, #e11d48)
Enter fullscreen mode Exit fullscreen mode

is more robust than designing the SVG under the assumption that a host page will always configure it correctly.

The fallback is part of the asset.

A well-designed parameterized SVG could therefore have two layers:

Default visual identity
        +
Optional host customization
Enter fullscreen mode Exit fullscreen mode

That makes the file useful both as an ordinary image and as a theme-aware asset.

This could change how icon libraries describe SVGs

Today an icon catalog typically exposes an SVG as a file or a block of markup.

But parameterized SVGs suggest another possibility.

An icon could eventually declare something like:

notification.svg

Parameters:
--icon-primary
--icon-accent
Enter fullscreen mode Exit fullscreen mode

Another icon might expose:

--icon-fill
--icon-stroke
Enter fullscreen mode Exit fullscreen mode

A larger illustration could expose:

--surface
--foreground
--highlight
Enter fullscreen mode Exit fullscreen mode

At that point, an SVG is no longer just a graphic file.

It has a small public styling interface.

For an icon search engine or design system, that metadata could become useful: developers could know immediately whether an asset is fixed, monochrome-themeable, or fully parameterizable.

Don't ship your production icon system around this yet

CSS Linked Parameters is still experimental.

The specification is a work in progress, browser implementation is still evolving, and support is nowhere near a production baseline.

Firefox has an experimental implementation, and WebKit has also been actively implementing pieces of the specification.

That is encouraging.

It is not the same thing as broad browser support.

For production applications today, inline SVG, regular external SVGs and CSS masks remain the practical choices.

But Linked Parameters is worth watching because it targets a real limitation rather than inventing another SVG embedding technique.

The bigger idea

For years, choosing an SVG integration strategy has often meant deciding between two useful properties:

keep the graphic external

or

let the page control its appearance.

CSS masks found a clever compromise for monochrome graphics.

CSS Linked Parameters could eventually extend that idea to richer SVGs.

And perhaps the most interesting part is not dynamic recoloring itself.

It is the possibility of treating an SVG asset as something with a deliberate interface:

Here is the graphic.

Here are the parts you are allowed to theme.

Everything else remains encapsulated.
Enter fullscreen mode Exit fullscreen mode

That feels less like styling an image.

It feels more like using a very small visual component.

And that could be a useful direction for SVG icons on the Web.

Further reading

  • W3C — CSS Linked Parameters Module Level 1
  • MDN — link-parameters CSS property
  • MDN — param() CSS function
  • Mozilla — Firefox experimental web features

Top comments (0)