Comandos del atributo path (d) en SVG
Referencia con ejemplos
El <path> es la forma mas potente de SVG. Su atributo d describe el trazo con una serie de comandos. En mayuscula son absolutos; en minuscula, relativos al punto actual.
Mover y lineas
- M x y - mover el "lapiz" a un punto (sin dibujar).
- L x y - linea recta hasta x,y.
- H x - linea horizontal hasta x.
- V y - linea vertical hasta y.
- Z - cerrar el trazo (vuelve al inicio).
Curvas bezier
- C x1 y1 x2 y2 x y - curva cubica con dos puntos de control.
- S x2 y2 x y - cubica suave (refleja el control anterior).
- Q x1 y1 x y - curva cuadratica (un control).
- T x y - cuadratica suave (refleja el control anterior).
Arcos
- A rx ry rot arc-grande barrido x y - arco eliptico hasta x,y.
Ejemplo: un triangulo
<path d="M 50 10 L 90 90 L 10 90 Z" fill="#6c8cff"/>
Mueve a (50,10), linea a (90,90), linea a (10,90), cierra.
Ejemplo: una curva
<path d="M 10 80 C 40 10 65 10 95 80" fill="none" stroke="#ff6c9c" stroke-width="4"/>
No lo escribas a mano
Calcular curvas a mano es tedioso. En svgdesk dibujas con la pluma o el lapiz y editas los nodos visualmente; el atributo d se genera solo. Lo ves en el panel de codigo.