Softonic

Constructor de rutas SVG

Paso 1 / 2

Haz clic en un área vacía para añadir puntos. Arrastra los puntos para moverlos. Elimina el último con el botón.

Siguiente

El atributo d en un SVG <path> es un pequeño lenguaje específico de dominio: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Cada letra es un comando (moveto, lineto, Bézier cúbico, cerrar ruta), cada número es una coordenada o punto de control. Este constructor te permite hacer clic en el lienzo para colocar puntos de anclaje y arrastrarlos para remodelar, viendo cómo se dibuja la ruta en tiempo real. Activa el suavizado para convertir los segmentos rectos en curvas Bézier cúbicas, cierra la forma y luego copia el atributo d generado o el SVG completo.

Cómo construir una ruta

  1. 1

    Haz clic para agregar puntos

    Cada clic coloca un punto de anclaje en el lienzo; la ruta los conecta en orden, empezando por un `M` (moveto).

  2. 2

    Arrastra para remodelar

    Arrastra cualquier punto para moverlo y elimina el más reciente con el botón. El mínimo son dos puntos.

  3. 3

    Recto o suave

    Deja los puntos unidos por segmentos rectos `L`, o activa Suavizar para convertirlos en curvas Bézier cúbicas `C`.

  4. 4

    Cierra o deja abierto

    Activa Cerrar ruta para añadir una `Z` de vuelta al inicio, o déjala abierta para una polilínea/trazo.

  5. 5

    Copia el atributo d

    La cadena `d` generada es limpia y separada por espacios, lista para pegar en cualquier SVG; también puedes copiar o descargar el SVG completo.

Hoja de trucos de comandos de ruta SVG

El constructor visual de arriba emite los comandos M, L, C y Z (moveto, línea recta, Bézier cúbico y cerrar ruta). El resto del conjunto de comandos a continuación es una referencia para leer y editar a mano cualquier cadena d que pegues en otro lugar. Las letras mayúsculas utilizan coordenadas absolutas; las minúsculas utilizan desplazamientos relativos desde la posición actual del lápiz.

Cmd Nombre Sintaxis
M / m Moveto M x y
L / l Lineto L x y
H / h Lineto horizontal H x
V / v Lineto vertical V y
C / c Bézier cúbico C x1 y1 x2 y2 x y
S / s Bézier cúbico suave S x2 y2 x y
Q / q Bézier cuadrático Q x1 y1 x y
T / t Bézier cuadrático suave T x y
A / a Arco A rx ry x-axis-rot lg sweep x y
Z / z Cerrar ruta Z

Un ejemplo trabajado: una marca de verificación redondeada

M 4 12 L 10 18 L 20 6

Tres comandos: mover a (4, 12), línea a (10, 18), línea a (20, 6). Agrega stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" a la ruta y tendrás un glifo de marca de verificación limpio.

El comando de arco es el más difícil

A rx ry x-axis-rotation large-arc-flag sweep-flag x y toma siete números:

  • rx, ry, radios de la elipse
  • x-axis-rotation, rotación de la elipse en grados
  • large-arc-flag, 0 para el arco corto, 1 para el largo
  • sweep-flag, 0 para antihorario, 1 para horario
  • x, y, punto final

Cambia las banderas una a la vez para ver cómo los mismos dos puntos finales pueden conectarse de cuatro maneras diferentes.

Consejos

  • Mantén los números pequeños y redondeados. Ajusta las coordenadas a la cuadrícula de píxeles o medio píxel; evita 17 lugares decimales.
  • Prefiere comandos en mayúsculas cuando tu ruta es independiente. Las minúsculas (relativas) son útiles cuando planeas traducir la ruta más tarde.
  • Cierra solo cuando llenas. Si una ruta es estrictamente trazada, Z no agrega ningún cambio visual y ahorra un byte.
  • Pasa por SVGO. Los ceros finales, espacios duplicados y comandos repetidos se colapsan bien.

Preguntas frecuentes

Las coordenadas en d están en las mismas unidades que el viewBox. Una ruta diseñada para viewBox="0 0 24 24" colocada en viewBox="0 0 100 100" aparecerá en el cuarto superior izquierdo. Escala las coordenadas o redimensiona el viewBox.

Cuando planeas traducir o repetir la ruta. Los comandos relativos mantienen la forma portátil: puedes anteponer un nuevo M en cualquier lugar y todo lo que esté abajo se moverá con él.

Sí. <polyline points="0,0 10,10 20,0"> se convierte en <path d="M 0 0 L 10 10 L 20 0" />. Un polígono agrega un Z final. La mayoría de los optimizadores hacen esto automáticamente porque las rutas se comprimen mejor.

Para efectos de dibujo usa CSS stroke-dasharray + stroke-dashoffset. Para mover un elemento a lo largo de la ruta usa SMIL <animateMotion> con href apuntando al id de la ruta.

No. Los comandos de ruta se calculan en el navegador y nunca se envían a ningún lado.

Herramientas relacionadas

Selector de Color de Material Design

Explora la paleta de colores de Material Design. Copia cualquier tono (50 a A700) como HEX, RGB o HSL con un toque.

Convertir foto en dibujo

Convierte fotos JPEG, PNG o WebP en dibujos de grafito, lápiz suave o carboncillo en el navegador y exporta el resultado como PNG o JPEG.

Comprimir GIF

Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.

Convertidor de Pantone a HEX

Convierte colores Pantone PMS a los valores HEX, RGB y CMYK más cercanos para la coincidencia en pantalla e impresión, con vista previa de muestra.

Generador de papel rayado

Crea papel rayado imprimible gratis. Elige pauta universitaria, ancha o estrecha, ajusta el interlineado en mm, el tamaño de página y una línea de margen, e imprime o descarga el SVG.

Creador de banderas

Diseña una bandera personalizada sencilla 3:2 en tu navegador con seis composiciones, colores, texto y un símbolo. Descarga SVG o PNG, o abre el cuadro de impresión del navegador.

Herramienta disponible en otros idiomas