Helpful resources ▼
  Download   Pricing   Buy

SVG Path Data – líneas, arcos y curvas Bézier

El elemento <path> dibuja el contorno de cualquier forma combinando líneas, arcos y curvas Bézier. Es el elemento SVG más flexible para crear paths abiertos o cerrados, simples o complejos. Un path se define mediante un único atributo d que contiene una serie de comandos.

En este artículo aprenderás a:

  • Leer los comandos SVG más comunes dentro del atributo d.
  • Dibujar líneas rectas, horizontales, verticales y formas cerradas.
  • Usar el comando A para dibujar arcos SVG.
  • Crear curvas Bézier cuadráticas y cúbicas con puntos de control.
  • Elegir comandos suaves como T y S cuando varios segmentos de curva deben conectarse limpiamente.

Grupos de comandos de path SVG

Grupo de comandosComandosDescripción
MovetoM, mDefine el punto inicial de un nuevo subpath.
LinetoL, l, H, h, V, vDibuja líneas rectas horizontalmente, verticalmente o hasta cualquier coordenada.
ClosepathZ, zCierra el subpath actual uniéndolo con su punto inicial.
Bézier cúbicaC, c, S, sDibuja curvas Bézier cúbicas con dos puntos de control.
Bézier cuadráticaQ, q, T, tDibuja curvas Bézier cuadráticas con un punto de control.
Arco elípticoA, aDibuja arcos elípticos usando radios, rotación y flags.

Los comandos en mayúsculas usan coordenadas absolutas; los comandos en minúsculas usan coordenadas relativas. Todas las coordenadas no tienen unidad explícita y se interpretan en el sistema de coordenadas de usuario SVG actual. Una forma útil de leer path data es imaginar un punto actual que se mueve por el path: M define dónde empieza el dibujo, cada comando de dibujo deja el punto actual en un nuevo endpoint, y el siguiente comando parte de ahí.

Cómo escribir path data SVG

  1. Crea un elemento <path> y escribe su geometría en el atributo d.
  2. Empieza con M x y para mover el punto actual al inicio del path.
  3. Añade comandos de línea, arco o curva como L, H, V, A, Q o C.
  4. Usa comandos en mayúsculas para coordenadas absolutas o en minúsculas para coordenadas relativas al punto actual.
  5. Cierra el contorno con Z cuando el path deba convertirse en una forma rellena.
  6. Añade fill, stroke y stroke-width para hacer visible el path.

Líneas y paths

Moveto (M, m)

Todo path SVG empieza con el comando moveto, escrito como M x y. Las coordenadas x e y indican el punto actual donde debe comenzar el path.

Lineto (L, l, H, h, V, v)

Tres comandos lineto dibujan líneas rectas desde el punto actual hasta uno nuevo:

ComandoParámetrosDescripción
L / lx yDibuja una línea hasta el punto especificado.
H / hxDibuja una línea horizontal; y no cambia.
V / vyDibuja una línea vertical; x no cambia.

Después de cada comando de path, el punto actual se mueve al endpoint de ese comando. El siguiente comando de dibujo empieza desde esta nueva posición.

Closepath (Z, z)

El comando Z closepath cierra el subpath actual dibujando una línea recta de vuelta a su punto inicial. No requiere parámetros.

Ejemplo: dibujar cuadrados con comandos lineto

Dibujemos un cuadrado con comandos lineto ( lineto.svg):

1<svg height="400" width="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 30 30 L 110 30 L 110 110 L 30 110 L 30 30" fill="transparent" stroke-width="2" stroke="black" />
3    <path d="M 50 50 H 130 V 130 H 50 Z" fill="transparent" stroke-width="2" stroke="blue" />
4    <path d="M 70 70 h 80 v 80 h -80 Z" fill="transparent" stroke-width="2" stroke="red" />
5</svg>

Cuadrado SVG dibujado con comando L en negro, H y V en azul, y comandos relativos h y v en rojo

