Arredonde cantos SVG mudando a forma preenchida

Para arredondar um canto preenchido de um caminho SVG, mude a geometria do caminho. Termine cada segmento reto adjacente antes do vértice e conecte esses novos extremos com uma curva. stroke-linejoin="round" muda o traço pintado em uma junção; o contorno preenchido original continua no lugar.

Este tutorial arredonda um canto de ângulo reto de um emblema preenchido original. Você precisa de um editor de texto simples e um navegador. Ao final, terá um SVG completo com uma concordância circular de 20 unidades, uma verificação de que o raio escolhido cabe e o arquivo angular original para comparar ou restaurar.

Uma concordância é uma curva que substitui um canto agudo e encontra tangencialmente as arestas adjacentes. O exemplo usa um quarto de arco circular entre arestas retas horizontal e vertical. Ele não arredonda automaticamente caminhos Bézier arbitrários obtidos por traçado.

Escolha a mudança de que sua arte precisa

A referência de stroke-linejoin define como um traço é desenhado nos cantos do caminho. Use uma junção redonda quando essa borda pintada for o que você deseja mudar. Para alterar uma silhueta preenchida, edite seu caminho real.

Para um retângulo simples, a referência de rect SVG documenta rx e ry. Nosso emblema também tem uma aresta diagonal, portanto convertê-lo em um retângulo arredondado mudaria mais que o canto escolhido.

Se o problema é apenas uma ponta longa em um traço, comece pelo diagnóstico de pontas de miter. Este artigo muda a geometria preenchida.

Salve o original angular

Copie este arquivo completo para emblem-original.svg e abra-o em um navegador. O vértice superior direito está em (170, 30). A aresta de entrada é horizontal; a de saída desce até (170, 100).

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

Preserve esse arquivo como master de comparação. Adicionar stroke="#df9d34", stroke-width="8" e stroke-linejoin="round" a esse caminho dá a ele uma borda pintada arredondada, enquanto o preenchimento escuro ainda alcança o canto agudo original.

Substitua esse canto por um arco de 20 unidades

Mova o fim da linha de entrada 20 unidades à esquerda do vértice, para (150, 30). Mova o início da linha de saída 20 unidades para baixo, para (170, 50). Um círculo centrado em (150, 50), com raio 20, une esses pontos como um quarto de arco.

Salve este segundo arquivo completo como emblem-rounded.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 significa um arco circular com raios horizontal e vertical de 20, rotação zero, arco pequeno e indicador de varredura 1, terminando em (170, 50). A especificação de caminhos SVG define esses parâmetros. Para este canto no sentido horário, eles selecionam o quarto de círculo pretendido. O guia de indicadores de arco ajuda a diagnosticar um arco que se curva pelo lado errado.

O raio do círculo é vertical no primeiro extremo e horizontal no segundo. Sua tangente acompanha, portanto, a linha horizontal de entrada e a vertical de saída. Uma curva pode parecer arredondada e ainda formar uma quebra na junção; essa construção dá direções tangentes correspondentes àquelas arestas específicas.

Confira se o raio cabe nas arestas disponíveis

Neste canto de 90 graus, uma concordância circular consome em cada aresta adjacente uma distância igual ao raio. O trecho de entrada tem 140 unidades, mas o de saída tem apenas 70. Para essa construção de um só canto, o raio precisa ser positivo e não passar de 70; escolha um menor se quiser preservar uma parte reta da aresta de saída.

A função seguinte é deliberadamente limitada a este emblema e canto exatos. Execute-a em um console JavaScript ou no Node.js para gerar o valor d de substituição.

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

Com raio 80, uma construção ingênua terminaria o arco em (170, 110), além do próximo vértice (170, 100). O V100 seguinte inverteria a direção. Rejeite esse raio em vez de aceitar qualquer resultado que o navegador desenhe.

