Comandos relativos de trazado SVG: sigue el punto actual

Los comandos absolutos de trazado SVG, como M, L y C, utilizan posiciones en el sistema de coordenadas de usuario actual. Sus formas relativas, m, l y c, utilizan desplazamientos desde el punto actual. Para leer o reescribir un trazado, sigue ese punto después de cada segmento. Cambiar la letra de un comando sin cambiar sus números puede cambiar la forma.

Dos reglas causan gran parte de la confusión: el primer par de un m inicial actúa como un movimiento absoluto, mientras que los pares adicionales son líneas relativas; y Z o z cierra un subtrazado y restablece el punto actual a su inicio. Un nuevo movimiento relativo después de ese cierre utiliza el punto restablecido.

Lee posiciones y desplazamientos por separado

La especificación de trazados del W3C define un trazado mediante su punto actual, sus subtrazados y sus comandos de dibujo. Las coordenadas son unidades de usuario SVG, no necesariamente píxeles de pantalla. Un viewBox o una transformación puede llevarlas a otra posición visible.

Partiendo de (40, 40), estos dos comandos describen la misma línea:

L180 40
l140 0

El primero especifica el punto final (180, 40). El segundo suma (140, 0) a (40, 40). Ambos terminan en (180, 40), que se convierte en el punto actual para el siguiente segmento.

En cambio, l180 40 suma (180, 40) y termina en (220, 80). El comando tiene sintaxis válida, pero dibuja otra línea.

Z en mayúscula y minúscula tiene el mismo efecto: no recibe argumentos de coordenadas. La referencia de d de MDN enumera los comandos y sus parámetros individuales.

Compara dos descripciones de la misma ilustración original

Guarda este SVG completo como absolute.svg y ábrelo en un navegador. Contiene un emblema compuesto verde azulado con un hueco cuadrado y una curva cúbica coral separada:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

Para relative.svg, conserva el tamaño, el viewBox y los estilos del SVG, pero sustituye los dos elementos de trazado por estos:

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

Renderizamos ambos archivos originales en un navegador junto a una copia deliberadamente incorrecta del emblema absoluto. La copia incorrecta cambia solo su primer L180 40 por l180 40; los números permanecen iguales.

Nuestra página utilizó las funciones SVG nativas getTotalLength() y getPointAtLength() para comparar 301 muestras por trazado en fracciones correspondientes de la longitud total. Las longitudes mostradas fueron 657.082 unidades de usuario para cada emblema y 189.066 para cada curva. La diferencia máxima entre puntos muestreados se mostró como 0.000000 para ambos pares.

Esa medición corrobora estas cadenas concretas, cuyos vértices de línea y puntos cúbicos también coinciden según los cálculos siguientes. No demuestra que cualquier reescritura o conversor gestione todos los comandos SVG. La comparación utiliza en todo momento la misma área de visualización sin transformar y los mismos ajustes de pintura.

Sigue el primer m y sus líneas implícitas

Nuestro emblema empieza con:

m40 40 140 0 30 40 -30 60 -140 0z

Solo el primer par realiza un movimiento. Los pares restantes se comportan como segmentos l relativos implícitos. La definición de moveto mantiene explícitamente relativos esos pares posteriores aunque el m40 40 inicial se trate como un inicio absoluto.

Sigue un par cada vez:

En comparación, un M mayúsculo con varios pares convertiría sus pares posteriores en segmentos L absolutos implícitos. No trataría cada par como otro movimiento ni utilizaría los mismos desplazamientos de este ejemplo en minúscula.

Un elemento de trazado establece su propia secuencia. No inicies su m relativo inicial desde el punto final de otro elemento de trazado anterior que no esté relacionado.

Usa el inicio del subtrazado cerrado para el siguiente movimiento

El hueco empieza después del primer z:

m40 30 0 40 40 0 0 -40z

En ese momento el punto actual es (40, 40), así que el nuevo movimiento relativo suma (40, 30) e inicia el hueco en (80, 70). Sus líneas implícitas llegan después a (80, 110), (120, 110) y (120, 70) antes de cerrar.

Si utilizaras por error el punto final de la última línea del emblema exterior, (40, 140), como referencia, colocarías ese movimiento en (80, 170). El cierre anterior es lo que hace incorrecto ese cálculo. La definición de closepath restablece el punto actual al punto inicial del subtrazado actual.

Ambos subtrazados pertenecen a un único elemento de trazado. Su fill-rule="evenodd" convierte el cuadrado interior en una abertura en este ejemplo. Mantén estables la regla de relleno y los ajustes de pintura al comparar reescrituras de coordenadas, para que un cambio de relleno no oculte la geometría que pruebas.