En la ilustración, el lado izquierdo anota los comandos de path y el lado derecho muestra la salida SVG renderizada. Esto facilita comparar tres formas de dibujar el mismo cuadrado: comandos L explícitos, comandos compactos H y V, y comandos relativos en minúsculas.

Dibujar arcos SVG

Los arcos dibujan secciones de círculos o elipses. El comando A necesita seis parámetros que deciden cuál de los cuatro arcos posibles entre dos puntos se renderizará.

Nota: El mismo punto inicial y endpoint pueden conectarse mediante cuatro arcos distintos. large-arc-flag elige el arco pequeño o grande, y sweep-flag elige la dirección de dibujo.

Sintaxis: A rx ry x-axis-rotation large-arc-flag sweep-flag x y

ParámetroSignificado
rx, ryRadios de la elipse.
x-axis-rotationRotación del eje x de la elipse en grados.
large-arc-flag0 = arco pequeño, 1 = arco grande.
sweep-flag0 = antihorario, 1 = horario.
x yCoordenadas absolutas del endpoint del arco.

La forma minúscula a funciona igual, pero trata el endpoint como relativo al punto actual.

1<svg height="500" width="700" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2    <path d="M10,20 A 30,30 0 0,0 40,70" style="stroke:#FFA500; stroke-width:1; fill:none" />
3    <path d="M10,20 A 30,30 0 1 0 40,70" style="stroke: #FF0000; stroke-width:1; fill:none" />
4    <path d="M10,20 A 30,30 0 0 0 40,70 A 30,30 0 1 1 10,20" style="stroke: #FFA500; stroke-width:1; fill:#FFD700" transform="translate(70,0)" />
5</svg>

Ejemplos del comando de arco SVG que muestran arco pequeño, arco grande y formas cerradas basadas en arcos

La ilustración compara un arco pequeño, un arco grande y una forma cerrada basada en arcos. La geometría parte de la misma idea, pero cambiar los flags del arco cambia qué curva elige SVG entre el inicio y el final.

Considera este path del ejemplo: d="M10,20 A 30,30 0 0,0 40,70".

Dibujar curvas Bézier

Las curvas Bézier se usan para dibujar contornos suaves en iconos, logotipos, ilustraciones y diagramas. Los paths SVG admiten dos tipos de curva Bézier: curvas cuadráticas con un punto de control y curvas cúbicas con dos puntos de control. El punto inicial viene de la posición actual del path, el endpoint termina el segmento y los puntos de control tiran de la curva para darle forma.

Curvas Bézier cuadráticas

Una curva Bézier cuadrática empieza en el punto actual. El comando Q usa un punto de control (x1 y1) y un endpoint (x y). El comando minúsculo q tiene el mismo significado, pero sus coordenadas son relativas al punto actual.

Bézier cuadrática (Q, q, T, t)

Las curvas Bézier cuadráticas usan un único punto de control.

Veamos un ejemplo:

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100" stroke="black" stroke-width="1" fill="transparent" />
3</svg>

Curva Bézier cuadrática dibujada con el comando Q

La curva empieza en (10, 100), se curva hacia el punto de control (25, 10) y termina en (180, 100). Mover el punto de control cambia la curva sin cambiar el punto inicial ni el final.

Variar el punto de control

Si conectas el punto de control con el inicio y el final de la curva mediante segmentos, la línea que une los centros de esos segmentos será tangente al vértice de la curva.

El siguiente ejemplo mantiene los mismos puntos inicial y final, pero cambia la coordenada y1 del punto de control ( bezier-curve2.svg). Así se ve cómo mover el punto de control hacia arriba o abajo cambia la curvatura:

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <g stroke-width="1" fill="none">
3        <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4        <path d="M 10 100 Q 25 -60 180 100" stroke="blue" />
5        <path d="M 10 100 Q 25 100 180 100" stroke="red" />
6        <path d="M 10 100 Q 25 190 180 100" stroke="green" />
7    </g>
8</svg>

Cuatro curvas Bézier cuadráticas con distintas coordenadas y para el punto de control

Los cuatro paths usan los mismos puntos inicial y final. Solo cambia la posición vertical del punto de control, por lo que la curva se dobla por encima, hacia o por debajo de la línea base.

