W3docs
es
Iniciar sesión

SVG Path

Aprende el elemento SVG <path> y los comandos del atributo d: moveto, lineto, curvas cúbicas y cuadráticas, arcos y closepath, con ejemplos.

El elemento SVG <path> es la forma más potente y flexible de SVG. Casi cualquier otra forma SVG — líneas, polígonos y curvas — puede reproducirse con un <path>. Esta página explica el único atributo que hace todo el trabajo, el atributo d, y recorre cada comando de dibujo que admite con sus parámetros y ejemplos ejecutables.

Descripción del elemento <path>

El elemento SVG <path> especifica una trayectoria: una serie de comandos de dibujo que mueven un "bolígrafo" imaginario por el lienzo para trazar líneas, curvas y arcos.

Los trazados se utilizan para crear formas complejas combinando varios segmentos rectos o curvos. Las formas complejas formadas únicamente por líneas rectas también pueden crearse como polilíneas, pero a diferencia de una polilínea, un trazado puede dibujar curvas verdaderas, por lo que no necesita muchos segmentos de línea pequeños para simular una curva.

En SVG, el sistema de coordenadas comienza en la esquina superior izquierda: x crece hacia la derecha e y crece hacia abajo. Téngalo en cuenta: un valor mayor de y está más abajo en la pantalla, no más arriba.

La forma de un trazado se define enteramente por el atributo d ("datos"). El valor de d es una cadena formada por comandos de una sola letra, cada uno seguido de los números (parámetros) que ese comando necesita.

Comandos del atributo d

Cada comando es una sola letra seguida de sus parámetros. Los comandos disponibles son:

ComandoNombreParámetros
M / mmovetox y
L / llinetox y
H / hhorizontal linetox
V / vvertical linetoy
C / ccubic Bézier curvetox1 y1 x2 y2 x y
S / ssmooth cubic Bézier curvetox2 y2 x y
Q / qquadratic Bézier curvetox1 y1 x y
T / tsmooth quadratic Bézier curvetox y
A / aelliptical arcrx ry x-axis-rotation large-arc-flag sweep-flag x y
Z / zclosepath(ninguno)

Comandos absolutos frente a relativos

Cada comando existe en dos formas. Las letras mayúsculas usan coordenadas absolutas — cada x y se mide desde el origen superior izquierdo del SVG (0, 0). Las letras minúsculas usan coordenadas relativas — cada valor es un desplazamiento desde la posición actual del bolígrafo (donde terminó el comando anterior).

Los dos trazados siguientes dibujan el mismo triángulo. El primero usa comandos absolutos y el segundo usa relativos:

<!-- Absolute: every point measured from (0,0) -->
<path d="M 100 50 L 200 50 L 150 150 Z" fill="orange" />

<!-- Relative: every point is an offset from the previous point -->
<path d="M 100 50 l 100 0 l -50 100 Z" fill="orange" />

Leyendo la versión relativa: comienza en (100, 50), luego mueve +100, 0 (hasta 200, 50), luego mueve -50, +100 (hasta 150, 150), y z cierra de vuelta al inicio. Los comandos relativos son útiles cuando se desea trasladar toda una forma: basta con cambiar la primera M y el resto la sigue.

MoveTo, líneas y cierre (M, L, H, V, Z)

  • M x y levanta el bolígrafo y lo mueve a (x, y) sin dibujar. Todo trazado debe comenzar con un moveto.
  • L x y dibuja una línea recta desde el punto actual hasta (x, y).
  • H x dibuja una línea horizontal hasta la coordenada x x (y permanece igual). Es una forma abreviada de una L horizontal.
  • V y dibuja una línea vertical hasta la coordenada y y (x permanece igual).
  • Z cierra el trazado dibujando una línea recta de vuelta al punto M más reciente.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" fill="lightblue" stroke="navy" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>
Pruébalo tú mismo »

El atributo fill pinta el interior de la forma, mientras que stroke pinta el contorno. Para más opciones de contorno (ancho, guiones, extremos de línea) consulte SVG Stroking.

