Curvas Bézier SVG: corrija quinas sem adicionar nós

Para remover uma quina indesejada onde dois segmentos Bézier cúbicos comuns se encontram, mantenha a âncora compartilhada no lugar e alinhe as alças adjacentes em uma linha reta, em lados opostos dessa âncora. Seus comprimentos podem diferir enquanto as curvas compartilham uma direção tangente. Alças refletidas iguais impõem uma condição adicional; não são necessárias para toda junção visualmente suave.

Inspecione a forma de origem antes de fazer essa mudança. Uma ponta de folha, um entalhe ou um canto de letra pode ser intencional. A correção abaixo trata de uma mudança indesejada de direção, mantendo fixos o início, a junção, o final e a quantidade de segmentos.

Encontre as duas alças que controlam a junção

Um comando SVG cúbico tem dois pontos de controle e um ponto final:

C firstControlX firstControlY secondControlX secondControlY endX endY

O segmento começa no ponto atual. Seu primeiro ponto de controle orienta a direção de saída desse início; o segundo orienta a chegada ao ponto final. O tutorial de traçados do MDN ilustra esses pontos de controle e a sintaxe cúbica. Para pares de coordenadas de comandos em minúsculas, siga o guia de comandos relativos de traçado SVG para acompanhar a base antes de mudar as alças.

Em uma âncora compartilhada, inspecione o último ponto de controle do segmento anterior e o primeiro do seguinte. Se essas alças apontarem em linhas diferentes, a junção muda de direção. Adicionar outro nó próximo não resolve essa relação por si só.

Corrija o exemplo original de dois segmentos