Ahora toma la curva negra como base y cambia la coordenada x1 del punto de control ( bezier-curve3.svg):

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <g stroke-width="1" fill="none">
3        <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4        <path d="M 10 100 Q -40 10 180 100" stroke="red" />
5        <path d="M 10 100 Q 165 10 180 100" stroke="green" />
6        <path d="M 10 100 Q 245 10 180 100" stroke="blue" />
7    </g>
8</svg>

Cuatro curvas Bézier cuadráticas con diferentes valores x1 del punto de control

Aquí el punto de control se mueve a izquierda o derecha. Esto cambia dónde empieza a doblarse la curva, mientras el endpoint permanece igual.

Cadenas suaves con T

Varios comandos Q pueden escribirse uno tras otro, pero las uniones pueden verse irregulares si cada segmento usa un punto de control independiente. Usa T cuando quieras que SVG continúe una curva Bézier cuadrática de forma suave.

El comando T dibuja desde el punto actual hasta un nuevo endpoint (x y). No toma un punto de control explícito. En su lugar, SVG refleja el punto de control cuadrático anterior, pero solo cuando el comando previo fue Q o T. Después de T, su endpoint se convierte en el nuevo punto actual.

1<svg width="700" height="600" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" stroke="black" stroke-width="3" fill="none" />
3</svg>

Curva Bézier cuadrática creada con el comando T

Cambiar las coordenadas endpoint del comando T produce distintas cadenas de curvas suaves ( bezier-curve5.svg).

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 320 100 T 390 100" stroke="#FFA500" stroke-width="3" fill="none" />
3    <path d="M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150" stroke="grey" stroke-width="3" fill="none" />
4</svg>

Dos curvas Bézier cuadráticas creadas con el comando T

Curva Bézier cúbica (C, c, S, s)

Las curvas Bézier cúbicas requieren dos puntos de control. El comando C toma tres pares de coordenadas: el primer punto de control (x1 y1), el segundo punto de control (x2 y2) y el endpoint (x y).

Los puntos de control determinan la dirección de la curva cerca de su inicio y de su final. Puedes escribir varios comandos C en un elemento <path>; SVG los dibuja secuencialmente, y el endpoint de una curva cúbica se convierte en el punto inicial de la siguiente.

El siguiente ejemplo dibuja una forma con dos paths Bézier cúbicos separados ( cubic-bezier-curves.svg):

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2    <!--shape two paths-->
3    <path d="M 100 250 C 150 60 355 140 328 260 " stroke="black" stroke-width="3" fill="none" />
4    <path d="M 100 250 C 40 500 240 510 328 260" stroke="red" stroke-width="3" fill="none" />
5</svg>

La ilustración muestra los dos paths Bézier cúbicos separados, en negro y rojo, para que la conexión entre segmentos sea fácil de inspeccionar.

Curvas Bézier cúbicas dibujadas con comandos C en negro y rojo

El siguiente ejemplo dibuja el mismo contorno como un path continuo:

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2   <!--shape 1 path-->
3   <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" stroke="black" stroke-width="3" fill="none" />
4</svg>

En el ejemplo anterior, dos comandos C se conectan dentro de un path. Es compacto, pero el punto de unión puede verse menos suave si los puntos de control no conservan la misma dirección.

Cadenas cúbicas suaves con S

Para curvas largas y suaves, usa el comando abreviado S x2 y2 x y. Igual que T para curvas cuadráticas, S continúa una cadena Bézier cúbica sin exigir que escribas explícitamente el primer punto de control. En S, SVG refleja el punto de control cúbico anterior para mantener la continuidad de la pendiente. Solo proporcionas el segundo punto de control (x2 y2) y el endpoint (x y).

Ejemplo creativo: “búho” en estilo primitivo