Mide cada control cúbico desde el mismo punto inicial

La curva separada empieza en (40, 190):

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

Para este único segmento c en minúscula, los tres pares son desplazamientos desde (40, 190). El segundo control no se mide desde el primero y el punto final no se mide desde el segundo.

Después del segmento, actualiza el punto actual a su punto final (220, 180). Un segmento relativo posterior utilizaría ese nuevo inicio. El tutorial de trazados de MDN explica los controles cúbicos y las formas absolutas y relativas; la guía de uniones Bézier explica por separado los manejadores tangentes y el comando abreviado S.

No generalices la resta de coordenadas a todos los números de todos los comandos. En un arco, los radios, la rotación y los indicadores tienen funciones diferentes; solo el par del punto final cambia entre posiciones absolutas y relativas. Consulta la explicación de los indicadores de arco antes de reescribir datos A o a. Este ejemplo demuestra líneas, movimientos, cierre y un segmento cúbico ordinario, no una rutina general de conversión de trazados.

Mueve la ilustración sin confundir la colocación con la sintaxis del trazado

Para este emblema compuesto completamente relativo, cambiar su m40 40 inicial a m60 60 desplaza sus vértices en (20, 20): los desplazamientos posteriores y el movimiento relativo del subtrazado siguen ese inicio cambiado. Deja intacto el trazado de curva separado. En datos mixtos, las posiciones absolutas posteriores siguen ancladas a sus coordenadas especificadas, así que editar el primer movimiento puede deformar el trazado.

Para mover toda la ilustración de dos trazados como una unidad, conserva ambas cadenas d y coloca sus elementos dentro de un grupo con transform="translate(20 20)". La especificación de sistemas de coordenadas SVG explica cómo las transformaciones establecen correspondencias de coordenadas. Una transformación de grupo cambia la colocación sin reescribir los datos originales de trazado.

Comprueba que el área de visualización siga conteniendo la ilustración movida; trasladar un grupo no amplía automáticamente su lienzo. La guía del orden de transformaciones SVG explica la colocación cuando se combinan traslación y escala.

Inspecciona la geometría original antes de cambiar su notación

PerfectVector puede ayudar cuando la ilustración solo existe como PNG o JPG. Prepara un SVG candidato y compara después la silueta, los huecos y la forma de las curvas recuperados con el original antes de editar sus datos de trazado. La notación absoluta o relativa no demuestra si la geometría recuperada es adecuada.

Usa directamente un maestro vectorial disponible o redibuja un símbolo sencillo cuando resulte más fácil de controlar. Reescribir comandos no puede recuperar la forma prevista a partir de información ráster que falta. La introducción a la vectorización de imágenes explica ese paso de reconstrucción separado.

Al editar un SVG utilizable, conserva una copia del original, cambia un segmento compatible cada vez y compara el archivo real a la misma escala. Sigue tanto el inicio del subtrazado como el punto actual. Conserva los ajustes de relleno y trazo durante la comparación y prueba después el archivo exportado en su aplicación receptora.

Preguntas frecuentes

¿El primer m minúsculo es relativo a otro trazado? No. Cuando m es el primer comando de un trazado, su primer par se trata como un inicio absoluto. Los pares adicionales son líneas relativas implícitas, y el punto final de otro elemento de trazado no es su referencia inicial.

¿Dónde está el punto actual después de Z o z? En el inicio del subtrazado que acaba de cerrarse. Un movimiento relativo posterior utiliza ese punto restablecido, no el punto final de la línea anterior.

¿Puedo convertir un trazado pasando sus comandos a minúsculas? No. Los valores de posición deben recalcularse según la semántica de cada comando. En este ejemplo, L180 40 se convierte en l140 0 desde el punto actual (40, 40), mientras que l180 40 dibuja otra línea.

Fuentes

1. W3C — Trazados SVG 2 — Define puntos actuales, moveto inicial, líneas implícitas, cierre y parámetros cúbicos.
2. MDN — Tutorial de trazados — Ilustra comandos absolutos y relativos de líneas y curvas.
3. MDN — Atributo d — Enumera las funciones de los parámetros de comandos, incluidos arcos y closepath.
4. W3C — Sistemas de coordenadas SVG 2 — Explica correspondencias de coordenadas de usuario y colocación de ilustraciones mediante transformaciones.

¿Empiezas con una ilustración que solo existe como ráster? Prepara trazados SVG con PerfectVector, inspecciona la silueta y las aberturas recuperadas, edita después solo los comandos que entiendas y verifica el SVG entregado comparándolo con el original.