Trayectos lineales

Uno de los recursos más potentes de SVG es la etiqueta o elemento <path> que permite crear trayectos o rutas personalizadas, desde un punto a otro. Se pueden crear todo tipo de trayectos y cualquier forma básica vista hasta ahora es capaz de ser replicada con una etiqueta <path>.

Vamos a dividir los trayectos <path> en dos grupos: trayectos lineales y trayectos en curva. Vamos a aprender primero las bases de los primeros y más adelante profundizaremos en las curvas.

El elemento <path>

El elemento <path> es la etiqueta que utilizaremos para crear estos trayectos. Su atributo d es el atributo más importante, donde se establecen las coordenadas del trayecto. Sin embargo, tenemos otros atributos que iremos descubriendo poco a poco:

Recuerda que prácticamente todas las formas básicas que hemos visto se pueden representar con un path específicamente definido.

El atributo d es un atributo de estilo y también puede usarse desde CSS, en lugar desde el HTML, e incluso animarse.

Operaciones de trayectos

En el atributo d de un elemento <path> se indican diferentes operaciones a realizar, una detrás de otra. El tipo de operación se define con una letra, y sus parámetros definen su comportamiento. Luego, se puede separar con un espacio y se vuelve a añadir una letra (otra operación) con sus parámetros, y así sucesivamente hasta terminar.

Estas son las operaciones de trayecto lineal que se pueden realizar:

Existen más operaciones relativas a los trayectos en forma de curva. Las veremos y profundizaremos en ellas en el próximo artículo. Primero, es conveniente entender las lineales.

Trayectos lineales (L)

Así pues, vamos a realizar una operación de ejemplo con M 0,0 L 50,50 L 100,0 Z:

• M 0,0 Establece la posición (0,0) como las coordenadas actuales.
• L 50,50 Dibuja una línea recta desde la posición actual 0,0 hasta 50,50.
• L 100,0 Dibuja una línea recta desde la posición actual 50,50 hasta 100,0.
• Z Cierra el trayecto, es decir, une la posición actual 100,0 con el punto de inicio 0,0.

Esto traducido a código SVG sería lo siguiente:

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <path d="M 0,0 L 50,50 L 100,0 Z" fill="deeppink" stroke="indigo" />
</svg>

En realidad, los espacios son opcionales y los hemos indicado por claridad. Podríamos eliminarlos y seguiría funcionando y siendo correcto. Ahora no es importante, pero en trayectos más complejos se ahorra espacio, tamaño del SVG, y tiempo de descarga:

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <path d="M0,0L50,50L100,0Z" fill="deeppink" stroke="indigo" />
</svg>

Cuando tenemos varias operaciones con la misma letra consecutivamente, también podemos ahorrarnos la letra (se asume que añadimos nuevos parámetros para volver a hacer una nueva operación del mismo tipo), pero eso sí, cada operación debe ser separada entonces con un espacio:

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <path d="M0,0L50,50 100,0Z" fill="deeppink" stroke="indigo" />
</svg>

Por otro lado, en el siguiente ejemplo, creamos una «escalera», ya que vamos utilizando H y V para movernos en horizontal y vertical respectivamente:

• M0,0 nos movemos al punto (0,0).
• V10 dibujamos una línea vertical hasta el punto (0,10).
• H10 dibujamos una línea horizontal hasta el punto (10,10).
• V20 dibujamos una línea vertical hasta el punto (10,20).
• H20 dibujamos una línea horizontal hasta el punto (20,20).
• Así, sucesivamente, hasta cerrar con Z.

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <path d="M0,0V10H10V20H20V30H30V40H40V50H50V0Z" fill="deeppink" stroke="indigo" />
</svg>

Veamos ahora como realizar trayectos con curvas, mediante las siguientes operaciones.