Curvas Bézier SVG: corrige un quiebro sin añadir nodos

Para eliminar un quiebro involuntario donde se unen dos segmentos Bézier cúbicos normales, mantén fijo su punto de anclaje compartido y alinea los tiradores adyacentes sobre una recta, en lados opuestos del anclaje. Sus longitudes pueden diferir y las curvas seguir compartiendo una dirección tangente. Los tiradores reflejados iguales imponen una condición adicional; no son necesarios para todas las uniones visualmente suaves.

Inspecciona la forma original antes de hacer ese cambio. La punta de una hoja, una muesca o una esquina de letra pueden ser deliberadas. La reparación siguiente corrige un cambio de dirección no deseado, manteniendo fijos inicio, unión, final y número de segmentos.

Encuentra los dos tiradores que controlan la unión

Un comando cúbico SVG tiene dos puntos de control y un extremo:

C firstControlX firstControlY secondControlX secondControlY endX endY

El segmento empieza en el punto actual. Su primer punto de control guía la dirección al salir del inicio; el segundo guía la aproximación al extremo. El tutorial de trazados de MDN ilustra esos puntos de control y la sintaxis cúbica. Para pares de coordenadas con comandos en minúsculas, sigue los comandos de trazado relativos SVG para seguir el punto de referencia antes de cambiar tiradores.

En un anclaje compartido, inspecciona el último punto de control del segmento anterior y el primero del siguiente. Si esos tiradores apuntan según líneas diferentes, la unión cambia de dirección. Añadir otro nodo cerca no resuelve por sí solo esa relación.

Repara el ejemplo original de dos segmentos

