Indicadores de arco SVG: dibuja la curva correcta con comandos A

Los dos indicadores de un comando SVG A eligen qué arco conecta sus puntos inicial y final. Establece large-arc-flag en 0 para el recorrido corto o en 1 para el largo. Establece sweep-flag en 0 o 1 para elegir la dirección alrededor de la elipse. Mantén fijos extremos y radios, cambia solo esos dos dígitos y podrás ver las cuatro posibilidades. La especificación de trazados SVG 2 define esta elección entre cuatro arcos.

Esto resulta útil cuando un borde curvo de logotipo, un anillo de insignia o un adorno de interfaz se curva hacia el lado equivocado tras editar el código. Si el original es un PNG, la vectorización puede proporcionar primero formas editables; el comando A es una edición geométrica deliberada e independiente.

Lee los siete valores después de A

Un comando de arco absoluto tiene este orden:

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

rx y ry son los radios de la elipse. x-axis-rotation gira esa elipse en el sistema actual de coordenadas. Cada indicador vale 0 o 1. Por último, x y es el extremo final. El inicio es el punto actual dejado por el comando anterior, a menudo M x y. La a minúscula usa un extremo relativo en lugar de absoluto; el tutorial de trazados de MDN explica las formas de comandos.

Por ejemplo, M70 370 A140 110 0 0 1 280 420 empieza en (70, 370), usa radios de 140 y 110, deja la elipse sin girar, elige el recorrido corto con sweep 1 y termina en (280, 420). Los números están en el sistema de coordenadas de usuario del SVG. No prometen automáticamente un tamaño físico de impresión.

Observa los cuatro arcos posibles

Renderizamos este ejemplo original desde un archivo SVG. Cada panel usa el mismo inicio (70, 370), final (280, 420), radios 140 110 y rotación 0. Solo cambian los indicadores. Naranja marca el inicio y verde el final. Es una representación de nuestros propios comandos de trazado al estilo de un navegador, no un resultado de conversión de PerfectVector.

Las etiquetas «arriba» y «abajo» describen este inicio, final y disposición de coordenadas. No son significados universales de 0 y 1. Otra posición de extremos o un grupo transformado pueden mover el arco visible a otra parte. El indicador sweep selecciona la dirección de aumento o disminución del ángulo a lo largo de la elipse elegida; en un viewBox SVG típico con eje y hacia abajo, sweep 1 suele verse en sentido horario. El editor interactivo de arcos de SVG Tutorial es útil para observar el cambio de dirección manteniendo fijas las demás entradas.

Para reproducir un panel, guarda esto como arc.svg y ábrelo en un 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>

Cambia solo los dos dígitos después de la rotación 0, usando la tabla anterior. Si cambias también un radio o extremo, ya no podrás saber qué edición cambió el recorrido.

Corrige una curva que tomó el lado equivocado

1. Localiza el segmento. En el valor d del trazado, identifica el punto inicial anterior, el comando A y su extremo. Un trazado puede contener varios arcos; edita solo el incorrecto.
2. Comprueba la decisión entre largo y corto. Si una curva pequeña de pronto rodea gran parte de la elipse, cambia large-arc-flag de 1 a 0. Si un segmento de anillo previsto se reduce a una conexión corta, prueba 1.
3. Comprueba el lado o sentido de recorrido. Mantén todo lo demás fijo y alterna sweep-flag. Esto suele mover el arco al otro lado de la cuerda entre los extremos.
4. Inspecciona toda la ilustración. Un segmento corregido puede seguir uniéndose al vecino con un ángulo incómodo o sobresalir del viewBox. Vuelve a abrir el archivo al tamaño previsto y ajusta la geometría adyacente o el lienzo según sea necesario.

Si ninguna pareja coincide con la silueta deseada, probablemente el problema no sea un indicador. Los radios y extremos determinan las elipses candidatas; los indicadores solo eligen entre ellas. La guía de arcos de NaN ilustra cómo cambiar un radio o extremo cambia la elipse subyacente.

Límites de rotación y radios

x-axis-rotation importa cuando rx y ry difieren: gira la elipse antes de elegir el arco. Con radios iguales, girar un círculo no cambia su contorno. Para un logotipo con un borde ovalado inclinado, prueba primero los radios y la rotación previstos y después elige los indicadores. De lo contrario, puedes elegir el lado correcto de la elipse equivocada.

