Pontas miter SVG: corrija cantos sem recortá-los

Uma ponta parecida com agulha em um contorno SVG geralmente vem de uma junção miter em um canto agudo. Se você não quiser a ponta, reduza stroke-miterlimit ou escolha uma junção chanfrada ou arredondada. Se a ponta fizer parte do design, mas sua extremidade desaparecer, dê mais espaço ao contorno pintado dentro do viewBox. São correções diferentes: uma muda a forma do canto; a outra muda o que o arquivo pode exibir.

Guarde uma cópia do SVG original durante os testes. Um logo com uma ponta aguda deliberada pode precisar preservar seu miter, enquanto uma ponta indesejada em um contorno importado pode precisar de uma junção mais plana. Primeiro decida qual canto deve permanecer.

Por que um canto estreito cria uma ponta

Um traçado com contorno tem largura dos dois lados de sua linha central. Com stroke-linejoin="miter", as bordas externas do contorno continuam até se encontrarem. Quanto mais aguda a mudança de direção, mais distante esse encontro pode ficar. O SVG usa miter como estilo inicial de junção, e o stroke-miterlimit inicial é 4, segundo a definição de pintura SVG 2.

O limite é uma razão, não uma distância em pixels ou unidades SVG. Se o comprimento do miter dividido por stroke-width exceder o limite, uma junção miter comum se torna um chanfro. Um limite maior permite uma ponta mais longa; um menor achata mais cantos agudos. A referência de miter-limit do MDN mostra a relação com o ângulo do canto e observa que uma propriedade CSS pode substituir o atributo de apresentação SVG.

Um traçado, quatro resultados visíveis

Para este teste, desenhamos um segmento aberto e angular de emblema com d="M130 520 L180 200 L230 520" e um contorno de 26 unidades. Os dois primeiros painéis usam limite miter 10. O segundo aplica um limite visível justo em y=170, que corta a ponta. O terceiro usa limite 4, portanto esse canto vira um chanfro. O quarto usa round. Esta é uma ilustração controlada desse traçado e desse renderizador, não uma promessa de que todo SVG importado terá a mesma forma de canto.

O traçado central vermelho tracejado é igual nos quatro painéis. Isso importa: mudar a junção do contorno pode corrigir um contorno pintado sem reconstruir o traçado vetorial subjacente.

É uma ponta, um chanfro ou uma ponta recortada?

Uma ponta recortada pode parecer um chanfro intencional à primeira vista. Amplie e confira se seu final se alinha ao limite do arquivo. O diagnóstico de contornos SVG que desaparecem aborda outras causas de pintura e recorte; este teste isola o canto miter.

Corrija o canto sem mudar a coisa errada

1. Encontre o traçado e sua junção efetiva

Selecione o canto em um editor vetorial ou inspecione o texto SVG em busca de stroke, stroke-width, stroke-linejoin e stroke-miterlimit. Confira grupos pais e regras CSS, além dos atributos do próprio traçado. Uma propriedade stroke-miterlimit embutida ou em folha de estilo pode ter precedência sobre o mesmo atributo de apresentação no elemento, como documenta o MDN.

Se o objeto selecionado for um contorno preenchido em vez de um contorno ativo, pare de ajustar configurações miter. Você precisa mudar o traçado desse preenchimento ou voltar ao original com contorno não expandido. Se a importação inteira estiver no tamanho errado, execute o teste de importação SVG com tamanho conhecido antes de compensar mudando a largura do contorno.

2. Mude uma configuração de junção em uma duplicata

Experimente primeiro um chanfro quando um canto plano mecânico for aceitável. Experimente round quando o design permitir uma borda suavizada. Mantenha miter quando a ponta exata fizer parte da marca e escolha um limite que preserve apenas as pontas pretendidas. A referência SVG de stroke-linejoin define as diferenças entre as formas comuns de junção.

Aqui está uma pequena cópia de teste do traçado usado acima:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Mude stroke-miterlimit para 4 para ver a substituição por chanfro nesse ângulo específico. Depois restaure 10 e mude stroke-linejoin para round ou bevel. O valor de stroke-miterlimit é irrelevante para esses dois últimos estilos de junção. Não o reduza em um logo inteiro apenas porque um canto está errado; outras pontas podem ser deliberadas.

3. Dê espaço suficiente a uma ponta desejada