Guarda este SVG completo como join-example.svg y ábrelo en un navegador. Es una marca curva original con un quiebro deliberado en (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>

El punto de control entrante es (100, 100), directamente a la izquierda de la unión. El saliente es (170, 50), arriba y a la derecha. La curva llega horizontalmente y sale en otra dirección.

Cambia solo el primer punto de control del segundo segmento a (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"/>

Ambos tiradores adyacentes están ahora sobre la horizontal que pasa por la unión. El tirador entrante mide 50 unidades y el saliente 25. La dirección tangente coincide aunque las longitudes sean diferentes.

Para una pareja reflejada, cambia ese punto de control a (200, 100). Ambos tiradores se extenderán entonces 50 unidades desde el anclaje compartido. Esto cambia la forma del segundo segmento más que la edición de tiradores desiguales, así que compara ambas con el contorno que quieres conservar.

Cada versión tiene dos segmentos cúbicos y tres anclajes sobre la curva: inicio, unión y final. Los puntos de control son coordenadas independientes. La comparación es un renderizado original de navegador, no un resultado vectorizado de PerfectVector ni una captura de la herramienta de nodos de un editor.

Comprueba la dirección por separado de la longitud del tirador

Para una cúbica que termina en la unión J con último punto de control A, la derivada en el extremo es 3 × (J − A). La siguiente cúbica, que empieza en J con primer punto de control B, tiene derivada inicial 3 × (B − J).

En nuestro ejemplo, la derivada entrante es (150, 0) en todos los paneles:

La coincidencia de direcciones tangentes se llama continuidad G1. La coincidencia de primeras derivadas es continuidad C1, usando el intervalo habitual de parámetro de cero a uno para cada una de estas dos cúbicas. Las notas de derivadas Bézier de Michigan Tech deducen estas condiciones de extremo.

La prueba de dirección supone derivadas de extremo distintas de cero. Un tirador colapsado sobre su anclaje necesita una comprobación separada porque su primera derivada es cero. Además, la colinealidad sola no basta si ambos tiradores están en el mismo lado de la unión: la dirección de recorrido puede invertirse.

Ninguno de los ejemplos alineados promete que la curvatura coincida a través de la unión. Una curva puede no tener un cambio abrupto de dirección tangente y aun así necesitar ajustes para coincidir con la silueta prevista del logotipo. Inspecciona toda la curva, no solo el nodo seleccionado.

Usa S solo cuando el reflejo sea la forma que quieres

La versión reflejada puede escribirse de forma más compacta:

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

Aquí S deduce el primer punto de control reflejando el último punto de control de la cúbica anterior alrededor del punto actual:

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

Los pares restantes de S240 50 270 50 especifican el segundo punto de control y el extremo. Esta es la versión de tiradores reflejados 50/50. No puede sustituir a la versión 50/25 sin cambiar la curva.

La especificación de comandos cúbicos SVG limita esa regla de reflejo a un comando anterior C, c, S o s. Si el comando anterior es una línea o una curva cuadrática, el primer punto de control implícito es el propio punto actual.

Por ejemplo:

M30 150 L150 100 S240 50 270 50

Después de la línea, ese último segmento se comporta como C150 100 240 50 270 50. Su primer tirador está colapsado sobre el inicio. Aun así puede curvarse porque la geometría de control restante no es colineal; S después de una línea no fuerza un segmento recto.

Nuestra comprobación de navegador comparó el trazado S reflejado con su equivalente C explícito y después comparó este ejemplo de línea seguida de S con su propia expansión explícita. Ambas comparaciones coincidieron en las posiciones muestreadas. Eso confirma estos ejemplos, mientras que la especificación define la regla general.

Haz la misma reparación en un editor de nodos

Trabaja sobre una copia, selecciona el trazado y muestra los tiradores alrededor de la unión sospechosa. Confirma que hay un anclaje compartido. Dos extremos independientes que simplemente se superponen pueden necesitar una reparación de topología antes de cambiar las direcciones de tiradores.

En Inkscape, la guía de tipos de nodo distingue nodos suaves, cuyos tiradores comparten una recta, de nodos simétricos, cuyos tiradores además mantienen igual longitud. Usa el tipo de nodo adecuado al contorno en lugar de forzar todas las uniones a ser simétricas.

Mantén el anclaje fijo al ajustar la dirección del tirador. Acorta o alarga después los tiradores para recuperar la forma prevista alrededor de la unión. Compara el resultado tanto con gran ampliación como al tamaño normal de visualización y vuelve a abrir el SVG guardado para inspeccionar el trazado exportado.

Si el trazado contiene anclajes amontonados por toda la curva, una edición local de tiradores puede no bastar. La guía de cantidad de nodos SVG cubre la simplificación y el flujo de edición SVG, cambios más amplios. Conserva las esquinas intencionadas en cualquiera de las operaciones.

Compara la forma reparada con su original

Una unión suave es una comprobación de calidad. No demuestra que un logotipo vectorizado coincida con el original. Compara su silueta, aberturas y esquinas deliberadas usando la lista de calidad de vectorización.

Si solo hay un PNG o JPG de la marca, el vectorizador de logotipos de PerfectVector puede preparar una primera versión SVG editable. Inspecciona sus contornos y usa después una reparación local de tiradores donde quede un quiebro no deseado. Mantén la referencia rasterizada junto al trazado editado para que el suavizado no borre un elemento que querías conservar.

Usa un archivo maestro vectorial existente cuando esté disponible. Una geometría de marca exacta o un original muy dañado pueden necesitar reconstrucción manual; la guía de vectorización de logotipos explica esa elección. Retocar una unión es útil cuando el resto del contorno ya es adecuado.

Preguntas frecuentes

¿Ambos tiradores Bézier necesitan la misma longitud para una unión suave? No. Los tiradores distintos de cero pueden tener longitudes diferentes y compartir la dirección tangente. En el anclaje compartido deben estar sobre una recta, en lados opuestos. Los tiradores reflejados iguales añaden primeras derivadas coincidentes para los dos segmentos cúbicos usados aquí.

¿Por qué el comando SVG S cambia mi curva? S deduce su primer punto de control. Después de C o S refleja el último punto de control de la cúbica anterior; después de otros tipos de comando usa el punto actual. Ese punto deducido puede diferir del punto explícito que pretendías.

¿Debo suavizar todos los nodos de un logotipo vectorizado? No. Conserva esquinas, puntas y muescas intencionadas. Repara localmente un quiebro involuntario y compara después toda la silueta con el original. Una unión con continuidad tangente por sí sola no demuestra una reconstrucción precisa.

Fuentes

1. MDN — trazados SVG — Explica puntos de control cúbicos y sintaxis de comandos de trazado.
2. Michigan Tech — derivadas Bézier — Deduce tangentes de extremo y condiciones de unión de curvas.
3. W3C — comandos Bézier cúbicos SVG — Define la regla de reflejo y el punto de control alternativo de S.
4. Inkscape — tipos de nodo — Distingue el comportamiento de nodos de esquina, suaves, simétricos y automáticos.

Si tu logotipo empieza como imagen rasterizada, prepara una primera versión SVG con PerfectVector, inspecciona uniones y silueta y repara solo las curvas que lo necesiten, conservando las esquinas deliberadas.