Las notas de implementación SVG 2 definen casos especiales. Si un radio es cero, el segmento se trata como línea recta. Si los radios son demasiado pequeños para conectar los extremos, el renderizador los aumenta lo necesario para hacer posible el arco. Si inicio y final son idénticos, el arco se omite. Estas reglas explican por qué cambiar un indicador a veces parece no hacer nada. También significan que una representación por sí sola puede no demostrar que se usaron sin corrección los radios escritos.

Usa una curva vectorizada como punto de partida, no como fórmula de arco

Un logotipo rasterizado puede mostrar un borde circular limpio, pero el SVG recuperado puede describirlo mediante segmentos Bézier y anclajes en lugar de un comando A explícito. Un vectorizador reconstruye formas visibles; no necesariamente deduce el centro de círculo, radios o indicadores originales del diseñador. Si existe el archivo maestro vectorial, edítalo en lugar de volver a vectorizar.

Cuando solo existe un PNG o JPG, convierte la imagen en trazados vectoriales editables con PerfectVector, inspecciona el contorno recuperado y decide si necesita un redibujo geométrico preciso. Para un anillo de insignia, mide el centro y radios previstos en un editor vectorial y sustituye solo esa sección curva si importa la coherencia geométrica. Conserva la vectorización aprobada para ilustraciones irregulares que una elipse exacta distorsionaría. Nuestra guía de edición SVG cubre la elección entre editor visual y edición puntual de código; la guía de limpieza de nodos ayuda cuando una curva vectorizada es difícil de remodelar.

Esta división de trabajo importa: PerfectVector puede recuperar un original rasterizado como trazados, mientras que establecer parámetros exactos de arco y comprobar uniones sigue siendo una decisión de diseño. No conviertas un SVG ya limpio en PNG para volver a vectorizarlo solo por cambiar un indicador.

Antes de entregar el SVG

• Conserva una copia del original o del archivo maestro vectorizado aprobado.
• Confirma punto inicial, extremo final, radios, rotación y los dos indicadores en ese orden.
• Compara el recorrido elegido tanto de cerca como al tamaño real de uso.
• Inspecciona las uniones y si el recorrido largo cruza el borde del viewBox.
• Vuelve a abrir el SVG entregado en el editor o navegador de destino. Una captura visualmente correcta no demuestra que el receptor pueda editar el trazado como se pretende.

Preguntas frecuentes

¿Qué significan los indicadores large-arc y sweep en SVG? El indicador large-arc selecciona el arco candidato corto o largo entre dos extremos. El indicador sweep selecciona en qué dirección recorre el segmento la elipse. Juntos eligen entre cuatro candidatos cuando la geometría no es degenerada.

¿Por qué cambiar large-arc no tiene efecto visible? Comprueba si los extremos son puntos opuestos de la elipse, haciendo que ambos recorridos sean medias vueltas. Comprueba también extremos idénticos, un radio cero o radios ajustados por el renderizador para conectar los puntos. Cambia un parámetro cada vez y compara el trazado renderizado.

¿Puede la vectorización recuperar automáticamente mi comando de arco original? No lo supongas. Un vectorizador puede recuperar formas editables de una ilustración rasterizada, pero el resultado puede usar curvas Bézier o muchos anclajes. Reconstruye un círculo o elipse precisos en un editor vectorial cuando se necesite la geometría original.

Fuentes

1. W3C — trazados SVG 2 — Sintaxis de arcos, combinaciones de indicadores y geometría de trazados.
2. W3C — notas de implementación SVG 2 — Corrección de radios y tratamiento de arcos degenerados.
3. MDN — trazados SVG — Comandos absolutos y relativos y tutorial de arcos.
4. SVG Tutorial — arco — Demostraciones interactivas de radios, rotación e indicadores.
5. NaN — comandos de trazado SVG: arcos — Explicación interactiva de ajuste de elipses y resultados de indicadores.

¿Necesitas un original editable antes de dar forma a un emblema rasterizado? Convierte la imagen en trazados vectoriales, inspecciona el resultado y redibuja los arcos cuyo radio o sentido de recorrido exactos sean importantes.