Se o miter estiver correto, mas desaparecer na borda, amplie ou reposicione o viewBox ao redor do resultado pintado, não apenas das coordenadas do traçado. A definição de sistema de coordenadas SVG 2 explica o retângulo visível; o contorno pode se estender além das coordenadas de seu traçado central. Confira também viewports SVG aninhadas e traçados de recorte. Um recorte do pai pode continuar cortando a ponta mesmo após expandir o viewBox raiz.

Não trate uma área de desenho maior como cura para uma agulha acidental. Ela apenas revela mais dessa agulha. Da mesma forma, mudar a junção para chanfro apenas para caber em uma prancheta justa pode apagar um canto projetado. Compare o arquivo entregue com a marca original no tamanho real de exibição ou impressão. Se um fornecedor medir um tamanho SVG físico, preserve a largura e a altura pretendidas ao mudar deliberadamente o mapeamento do viewBox.

4. Reabra o arquivo entregue

Inspecione o resultado em um navegador e no editor ou aplicativo de produção de destino. Confira a ponta em 100% e no tamanho final pretendido. Se a entrega exigir contornos preenchidos em vez de contornos ativos editáveis, guarde seu original, converta o contorno de uma cópia de entrega em traçados no editor e inspecione o novo limite preenchido. Essa conversão muda a geometria; não é uma configuração miter reversível. Para uma verificação mais ampla de preenchimentos e contornos, veja o guia de paint-order SVG.

Quando um logo raster precisa primeiro de um novo traçado

Controles miter só funcionam em um contorno vetorial ativo. Se o único logo restante é um PNG ou JPG, o fluxo de vetorização de logos do PerfectVector pode criar um candidato SVG antes de você editar seus cantos. Compare a silhueta recuperada, os pequenos espaços e a estrutura dos traçados com a origem. Uma vetorização pode representar uma linha raster grossa como um contorno preenchido, não como a linha central editável original, portanto não espere que stroke-miterlimit corrija esse resultado automaticamente. Redesenhe uma ponta geométrica crítica quando ela precisar corresponder exatamente ao original da marca.

Se o SVG original existir, corrija esse arquivo em vez de vetorizar uma captura de tela. O guia de vetorização de logos ajuda quando você realmente precisa reconstruir arte a partir de pixels; este artigo começa depois que um contorno ativo adequado já existe.

Verificação final dos cantos

1. Salve o original vetorial sem alterações.
2. Confirme se o canto é um contorno ativo ou um contorno preenchido.
3. Compare miter, bevel e round no único traçado afetado.
4. Se preservar um miter, teste seu limite e deixe espaço visível suficiente para toda a ponta pintada.
5. Reabra o SVG no destino real e confira no tamanho final.

Perguntas frequentes

Por que meu SVG tem pontas em cantos agudos? Uma junção miter estende as bordas externas do contorno até se encontrarem. Em um ângulo agudo, esse encontro pode ficar longe do traçado central. Reduza o limite miter ou use bevel ou round quando a ponta for indesejada.

Por que reduzir stroke-miterlimit deixa um canto plano? Quando a razão entre comprimento do miter e largura do contorno excede o limite, uma junção miter comum é substituída por bevel. Valores menores acionam essa substituição em mais cantos. Mantenha um limite maior se a ponta aguda for intencional e confira seus limites.

Por que a ponta do SVG continua cortada depois de aumentar o limite miter? O limite maior pode alongar a ponta enquanto o viewBox ou um recorte ainda a corta. Expanda a região visível ao redor do contorno pintado ou reposicione a marca e reabra o SVG entregue no destino.

Fontes

1. W3C — Pintura SVG 2 — Define junções de contorno, valores iniciais e comportamento de substituição do miter.
2. MDN — stroke-miterlimit — Explica a razão do limite e sua relação com ângulos agudos de canto.
3. MDN — stroke-linejoin — Define formas comuns de canto em traçados com contorno.
4. MDN — CSS stroke-miterlimit — Documenta a precedência da propriedade CSS sobre o atributo de apresentação SVG.
5. W3C — Sistemas de coordenadas SVG 2 — Define a relação entre viewBox e viewport usada na verificação dos limites.

Se uma marca apenas raster precisa de traçados utilizáveis antes dessa correção, crie um candidato SVG do logo, inspecione sua geometria e ajuste ou redesenhe os cantos relevantes.