Indicadores de arco SVG: a curva certa com A

Os dois indicadores em um comando SVG A escolhem qual arco conecta seus pontos inicial e final. Defina large-arc-flag como 0 para o percurso mais curto ou 1 para o mais longo. Defina sweep-flag como 0 ou 1 para escolher a direção ao redor da elipse. Mantenha pontos extremos e raios fixos, mude apenas esses dois dígitos e veja as quatro possibilidades. A especificação de traçados SVG 2 define essa escolha de quatro arcos.

Isso é útil quando uma borda curva de logo, um anel de emblema ou um ornamento de interface se curva para o lado errado após uma edição de código. Se a origem for PNG, a vetorização pode fornecer formas editáveis primeiro; o comando A é uma edição geométrica separada e deliberada.

Leia os sete valores após A

Um comando de arco absoluto tem esta ordem:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx e ry são os raios da elipse. x-axis-rotation gira essa elipse no sistema atual de coordenadas. Cada indicador é 0 ou 1. Por fim, x y é o ponto final. O início é o ponto atual deixado pelo comando anterior, frequentemente M x y. a minúsculo usa um ponto final relativo em vez de absoluto; o tutorial de traçados do MDN explica as formas dos comandos.

Por exemplo, M70 370 A140 110 0 0 1 280 420 começa em (70, 370), usa raios 140 e 110, deixa a elipse sem rotação, escolhe o percurso mais curto com sweep 1 e termina em (280, 420). Os números estão no sistema de coordenadas de usuário do SVG. Não são automaticamente uma promessa de tamanho físico de impressão.

Veja os quatro arcos possíveis

Renderizamos este exemplo original de um arquivo SVG. Cada painel usa o mesmo início (70, 370), final (280, 420), raios 140 110 e rotação 0. Apenas os indicadores mudam. Laranja marca o início e verde marca o final. Esta é uma renderização no estilo de navegador de nossos próprios comandos de traçado, não uma saída de conversão do PerfectVector.

Os rótulos “acima” e “abaixo” descrevem estes pontos inicial e final e esta organização de coordenadas. Não são significados universais de 0 e 1. Outro posicionamento dos pontos extremos ou um grupo transformado pode mover o arco visível para outro lugar. O indicador sweep seleciona a direção de aumento ou redução do ângulo ao longo da elipse escolhida; em um viewBox SVG típico com o eixo y apontando para baixo, sweep 1 costuma parecer horário. O editor interativo de arcos do SVG Tutorial é útil para observar a direção mudar mantendo as outras entradas fixas.

Para reproduzir um painel, salve isto como arc.svg e abra-o em um navegador:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Mude apenas os dois dígitos após a rotação 0, usando a tabela acima. Se você mudar um raio ou ponto final ao mesmo tempo, não conseguirá mais dizer qual edição mudou o percurso.

Corrija uma curva que foi para o lado errado

1. Localize o segmento. No valor d do traçado, identifique o ponto inicial anterior, o comando A e seu ponto final. Um traçado pode conter vários segmentos de arco; edite apenas o errado.
2. Confira a decisão de longo versus curto. Se uma pequena curva de repente contornar quase toda a elipse, mude large-arc-flag de 1 para 0. Se um segmento planejado de anel virar uma conexão curta, tente 1.
3. Confira o lado ou a direção de percurso. Mantenha todo o resto fixo e alterne sweep-flag. Isso frequentemente move o arco para o outro lado da corda entre os pontos extremos.
4. Inspecione toda a arte. Um segmento corrigido ainda pode encontrar o vizinho em um ângulo estranho ou se estender para fora do viewBox. Reabra o arquivo no tamanho pretendido de exibição e ajuste a geometria adjacente ou a área de desenho conforme necessário.

Se nenhum par de indicadores corresponder à silhueta desejada, o problema provavelmente não é um indicador. Os raios e os pontos extremos determinam as elipses candidatas; os indicadores apenas selecionam entre elas. O guia de arcos do NaN ilustra como mudar um raio ou ponto final muda a elipse subjacente.

Rotação e limites dos raios

x-axis-rotation importa quando rx e ry diferem: ela gira a elipse antes da escolha do arco. Com raios iguais, girar um círculo não muda seu contorno. Para um logo com uma borda oval inclinada, tente primeiro os raios e a rotação pretendidos e depois escolha os indicadores. Caso contrário, você pode escolher o lado certo da elipse errada.

