Ordem de pintura SVG: contornos grossos atrás das letras

Defina paint-order="stroke fill" em um elemento SVG de texto ou forma para desenhar seu contorno antes do preenchimento. Com um preenchimento opaco, ele cobre a parte interna do contorno, de modo que um contorno grosso não invada a face colorida das letras. Você também pode escrever paint-order: stroke fill; em CSS.

O traçado, o tamanho da fonte e a largura do contorno permanecem iguais. Essa é uma configuração de aparência, útil quando uma marca tipográfica contornada fica pesada ou difícil de ler depois que você aumenta a largura do contorno. Ela não cria um contorno alinhado pelo lado externo nem um novo contorno de corte.

Por que o contorno padrão invade as letras

Normalmente, o SVG pinta o preenchimento de um elemento, depois seu contorno e, por fim, seus marcadores. Um contorno centralizado se estende sobre o limite da forma preenchida. Pintá-lo por último cobre parte do preenchimento. Em hastes estreitas de letras, um contorno largo pode esconder quase toda a cor da face.

Inverter as duas primeiras operações permite que o preenchimento cubra essa sobreposição. A especificação de pintura SVG define a ordem, e a referência do atributo SVG da MDN documenta tanto o atributo quanto sua versão CSS. O valor abreviado stroke tem a mesma ordem de stroke fill markers: as operações omitidas vêm depois, na sua ordem relativa normal.

O efeito precisa de um preenchimento visível. Um traçado com fill="none" não tem nada para pintar sobre a parte interna do contorno. Um preenchimento parcialmente transparente pode deixar esse contorno aparecer; por isso, use um preenchimento opaco para o resultado demonstrado aqui.

Compare a mesma arte em dois tamanhos

Fizemos uma marca tipográfica curta, BOLD, com texto editável e um pequeno emblema triangular em traçado. A comparação no navegador abaixo altera apenas a ordem de pintura dentro de cada par. Ela usa larguras de contorno de 4 e 8 unidades do usuário SVG e depois exibe o mesmo viewBox de 400 × 110 com larguras de 400 e 200 pixels CSS.

Na configuração de 8 unidades, a marca tipográfica na ordem normal perde boa parte de sua face amarela. Pintar o preenchimento por último mantém visíveis as hastes amarelas. O efeito ainda é aparente na versão de 200 pixels, mas as pequenas aberturas continuam apertadas. A minúscula abertura interna do emblema também fica difícil de distinguir com o contorno mais grosso.

Esse último detalhe importa: a ordem de pintura pode preservar a face de uma letra sem tornar todos os vazados ou espaços legíveis. Os contornos ainda se estendem para espaços sem preenchimento. Se uma abertura se fecha no tamanho de exibição pretendido, reduza o contorno ou simplifique a arte. Ampliar a prévia no navegador não substitui conferir o tamanho que o leitor realmente verá.

Esses são exemplos originais de desenho, não resultados de conversão do PerfectVector. A marca tipográfica usa a fonte Arial instalada com uma alternativa sans-serif; outra fonte altera as formas e o espaçamento das letras.

Experimente um SVG completo

Salve isto como wordmark.svg e abra-o diretamente em um navegador. O exemplo mantém espaço suficiente ao redor das formas para o contorno visível. Altere paint-order para normal para comparar e experimente stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

O grupo transmite suas propriedades de pintura ao traçado e ao texto. Cada filho usa a ordem solicitada na própria renderização. fill-rule="evenodd" dá ao emblema sua abertura interna; isso é independente da ordem de pintura.

Para reproduzir os exemplos pequenos, altere width e height para 200 e 55, mantendo o viewBox igual. Como esse arquivo não tem contorno sem escala, a arte e seu contorno são escalados juntos. Um contorno de 8 unidades passa a ter 4 pixels CSS de largura nesse mapeamento de metade do tamanho, antes de considerar a parte escondida pelo preenchimento.

Para uma versão baseada em folha de estilos, atribua uma classe ao alvo e defina:

.outlined-wordmark {
  paint-order: stroke fill;
}

Quando um atributo de apresentação e uma declaração CSS especificam a propriedade, o CSS tem prioridade. Se alterar o atributo parece não fazer nada, inspecione as regras aplicadas. A referência CSS da MDN também explica a herança e as combinações permitidas de palavras-chave.

O que essa configuração não altera

Alinhamento do contorno. O contorno ainda segue o mesmo traçado central. Pintar o preenchimento sobre parte dele cria uma borda com aparência externa ao redor das regiões preenchidas, mas não desloca a geometria do contorno para fora. Na borda de um vazado, o contorno visível restante pode invadi-lo.