Para outros ângulos entre arestas retas, a distância tangente depende do ângulo. Em um canto convexo comum com ângulo interno θ, essa distância é r / tan(θ / 2). Se você arredondar os dois extremos de uma aresta compartilhada, as duas distâncias consumidas precisam caber juntas nessa aresta. Cantos côncavos, curvas existentes e formas compostas exigem outras decisões geométricas; essa função não os trata.

Verifique a silhueta alterada e preserve a origem

1. Abra os dois SVGs completos no mesmo tamanho e fundo.
2. Remova temporariamente o traço da versão com junção pintada. O preenchimento deve coincidir com o original angular.
3. Compare o contorno superior direito da versão arredondada. Os demais lados, a aresta diagonal e a posição geral devem coincidir com o original.
4. Execute a verificação de raio com 20 e depois 80. O primeiro produz o caminho mostrado; o segundo gera o erro de raio.
5. Inspecione o SVG salvo no destino em que será usado. Restaure o original se o arredondamento remover uma característica deliberada ou o destino mudar a aparência.

Nota do método: renderizamos no Chromium os caminhos original, com traço redondo e com concordância. Uma amostra de preenchimento em (169, 31) estava dentro das duas primeiras formas e fora da forma com concordância. A função exata acima aceitou 20 e rejeitou 80. Também conferimos os dois extremos do arco em relação ao raio e às direções tangentes adjacentes. Isso verifica o exemplo fornecido de arestas retas, não um algoritmo geral de concordância ou o resultado de uma cortadora.

Se a curva se projetar para fora, inspecione o extremo do arco e o indicador de varredura. Se ainda houver uma quebra, confira se a tangente da curva coincide com o segmento vizinho; o guia de junções Bézier suaves explica essa tarefa de correção separada. O guia de edição de SVG aborda abrir, inspecionar e preservar um master utilizável.

Onde o PerfectVector entra antes da edição dos cantos

O PerfectVector pode recuperar caminhos vetoriais quando a arte existe apenas como imagem raster. Inspecione primeiro o contorno recuperado e depois decida quais cantos mudar em uma cópia. O fluxo de imagem para vetor fornece a recuperação; não aplica automaticamente essa construção de concordância.

Use o arquivo vetorial original quando estiver disponível. Um contorno traçado pode conter segmentos Bézier e pequenas irregularidades que não correspondem a este exemplo de arestas retas. Redesenhar um emblema simples pode ser mais fácil que arredondar cada junção traçada. Preserve a forma aprovada antes de qualquer redesenho intencional e use os guias de fluxos do blog para a próxima verificação de entrega.

Perguntas frequentes

Por que uma junção de traço redonda mantém agudo o canto do preenchimento?

A junção controla o traço pintado ao redor do caminho. O preenchimento segue a geometria existente, por isso mantém o canto original até você substituir essa geometria por uma curva.

Posso usar a função em qualquer caminho SVG?

Não. Ela trata um canto de ângulo reto específico do emblema de arestas retas mostrado. Outros ângulos, cantos côncavos, curvas existentes e restrições de arestas compartilhadas precisam de construções próprias.

Isso deixa um arquivo pronto para corte?

Muda um único contorno preenchido no exemplo. Inspecione a geometria salva e faça as verificações exigidas pela cortadora ou pelo processo de produção reais; este teste no navegador não comprova um resultado físico de corte.

Fontes

1. MDN — SVG stroke-linejoin — Define a configuração de pintura do traço diferenciada da geometria preenchida na comparação.
2. MDN — SVG rect — Documenta controles de raio mais simples para retângulos comuns.
3. W3C — Comandos de arco elíptico SVG — Define raios, indicadores e extremo do arco usados no caminho arredondado completo.

Se os caminhos originais estiverem ausentes, recupere sua arte com o PerfectVector. Confira o contorno com a referência, salve o master recuperado e teste alterações intencionais dos cantos em uma cópia separada no tamanho pretendido.