As notas de implementação SVG 2 definem casos especiais. Se qualquer raio for zero, o segmento é tratado como uma linha reta. Se os raios forem pequenos demais para conectar os pontos extremos, o renderizador os aumenta o suficiente para tornar o arco possível. Se início e final forem idênticos, o segmento de arco é omitido. Essas regras explicam por que uma mudança de indicador às vezes parece não fazer nada. Também significam que uma renderização, sozinha, pode não provar que os raios digitados foram realmente usados sem correção.

Use uma curva traçada como ponto de partida, não como fórmula de arco

Um logo raster pode mostrar uma borda circular limpa, mas o SVG recuperado pode descrevê-la com segmentos Bézier e âncoras em vez de um comando A explícito. Um vetorizador de imagens reconstrói formas visíveis; não necessariamente infere o centro do círculo, os raios ou os indicadores de arco originais do designer. Se o original vetorial existir, edite esse arquivo em vez de traçá-lo novamente.

Quando apenas um PNG ou JPG existir, transforme a imagem em traçados vetoriais editáveis com o PerfectVector, inspecione o contorno recuperado e decida se ele precisa de um redesenho geométrico preciso. Para um anel de emblema, meça o centro e os raios pretendidos em um editor vetorial e substitua apenas essa seção curva se geometria consistente importar. Mantenha o traçado aprovado para arte irregular que uma elipse exata distorceria. Nosso guia de edição SVG aborda a escolha de um editor visual ou uma edição precisa de código; o guia de limpeza de nós ajuda quando uma curva traçada é difícil de remodelar.

Essa divisão de trabalho importa: o PerfectVector pode ajudar a recuperar uma origem apenas raster como traçados, enquanto definir parâmetros exatos de arco e conferir junções continua sendo uma decisão de design. Não converta um SVG já limpo em PNG e o trace novamente apenas para mudar um indicador.

Antes de entregar o SVG

• Guarde uma cópia do original ou do original traçado aprovado.
• Confirme ponto inicial, ponto final, raios, rotação e os dois valores dos indicadores nessa ordem.
• Compare o percurso escolhido em zoom próximo e no tamanho real de uso.
• Inspecione as junções e se o percurso longo cruza a borda do viewBox.
• Reabra o SVG entregue no editor ou navegador de destino. Uma captura visualmente correta não prova que o destinatário possa editar o traçado como pretendido.

Perguntas frequentes

O que os indicadores large-arc e sweep significam em SVG? O indicador large-arc seleciona o arco candidato mais curto ou mais longo entre dois pontos extremos. O indicador sweep seleciona a direção do segmento ao redor da elipse. Juntos, escolhem entre quatro candidatos quando a geometria não é degenerada.

Por que mudar o indicador SVG large-arc não tem efeito visível? Confira se os pontos extremos são pontos opostos da elipse, tornando ambos os percursos meias-voltas. Confira também pontos extremos idênticos, raio zero ou raios que o renderizador ajustou para conectar os pontos. Mude um parâmetro por vez e compare o traçado renderizado.

A vetorização de imagens pode recuperar automaticamente meu comando de arco original? Não presuma isso. Um vetorizador pode recuperar formas vetoriais editáveis de arte raster, mas o resultado pode usar curvas Bézier ou muitas âncoras. Reconstrua um círculo ou elipse preciso em um editor vetorial quando a geometria original for necessária.

Fontes

1. W3C — Traçados SVG 2 — Sintaxe de arco, combinações de indicadores e geometria de traçados.
2. W3C — Notas de implementação SVG 2 — Correção de raios e tratamento de arcos degenerados.
3. MDN — Traçados SVG — Comandos absolutos e relativos de traçado e tutorial de arcos.
4. SVG Tutorial — Arco — Demonstrações interativas de raios, rotação e indicadores.
5. NaN — Comandos de traçado SVG: arcos — Explicação interativa do ajuste de elipses e resultados dos indicadores.

Precisa de uma origem editável antes de moldar um emblema apenas raster? Converta a imagem em traçados vetoriais, inspecione o resultado e redesenhe qualquer arco cujo raio ou sentido exato seja importante.