Las curvas Bézier también pueden combinarse en dibujos expresivos. El ejemplo siguiente usa segmentos de path simples y círculos para crear una ilustración de búho en estilo primitivo ( owl.svg):

 1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
 2    <g stroke="black" stroke-width="3" fill="none">
 3        <!--body 1 path-->
 4        <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" />
 5        <!--wing-->
 6        <path d="M 110 260 C 220 200, 250 280, 120 410" />
 7        <!--1 eyebrow-->
 8        <path d="M 110 240 C 130 220, 220 130, 231 230" />
 9        <!--2 eyebrow-->
10        <path d="M 231 231 C 230 220, 280 130, 329 258" />
11        <!--line-->
12        <path d="M 30 380 l 63 0" />
13        <path d="M 266 380 c 33 8 63 -8 90 5" />
14        <!--eyes-->
15        <circle cx="204" cy="209" r="3" />
16        <circle cx="205" cy="210" r="9" />
17        <circle cx="265" cy="209" r="3" />
18        <circle cx="265" cy="210" r="8" />
19    </g>
20</svg>

Comparación entre un búho SVG de estilo primitivo construido con paths Bézier y un dibujo de referencia

Errores comunes y soluciones

ProblemaCausaSolución
El path no se renderizaLos datos del path no empiezan con un comando MEmpieza siempre el atributo d con M x y para definir el punto inicial
La forma no se cierraFalta el comando ZAñade Z al final del path para cerrar el subpath
El arco se dibuja en una dirección inesperadaValores incorrectos de large-arc-flag o sweep-flagCambia un flag cada vez (0 o 1) y verifica visualmente el resultado
El comando T no produce una curva suaveEl comando anterior no fue Q ni TUsa T solo después de un comando Q u otro T
Aparecen esquinas bruscas entre segmentos Bézier cúbicosSe usan comandos C consecutivosUsa el comando S para crear cadenas Bézier cúbicas suaves
El path se desplaza de forma inesperadaSe mezclan comandos absolutos y relativos sin intenciónRevisa mayúsculas y minúsculas: mayúsculas para absoluto, minúsculas para relativo
La forma no se rellenaEl path está abierto o tiene fill="none"Cierra el path con Z y verifica el atributo fill

Recetas rápidas

TareaEjemplo de path SVG
Dibujar un rectángulo<path d="M10 10 H110 V110 H10 Z" fill="none" stroke="black" />
Cerrar un path abiertoAñade Z al final del atributo d
Dibujar un arco simple<path d="M10 50 A30 30 0 0 1 90 50" fill="none" stroke="orange" />
Dibujar un círculo con arcos<path d="M50 10 A40 40 0 1 1 49.9 10 Z" />
Dibujar una curva Bézier cuadrática<path d="M10 80 Q95 10 180 80" fill="none" stroke="black" />
Crear una cadena cuadrática suave<path d="M10 80 Q60 10 110 80 T210 80" />
Dibujar una curva Bézier cúbica<path d="M10 80 C40 10 140 10 170 80" />
Crear una cadena cúbica suave<path d="M10 80 C40 10 140 10 170 80 S300 150 330 80" />

FAQ – SVG Path Data

¿Qué es SVG path data?

SVG path data es la cadena de comandos almacenada en el atributo d de un elemento <path>. Indica a SVG dónde moverse, dónde dibujar líneas, cómo dibujar arcos y cómo crear curvas Bézier.

¿Cuál es la diferencia entre comandos de path en mayúsculas y minúsculas?

Los comandos en mayúsculas usan coordenadas absolutas en el sistema de coordenadas de usuario actual. Los comandos en minúsculas usan coordenadas relativas al punto actual, lo que resulta útil para segmentos repetidos y path data compacta.

¿Cómo cierro un path SVG?

Usa el comando Z o z al final del subpath. Dibuja una línea recta desde el punto actual hasta el inicio del subpath y ayuda a que las formas rellenas se rendericen como contornos cerrados.

¿Cuándo debo usar path en lugar de formas SVG básicas?

Usa <path> cuando un rectángulo, círculo, elipse, línea, polilínea o polígono no sea suficientemente flexible. Los paths son mejores para contornos personalizados, iconos, logotipos, arcos y curvas suaves.

Especificación y recursos relacionados

Formas SVG Texto SVG