shape-rendering crispEdges em SVG: quando ajuda?

Use shape-rendering="crispEdges" quando um SVG tiver bordas propositalmente duras e majoritariamente retas e um teste no tamanho final de exibição ficar melhor com essa opção. Mantenha o padrão auto quando a diferença for insignificante. Em arte curva, a indicação pode deixar uma borda mais áspera. Ela muda como um renderizador desenha formas existentes, não as formas em si. A especificação SVG 2 a chama de indicação e permite que o renderizador reduza o antisserrilhamento ou alinhe algumas bordas aos pixels do dispositivo.

Essa distinção importa se um ícone minúsculo parecer desfocado ou um logo ficar serrilhado após a exportação. crispEdges não transforma um PNG incorporado em traçados, não repara um contorno quebrado nem promete os mesmos pixels em todos os navegadores. Antes de mudar o arquivo globalmente, compare uma forma representativa com auto, crispEdges e geometricPrecision nos tamanhos que as pessoas realmente verão.

O que crispEdges pede ao renderizador

O SVG tem quatro valores de shape-rendering. Eles são prioridades, não quatro formatos de exportação. O padrão auto permite que o renderizador equilibre velocidade, contraste de bordas e precisão geométrica. crispEdges favorece contraste forte nas bordas e pode suprimir o antisserrilhamento; geometricPrecision favorece geometria fiel. A referência de atributos SVG do MDN explica que um renderizador pode tratar todas as bordas, ou apenas as quase horizontais e quase verticais, de maneira diferente. Não há um filtro obrigatório de nitidez.

Um atributo no SVG pai pode ser herdado pelas formas filhas, portanto aplicá-lo na raiz pode afetar um círculo que deveria permanecer suave. Você pode direcioná-lo a um único retângulo ou traçado. Se o atributo de apresentação SVG e uma declaração CSS shape-rendering se aplicarem, a propriedade CSS tem precedência.

Comparamos as mesmas formas em dois tamanhos

Criamos uma marca retangular em grade e um contorno curvo como formas SVG originais. A marcação, os preenchimentos e o viewBox eram idênticos nas três colunas; apenas o valor de shape-rendering mudou. Cada forma foi renderizada com 63 e 111 pixels CSS no Chromium, com zoom do navegador em 100%. A figura é uma captura do navegador desse teste local, não uma ilustração de um resultado imaginado.

Mesma geometria SVG, três indicações, dois tamanhos

Nenhum dos modos muda os traçados. Nesta captura, as diferenças são pequenas demais para declarar uma configuração vencedora em geral. O nome soa como uma ferramenta de correção, mas o efeito pode ser discreto para uma forma, tamanho e renderizador específicos. Inspecione o destino real antes de manter o atributo extra.

Esta foi uma renderização no Chromium, não um estudo de compatibilidade entre navegadores. Um visualizador PDF, editor de design ou navegador em outra escala de dispositivo pode rasterizar os mesmos traçados de forma diferente. A definição SVG 2 deixa deliberadamente as escolhas de implementação em aberto.

Teste em uma forma antes de aplicar em tudo

Salve uma cópia do SVG e coloque a indicação em uma forma representativa. Por exemplo, aplique-a à parte retangular de um ícone, deixando o detalhe curvo em auto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Abra o arquivo no visualizador pretendido em um tamanho pequeno de ícone e em um tamanho maior. Compare-o com o original salvo, incluindo diagonais e curvas. Se você estiver estilizando SVG embutido com CSS, procure uma regra que substitua o atributo. Remova a indicação quando ela não produzir uma melhora relevante; uma propriedade desnecessária dificulta o diagnóstico de diferenças futuras de exibição.

Combine a correção com o sintoma real

Para um sprite PNG cuja grade exata de pixels é o design, manter o raster pode ser a escolha mais limpa. O CSS image-rendering: pixelated controla como uma imagem escalada é amostrada; é uma propriedade diferente de shape-rendering do SVG. O guia de conversão de pixel art aborda quando preservar a grade, construir blocos vetoriais ou suavizar deliberadamente o contorno.

Quando o PerfectVector se encaixa

Se sua única origem é um pequeno PNG achatado e você precisa de traçados editáveis, uma indicação de renderização não pode fornecê-los. O PerfectVector é útil nessa etapa anterior: converta o PNG em um candidato SVG e inspecione as formas no tamanho necessário. Confira o contorno, as aberturas internas e os pequenos detalhes antes de experimentar uma indicação de exibição em traçados selecionados. Uma vetorização por traçado pode reinterpretar pixels como geometria; ela não decide se um degrau de pixel art deveria se tornar uma curva suave.

Mantenha o PNG quando a grade original for a arte final. Se você já tem um SVG limpo e apenas sua exibição no navegador parece estranha, corrija diretamente a exibição ou a geometria. Quando um PNG achatado realmente precisar de contornos editáveis, crie um candidato SVG com o PerfectVector, inspecione seus traçados e compare a renderização no navegador no tamanho final antes de adicionar crispEdges.

Perguntas frequentes

crispEdges remove o antisserrilhamento de todas as formas SVG? Não. Ele pede ao renderizador que favoreça o contraste das bordas. A especificação permite implementações diferentes, incluindo as que mudam apenas algumas bordas quase verticais ou quase horizontais. Teste a saída no visualizador que você usará.

Devo colocar shape-rendering="crispEdges" no SVG inteiro? Apenas se todas as formas filhas se beneficiarem. Uma indicação na raiz também pode afetar filhos curvos. Aplicar o atributo a uma forma retangular é mais fácil de avaliar e tem menos chance de deixar uma curva áspera.

crispEdges corrige emendas brancas ou um PNG borrado dentro de SVG? Ele não fecha um espaço real nem substitui pixels raster por traçados vetoriais. Diagnostique primeiro a geometria da emenda. Para um PNG escalado, use um método adequado de escala raster ou crie traçados vetoriais editáveis se essa for a necessidade real.

Fontes

1. W3C — Propriedade shape-rendering do SVG 2 — Define os quatro valores como indicações ao renderizador e explica seus ajustes permitidos.
2. MDN — Atributo SVG shape-rendering — Documenta formas SVG aplicáveis, herança e prioridade CSS.
3. MDN — Propriedade CSS shape-rendering — Descreve o comportamento da propriedade e por que a renderização de curvas pode variar.
4. MDN — Propriedade CSS image-rendering — Distingue a escala de pixels raster da renderização de bordas de formas vetoriais.