Hasta el momento, en los artículos anteriores, hemos creado trayectos utilizando coordenadas absolutas, es decir, indicando coordenadas basadas en el viewbox definido del SVG.

Sin embargo, también es posible indicar coordenadas relativas, en base a la posición actual, en lugar de la posición absoluta del viewBox. Son un poco más difíciles de gestionar, pero son mucho más reutilizables y potentes.

Operaciones

Observa la siguiente tabla resumen de las operaciones explicadas en los artículos anteriores. En la primera columna está la letra a escribir para indicar una coordenada absoluta, mientras que la segunda columna está la letra a escribir para indicar una coordenada relativa. Básicamente, es utilizar la misma letra, pero en minúsculas:

Como ves, SVG permite indicar también los valores m, l, h, v, c, s, q, t, a y z, con la diferencia de que al utilizar letras mayúsculas los valores utilizados son absolutos. Sin embargo, si utilizamos letras minúsculas los valores utilizados son relativos.

Es posible crear trayectos donde mezclemos operaciones de ambos grupos, absolutos y relativos. Son compatibles y pueden mezclarse.

Coordenadas absolutas

Para ejemplificar esto, hagamos un ejemplo de base para entenderlo. Observa el siguiente ejemplo donde dibujamos lo siguiente:

• 1️⃣ Creamos un elemento de 50x50 (fíjate en el viewBox)
• 2️⃣ El trayecto comienza en el punto (5,5)
• 3️⃣ Trazamos una línea hasta el punto (45,45)
• 4️⃣ Trazamos otra línea hasta el punto (45,5)

<svg viewBox="0 0 50 50" height="300">
  <path d="M5,5 L45,45 L45,5" stroke="black" fill="none" />
</svg>

Todo esto es realizado con coordenadas absolutas, ya que están en mayúsculas. Veamos otro ejemplo, donde vamos a hacer lo mismo, pero utilizando coordenadas relativas.

Coordenadas relativas

Ejemplifiquemos ahora el mismo ejemplo anterior, pero utilizando coordenadas relativas. Haremos lo siguiente:

• 1️⃣ Creamos un elemento de 50x50 (fíjate en el viewBox)
• 2️⃣ El trayecto comienza en el punto (0,0) por defecto
• 3️⃣ Nos movemos 5 unidades a la derecha, y 5 unidades abajo.
• 4️⃣ Trazamos una línea 40 unidades a la derecha y 40 unidades hacia abajo, hasta llegar al punto (45,45).
• 5️⃣ Trazamos otra línea con -40 unidades, o sea, 40 unidades hacia arriba, hasta llegar al punto (45,5).

<svg viewBox="0 0 50 50" height="300">
  <path d="m5,5 l40,40 l0,-40" stroke="black" fill="none" />
</svg>

Como puedes ver, el resultado es el mismo, pero aunque las unidades absolutas pueden parecer más simples, dependiendo de lo que estemos haciendo puede ser más interesante utilizar las unidades relativas, con las que trabajamos respecto a la posición anterior.

En el caso de utilizar la operación con letra z o Z para cerrar un trayecto, no tienen ninguna diferencia una de la otra. Se pueden usar indistintamente.