O empilhamento de objetos separados. Definir a ordem de pintura em um elemento não o envia para trás de uma forma vizinha. Um objeto posterior sobreposto ainda pode cobri-lo. Reordene os objetos quando esse for o problema. Para um exemplo, veja por que z-index em SVG não reordena os traçados de um logo.

Traçados de corte ou deslocamentos. Uma máquina de corte ou ferramenta de geometria precisa dos contornos adequados. Não se pode supor que ela interpretará um contorno bonito no navegador como uma única borda unida. Crie e inspecione a geometria necessária separadamente se o trabalho de entrega exigir isso.

Portabilidade da fonte. A amostra contém texto editável. Alterar sua ordem de pintura não inclui a fonte no arquivo nem fixa as formas dos glifos. Use as verificações de mudança de fonte em SVG se uma marca tipográfica muda ao ser reaberta em outro lugar.

Mantenha essas distinções separadas durante a edição. Uma mudança de paint-order é fácil de reverter; expandir contornos ou converter texto em traçados altera a estrutura editável do documento.

Confira a cópia de entrega no destino

Comece com o resultado no navegador e abra o arquivo salvo no aplicativo ou renderizador que o consumirá. Uma prévia no navegador, sozinha, não comprova que um editor, conversor PDF ou fluxo de produção preserva a aparência.

1. Compare a cor da face e a borda externa no tamanho final. Olhe dentro de B, O e de quaisquer aberturas estreitas do emblema.
2. Confirme que a fonte esperada carregou. Confira o espaçamento e as formas das letras.
3. Confira as bordas da página. Um contorno mais largo pode precisar de mais espaço na área de visualização ou no recorte.
4. Reabra o arquivo exportado para entrega. Uma exportação pode alterar os estilos ou a construção dos objetos mesmo quando o documento de trabalho parecia correto.

Se o destino altera o contorno, reduza o arquivo a uma única forma preenchida e contornada e compare-a com o navegador. Siga o diagnóstico de contorno SVG que desaparece quando o problema for recorte, escala ou pintura ausente. Para um conflito de regras de cor, o guia de recoloração de SVG aborda onde os preenchimentos e contornos podem ser definidos.

Se a aparência editável não puder ser preservada na transferência, mantenha o mestre editável e prepare uma cópia de entrega separada com a aparência necessária representada como formas. Verifique essa cópia visual e geometricamente; apenas expandir um contorno centralizado não reproduz, por si só, todas as sobreposições pretendidas nem cria um único contorno externo.

Quando a origem é um logo raster

Use o emblema vetorial original e as letras editáveis quando você os tiver. Não há benefício em tirar uma captura de tela de um texto que funciona e vetorizá-lo só para adicionar um contorno.

Se um PNG ou JPG é a única versão restante do emblema, o fluxo de vetorização de logos do PerfectVector pode ajudar a preparar uma versão candidata em SVG em uma etapa anterior. Inspecione a silhueta convertida e as pequenas aberturas antes de aplicar esse estilo. A conversão não define a ordem de pintura, não identifica a fonte original nem decide quais formas devem compartilhar um contorno.

Quando as letras podem ser recriadas com a fonte correta, mantenha-as como um objeto de texto separado durante o desenho. O guia mais amplo de vetorização de logos explica como escolher entre recuperar uma arte raster e usar um mestre vetorial existente.

Perguntas frequentes

Qual é a ordem padrão de pintura SVG? O padrão é preenchimento, depois contorno e, por fim, marcadores. O valor normal solicita essa ordem.

paint-order="stroke" é diferente de "stroke fill"? Eles produzem a mesma ordem aqui: contorno, preenchimento e depois marcadores. Operações não listadas vêm depois das operações listadas, na sua ordem relativa normal.

paint-order cria um contorno externo? Ele não move nem desloca o contorno. Um preenchimento opaco esconde a parte interna de um contorno centralizado. O contorno restante ainda pode apertar vazados e espaços.

Por que meu contorno SVG ainda parece pesado demais? O contorno pode ser largo demais para o tamanho de exibição, o preenchimento pode ser transparente ou outra regra CSS pode substituir a ordem de pintura. Confira essas condições e inspecione as pequenas aberturas no tamanho final.

Fontes

1. W3C — pintura em SVG 2 — Define a ordem de pintura e a relação entre preenchimentos e contornos.
2. MDN — atributo paint-order do SVG — Documenta a ordem das palavras-chave, os tipos de elemento compatíveis e a prioridade do CSS sobre o atributo de apresentação.
3. MDN — propriedade paint-order do CSS — Explica a herança e as sequências abreviadas de palavras-chave.

Você tem apenas um emblema raster? Prepare um logo SVG editável, inspecione suas aberturas e teste o contorno no tamanho pretendido antes de fazer a cópia de entrega.