Salve este SVG completo como join-example.svg e abra-o em um navegador. Ele é uma marca curva original com uma quina deliberada em (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

O ponto de controle de entrada é (100, 100), diretamente à esquerda da junção. O de saída é (170, 50), acima e à direita dela. A curva chega horizontalmente e sai em outra direção.

Mude apenas o primeiro ponto de controle do segundo segmento para (175, 100):

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

As duas alças adjacentes agora ficam na linha horizontal que passa pela junção. A alça de entrada tem 50 unidades de comprimento, e a de saída, 25. A direção tangente coincide apesar de os comprimentos diferirem.

Para um par refletido, mude esse ponto de controle para (200, 100). As duas alças então se estendem 50 unidades a partir da âncora compartilhada. Isso muda a forma do segundo segmento mais do que a edição de alças desiguais, portanto compare ambas com o contorno que pretende preservar.

Cada versão tem dois segmentos cúbicos e três âncoras sobre a curva: início, junção e final. Os pontos de controle são coordenadas separadas. A comparação é uma renderização original no navegador, não um resultado traçado do PerfectVector nem uma captura da ferramenta de nós de um editor.

Confira a direção separadamente do comprimento das alças

Para uma cúbica que termina na junção J com último ponto de controle A, sua derivada no extremo é 3 × (J − A). A cúbica seguinte, que começa em J com primeiro ponto de controle B, tem derivada inicial 3 × (B − J).

Em nosso exemplo, a derivada de entrada é (150, 0) em todos os painéis:

Igualar as direções tangentes é chamado de continuidade G1. Igualar as primeiras derivadas é continuidade C1, usando o intervalo usual de parâmetro de zero a um em cada uma destas duas cúbicas. As notas de derivadas Bézier da Michigan Tech derivam essas condições nos extremos.

O teste de direção presume derivadas não nulas nos extremos. Uma alça colapsada sobre sua âncora precisa de outra verificação, pois sua primeira derivada é zero. Além disso, apenas a colinearidade é insuficiente se ambas as alças estiverem no mesmo lado da junção: a direção do percurso pode se inverter.

Nenhum dos exemplos alinhados promete curvatura equivalente através da junção. Uma curva pode não ter uma mudança brusca de direção tangente e ainda precisar de ajustes para corresponder à silhueta pretendida do logo. Inspecione toda a curva, não apenas o nó selecionado.

Use S apenas quando a reflexão for a forma desejada

A versão refletida pode ser escrita de forma mais compacta:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Aqui, S infere o primeiro ponto de controle refletindo o último ponto de controle da cúbica anterior em torno do ponto atual:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Os pares restantes em S240 50 270 50 especificam o segundo ponto de controle e o ponto final. Esta é a versão de alças refletidas 50/50. Ela não pode substituir a versão 50/25 sem mudar a curva.

A especificação dos comandos cúbicos SVG limita essa regra de reflexão a um comando anterior C, c, S ou s. Se o comando anterior for uma linha ou uma curva quadrática, o primeiro ponto de controle implícito será o próprio ponto atual.

Por exemplo:

M30 150 L150 100 S240 50 270 50

Após a linha, esse último segmento se comporta como C150 100 240 50 270 50. Sua primeira alça colapsou sobre o início. Ele ainda pode curvar porque a geometria de controle restante não é colinear; S após uma linha não força um segmento reto.

Nossa verificação no navegador comparou o traçado S refletido com seu equivalente C explícito, depois comparou este exemplo de linha seguida de S com sua própria expansão explícita. Ambas as comparações coincidiram nas posições amostradas. Isso confirma estes exemplos, enquanto a especificação define a regra geral.

Faça a mesma correção em um editor de nós

Trabalhe em uma cópia, selecione o traçado e exponha as alças ao redor da junção suspeita. Confirme que há uma âncora compartilhada. Dois pontos finais separados que apenas se sobrepõem podem precisar de uma correção de topologia antes de mudar as direções das alças.

No Inkscape, o guia de tipos de nós distingue nós suaves, cujas alças compartilham uma linha, de nós simétricos, cujas alças também mantêm comprimento igual. Use o tipo de nó adequado ao contorno em vez de forçar toda junção a ser simétrica.

Mantenha a âncora fixa enquanto ajusta a direção da alça. Depois encurte ou alongue as alças para recuperar a forma pretendida ao redor da junção. Compare o resultado em zoom alto e em tamanho normal de visualização e reabra o SVG salvo para inspecionar o traçado exportado.

Se o traçado tiver âncoras muito próximas ao longo de toda a curva, uma edição local de alça pode não bastar. O guia de quantidade de nós SVG aborda simplificação, enquanto o fluxo de edição SVG aborda mudanças mais amplas. Preserve cantos intencionais em qualquer uma dessas operações.

Compare a forma corrigida com sua origem

Uma junção suave é uma verificação de qualidade. Ela não prova que um logo traçado corresponde ao original. Compare sua silhueta, suas aberturas e seus cantos intencionais usando a lista de verificação de qualidade de traçado vetorial.

Se apenas um PNG ou JPG da marca estiver disponível, o vetorizador de logos do PerfectVector pode preparar um candidato SVG editável. Inspecione seus contornos e use uma correção local de alça onde restar uma quina indesejada. Mantenha a referência raster ao lado do traçado editado para que a suavização não apague um detalhe que você pretendia manter.

Use um original vetorial existente quando disponível. Geometria exata de marca ou uma origem muito danificada pode exigir reconstrução manual; o guia de vetorização de logos explica essa escolha. Retocar uma junção é útil quando o restante do contorno já está adequado.

Perguntas frequentes

As duas alças Bézier precisam ter o mesmo comprimento para uma junção suave? Não. Alças não nulas podem ter comprimentos diferentes e compartilhar a mesma direção tangente. Na âncora compartilhada, devem estar em uma linha, em lados opostos. Alças refletidas iguais acrescentam primeiras derivadas iguais para os dois segmentos cúbicos usados aqui.

Por que o comando SVG S muda minha curva? S infere seu primeiro ponto de controle. Após C ou S, ele reflete o último ponto de controle da cúbica anterior; após outros tipos de comando, usa o ponto atual. Esse ponto inferido pode diferir do ponto de controle explícito que você pretendia.

Devo suavizar todos os nós de um logo traçado? Não. Preserve cantos, pontas e entalhes intencionais. Corrija uma quina indesejada localmente e compare toda a silhueta com a origem. Uma junção com continuidade tangente, sozinha, não comprova uma reconstrução precisa.

Fontes

1. MDN — Traçados SVG — Explica pontos de controle cúbicos e sintaxe de comandos de traçado.
2. Michigan Tech — Derivadas Bézier — Deriva tangentes nos extremos e condições de junção de curvas.
3. W3C — Comandos Bézier cúbicos SVG — Define a regra de reflexão e o ponto de controle alternativo para S.
4. Inkscape — Tipos de nós — Distingue comportamento de nós angulares, suaves, simétricos e automáticos.

Se seu logo começa como imagem raster, prepare um candidato SVG com o PerfectVector, inspecione as junções e a silhueta e corrija apenas as curvas necessárias, preservando cantos intencionais.