CodeForge

Maquetación Web Dinámica / SVG: dibujar y animar vectores

<path> y el atributo d: curvas sin pánico

Teoría22 min20 XP

<path d="M12 2L2 22h20z"/> — así se ve el 90% de los iconos que usarás en tu carrera. Parece un jeroglífico, y por eso mucha gente le tiene miedo y nunca lo edita. Hoy le pierdes el miedo: el atributo d es solo una lista de instrucciones para un lápiz, y son media docena de letras.

El path es un lápiz que obedece órdenes

Los comandos, de fácil a poderoso

comandos.html
<!-- M: mueve el lápiz (sin dibujar). L: línea recta hasta un punto -->
<path d="M 20 20 L 80 20 L 80 80 Z" fill="none" stroke="#6d28d9" stroke-width="3"/>
<!-- Z cierra: une el punto actual con el inicial. Aquí, media caja -->

<!-- H y V: líneas horizontal y vertical (una sola coordenada) -->
<path d="M 20 50 H 80 V 90" fill="none" stroke="#22c55e" stroke-width="3"/>
<!-- "muévete a (20,50), recto hasta x=80, recto hasta y=90" -->

<!-- comandos en cadena: el lápiz encadena sin levantarse -->
<path d="M 10 10 L 40 40 L 70 10 L 100 40" fill="none" stroke="#f59e0b" stroke-width="3"/>

Cuatro reglas que te dejan leer casi cualquier path:

  1. M x y — mueve el lápiz ahí sin trazar (todo path empieza con M).
  2. L x y — recta hasta (x,y). H x y V y son sus atajos horizontal/vertical.
  3. Z — cierra la figura (vuelve al inicio). Sin coordenadas.
  4. Un comando repetido se puede omitir: L 40 40 L 70 10 = L 40 40 70 10.

Mayúscula vs minúscula: absoluto vs relativo

Esta es la distinción que desconcierta al leer paths ajenos:

absoluto-relativo.html
<!-- MAYÚSCULA = absoluto: coordenadas desde el origen (0,0) del viewBox -->
<path d="M 20 20 L 60 20"/>   <!-- termina en el punto exacto (60,20) -->

<!-- minúscula = relativo: coordenadas DESDE donde está el lápiz -->
<path d="M 20 20 l 40 0"/>    <!-- avanza 40 a la derecha, 0 abajo -->

Las dos líneas dibujan lo mismo, pero piensan distinto: L 60 20 dice "ve al punto 60,20"; l 40 0 dice "avanza 40 desde donde estás". Los relativos (minúscula) hacen los iconos portables — mueves el M inicial y todo el dibujo se traslada intacto. Por eso los exportadores los prefieren, y por eso los paths reales mezclan ambos. Truco de lectura: si ves minúsculas, piensa "pasos desde aquí", no "coordenadas".

Las curvas: C y Q

Aquí está lo que hace a <path> insustituible — curvas suaves imposibles con primitivas:

curvas.html
<!-- Q: un punto de control (cx cy) + punto final (x y) -->
<path d="M 20 80 Q 60 10 100 80" fill="none" stroke="#6d28d9" stroke-width="3"/>
<!-- arco: sube jalado por el imán en (60,10) y baja al final -->

<!-- C: dos puntos de control + punto final = curva en S -->
<path d="M 20 50 C 40 10 80 90 100 50" fill="none" stroke="#22c55e" stroke-width="3"/>

Existen más comandos (A para arcos de elipse, S y T para encadenar curvas suaves), pero con M L H V C Q Z lees y editas la abrumadora mayoría de iconos. No necesitas escribir curvas complejas a mano: las diseñas en Figma y las EXPORTAS — pero saber leerlas te deja ajustarlas, animarlas y depurarlas sin volver al editor.

En el atributo d de un icono ves 'M4 12h16'. ¿Qué dibuja?

Mini-reto

Toma un icono de Lucide o de cualquier set open source (los de este sitio mismo, con DevTools), copia su atributo d y LÉELO comando por comando en voz alta: "muévete aquí, línea allá, cierra". No tienes que entender cada curva — el objetivo es que el jeroglífico se vuelva un dictado. Después cámbiale un número del d y mira cómo se deforma el icono en vivo.

Qué sigue

Ya lees y escribes paths. Pero en el trabajo real casi nunca dibujas a mano: exportas desde Figma o Illustrator... y eso escupe un SVG lleno de basura. La próxima lección es de higiene profesional: de un export sucio a un SVG limpio y liviano, con SVGO.