Curvas de Bézier cúbicas (C y S)

Una curva de Bézier cúbica dobla un segmento usando dos puntos de control. C x1 y1 x2 y2 x y dibuja una curva desde el punto actual hasta (x, y); (x1, y1) es el punto de control del inicio y (x2, y2) es el punto de control del final. La curva se "atrae" hacia cada punto de control.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 C20 20, 280 20, 280 150"
            fill="none" stroke="purple" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Aquí el bolígrafo comienza en (20, 150), y los dos puntos de control (20, 20) y (280, 20) tiran de la curva hacia arriba formando un arco suave que termina en (280, 150). El uso de fill="none" la mantiene como una curva abierta en lugar de rellenar el área inferior.

La variante suave S x2 y2 x y continúa una curva C (o S) anterior de forma continua: solo tiene un punto de control porque el primero se refleja automáticamente desde el punto de control final del comando anterior. Esto facilita encadenar curvas en una onda continua.

Curvas de Bézier cuadráticas (Q y T)

Una curva de Bézier cuadrática es más simple: usa un único punto de control. Q x1 y1 x y dibuja una curva desde el punto actual hasta (x, y), doblada hacia el punto de control (x1, y1).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 Q150 20 280 150"
            fill="none" stroke="green" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

El único punto de control (150, 20) se sitúa sobre el punto medio y tira de la línea formando una joroba simétrica. La variante suave T x y continúa una curva Q/T anterior reflejando su punto de control automáticamente, por lo que solo hay que indicar el nuevo punto final.

Arcos elípticos (A)

El comando de arco dibuja una sección de una elipse. Acepta siete parámetros:

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

  • rx, ry — los radios horizontal y vertical de la elipse.
  • x-axis-rotation — rotación de la elipse, en grados.
  • large-arc-flag — 0 para el arco más pequeño, 1 para el arco más grande entre los dos puntos.
  • sweep-flag — 0 para trazar en sentido antihorario (ángulo negativo), 1 para trazar en sentido horario (ángulo positivo).
  • x, y — el punto final del arco.

Dado que dos puntos en una elipse pueden unirse mediante cuatro arcos posibles, las dos banderas seleccionan cuál se dibuja.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="200">
      <!-- Same start and end point, different flag combinations -->
      <path d="M60 150 A60 60 0 0 1 180 150"
            fill="none" stroke="crimson" stroke-width="3" />
      <path d="M60 150 A60 60 0 1 0 180 150"
            fill="none" stroke="teal" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Ambos arcos comparten los mismos radios (60 60) y el mismo punto de inicio (60, 150) y fin (180, 150). El trazado carmesí usa large-arc-flag 0, sweep-flag 1 para dibujar el arco corto sobre la línea; el trazado verde azulado usa large-arc-flag 1, sweep-flag 0 para dibujar el arco grande en sentido contrario. Cambiar las banderas es la forma más sencilla de entender el comportamiento de A.

Consejos

  • Un trazado siempre comienza con un moveto. Sin una M/m inicial, el trazado no renderiza nada.
  • Los números pueden separarse con espacios o comas: L 100 50 y L100,50 son equivalentes.
  • Los comandos idénticos repetidos pueden omitirse: M10 10 L20 20 L30 30 puede escribirse como M10 10 L20 20 30 30.
  • Escribir trazados complejos a mano es propenso a errores; un editor vectorial que exporte SVG suele ser el flujo de trabajo más adecuado, pero entender los comandos permite leer y corregir el resultado.

Páginas relacionadas

  • SVG Reference — una lista rápida de todos los elementos y atributos SVG.
  • SVG Stroking — controla el ancho, el color y el guionado de los contornos.
  • SVG Line — dibuja un elemento de línea recta simple.
  • SVG Polygon — dibuja formas cerradas a partir de una lista de puntos.

Práctica

Práctica
¿Cuáles de los siguientes son comandos válidos del atributo 'd' de un trazado SVG?
¿Cuáles de los siguientes son comandos válidos del atributo 'd' de un trazado SVG?
Was this page helpful?