# Um SVG, nove pôsteres: CSS Linked Parameters
> CSS Linked Parameters passa cores do CSS para um SVG carregado como img ou background. Veja como funciona, o fallback grátis e o que falta no recurso.
URL: https://dpw.dev/css/css-linked-parameters-svg/
Publicado em: 2026-10-22
Categoria: css
Tags: interface, web-design, design-system
Autor: Tárcio Zemel
Um SVG usado como `sprites SVG e voltou com uma lista de métodos, cada um quebrado do seu jeito. A linha divisória acabou ficando num lugar diferente do esperado.
Cache é um problema resolvido : um sprite cheio de ``s vive num arquivo externo, entra no cache como qualquer outro e ainda respeita o `currentcolor`. Só que isso funciona apenas por meio de um `` inline como marcador no HTML.
Peça o mesmo gráfico como `CSS Linked Parameters , que permite passar valores CSS para um recurso vinculado, e o recurso decide o que fazer com eles.
O Firefox Nightly traz uma implementação experimental desde a versão 153, com a preferência `layout.css.link-parameters.enabled` ativada por padrão, e nenhum outro navegador tem nada. Ou seja, está longe de produção.
Mas já dá para brincar com ele hoje, e havia a desculpa perfeita para isso: imprimir um Andy Warhol.
> **Atualização:** **Atualização:** agora são dois motores. Bigandy testou as demonstrações no Safari Technology Preview 253, onde existe uma flag para o recurso: Settings → Feature Flags → CSS → "CSS Linked Parameters". É experimental e vem desligado por padrão, então o "longe de produção" continua valendo.
## O beco sem saída da estilização
Uma recapitulação rápida do problema. Aqui está o mesmo logo, colocado de quatro formas diferentes:
```html
```
As duas primeiras podem ser estilizadas pelo CSS da página: o `currentcolor` e propriedades herdadas como `fill` atravessam a fronteira do SVG inline e, com algumas restrições, chegam ao símbolo que ele puxa de um arquivo externo.
As duas últimas, não. Um `
```
Talvez você conheça o `env()` do `safe-area-inset-bottom` e companhia, em que o navegador fornece os valores. Aqui é o contrário: o nome é seu, e a página que vincula este arquivo fornece o valor.
O segundo argumento é o fallback. Enquanto ele estiver lá, o arquivo continua sendo um SVG perfeitamente normal, que é renderizado sozinho, em qualquer navegador, sem parâmetro nenhum.
Também funciona num elemento `
```
### O lado do CSS
Na página, os valores são definidos com a propriedade `link-parameters` e a função `param()`:
```css
img {
link-parameters: param(--color, #ff8052);
}
```
Só isso. O elemento `Abrir a demonstração do logo em nova aba
A nomenclatura confunde um pouco no começo. Em `param(--color, #ff8052)`, o primeiro argumento é o nome do parâmetro e o segundo é o valor enviado. Em `env(--color, #c1f07c)`, o primeiro argumento é o mesmo nome e o segundo é o fallback.
Mesmo formato, funções diferentes: `param()` manda um valor para dentro, e `env()` decide o que usar quando nada chega.
> **Nota:** A propriedade não é herdada. O valor inicial dela é `none` e ela se aplica a todos os elementos e pseudo-elementos, mas precisa ser definida no próprio elemento que carrega a imagem. Colocá-la num wrapper não faz nada.
## Quatro matrizes, um pôster
Uma cor é legal, mas um logo não é lá uma grande tela. Hora de apresentar uma de verdade: a gravura Marilyn, de Andy Warhol, de 1967, vetorizada em SVG.
Warhol fazia essas obras em serigrafia, o que significa que a imagem é uma pilha de matrizes de cor chapada, uma passada de tinta cada. A vetorização funciona exatamente do mesmo jeito: quatro elementos ``, quatro cores chapadas, cada uma pintada por cima da anterior.
Nada de gradientes, nada de opacidade, nenhum truque esperto. É a imagem mais parametrizável que se poderia imaginar.
```xml
```
Os paths vão de baixo para cima, na ordem em que as telas desceriam. A matriz escura vai primeiro.
Depois, o tom de pele cobre a tela inteira e abre buracos em si mesmo onde o escuro deve aparecer: o atributo `d` dele começa traçando os quatro cantos e depois gasta algumas centenas de subpaths recortando buracos nesse retângulo. Em seguida vêm o cabelo e o fundo, cada um pintado por cima do que veio antes.
Agora, quatro parâmetros em vez de um:
```css
img {
link-parameters:
param(--back, #cfa9bf),
param(--hair, #faa601),
param(--face, #99d2d7),
param(--dark, #73901a);
}
```
Abrir a demonstração do pôster em nova aba
> **Nota:** Repare que a sombra dos olhos e os lábios mudam junto com o fundo. Na gravura, eles estão na mesma matriz, então estão no mesmo path da vetorização, e um parâmetro pinta os três.
## Nove pôsteres, um arquivo
E aqui está a parte que faz desse recurso mais do que um substituto do `currentcolor`. O mesmo arquivo, referenciado nove vezes, pintado de nove jeitos diferentes:
```html
```
```css
.poster__panel--pink {
link-parameters:
param(--back, #f85983),
param(--hair, #ecef81),
param(--face, #edb3ac),
param(--dark, #322e2e);
}
.poster__panel--turquoise {
link-parameters:
param(--back, #4a9fac),
param(--hair, #d87205),
param(--face, #cba6bd),
param(--dark, #a09797);
}
/* …e mais sete */
```
Abrir a demonstração dos nove pôsteres em nova aba
Demonstrações ao vivo são complicadas para um recurso que só existe no Firefox: a menos que você esteja lendo isto no Nightly, a demonstração não vai mostrar o que está descrito aqui. Esta é uma captura de tela de um navegador que tem o recurso:
Nove pinturas, um arquivo de 50 KB, uma requisição de rede. A especificação é explícita: quando a mesma URL aparece várias vezes com parâmetros diferentes, os navegadores precisam pintar cada uma corretamente, mas podem compartilhar o documento por trás delas.
Essa é a parte que nenhuma técnica existente oferece. Símbolos SVG podem mudar de cor, mas só por meio de um marcador inline. Fragmentos e stacks funcionam em `custom properties sempre tiveram. `var(--brand, black)` cai no preto quando `--brand` nunca foi definida, e `env(--brand, black)` cai no preto quando nada foi passado.
> **Nota:** Por falar nisso: `@supports (link-parameters: param(--a, red))` funciona no Nightly, para quem quiser servir um layout diferente aos navegadores que conseguem de fato distinguir os nove painéis.
## Ainda não chegou lá
Mesmo no Nightly, só uma parte da especificação está implementada, e o resto é acompanhado no bug 1812163 . A propriedade em si funciona, inclusive em imagens de fundo:
```css
div {
background-image: url('poster.svg');
link-parameters: param(--back, tomato);
}
```
Mas as outras duas formas que a especificação define para passar parâmetros ainda não funcionam. Nem o modificador de `url()`:
```css
div {
/* Não, ainda não */
background-image: url('poster.svg' param(--back, tomato));
}
```
Nem o fragmento da URL, que é o mais aguardado pelo autor, porque funcionaria direto do HTML, sem CSS nenhum:
```html
, tomato)`, não existe ainda. Sem ela, funciona normalmente.
- Um `` inline com `` também não recebe nada. Por enquanto, só `SVG Linked Parameters Will Change How We Do Icon Systems .
Até lá, a única coisa a fazer com ele é brincar. Abra os nove pôsteres no Nightly, escolha as próprias cores e veja até onde quatro parâmetros chegam.
Warhol provavelmente teria gostado deste. Mesma tela, tinta diferente, roda de novo 🎨
## Perguntas frequentes
### Um site de terceiros consegue estilizar à vontade um SVG meu com `link-parameters`?
Não. O valor só chega às propriedades que o próprio SVG abre com `env()`. A [seção de segurança da especificação](https://drafts.csswg.org/css-link-params-1/) reconhece que o mecanismo cria um jeito novo de passar informação a um recurso vinculado, possivelmente vindo de uma fonte hostil, e por isso não exige nenhum acordo prévio: um valor hostil só afeta as propriedades CSS que o recurso escolheu expor. Um parâmetro que o arquivo não lê com `env()` simplesmente não tem efeito.
### Preciso repetir o fallback em cada `env()` do arquivo SVG?
Não precisa. A [especificação sugere](https://drafts.csswg.org/css-link-params-1/) ler o parâmetro uma vez numa custom property na raiz do SVG, com o valor padrão ali, e usar `var()` no resto do arquivo. Se a página mandar `--color`, a variável recebe esse valor; se não mandar, fica com o padrão. É o mesmo contrato da [seção sobre o fallback](#o-fallback), só que concentrado num lugar.
```css
:root {
--color: env(--color, blue);
}
.logo {
fill: var(--color);
}
```
### O que acontece se o mesmo parâmetro vier da propriedade e do `url()`?
Vale o do `url()`. A [especificação](https://drafts.csswg.org/css-link-params-1/) junta todos os parâmetros numa lista só, nesta ordem: a propriedade `link-parameters`, depois as diretivas do fragmento da URL e por fim os `param()` dentro de `url()`. Quando um nome se repete, o último da lista ganha. Na prática ainda não dá para testar isso: como mostra a [seção sobre o que falta](#ainda-não-chegou-lá), o Nightly só implementa a propriedade.
### Dá para animar a troca de cor de um ícone com `transition` no `:hover`?
Não de forma suave. A [página do MDN sobre `link-parameters`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/link-parameters) define o tipo de animação da propriedade como discreto, ou seja, o navegador passa de um conjunto de parâmetros para o outro de uma vez, sem cores intermediárias. A troca no hover funciona, mas sem a transição gradual entre os dois tons que uma propriedade como `fill` teria num SVG inline.
## Teste seus conhecimentos
**Pergunta 1.** O `