Visualizador de rutas SVG

Pega cualquier cadena de datos de ruta SVG — el valor del atributo d en un elemento <path> — y observa cómo se dibuja en tiempo real. Ve la longitud total de la ruta, el cuadro delimitador y un desglose por comando. Elige un color de trazo, alterna entre renderizado con contorno y relleno, activa una cuadrícula de coordenadas y copia el resultado como un fragmento <path> listo para usar. Todo se queda en esta pestaña.

Datos de la ruta

Vista previa

—

Opciones de renderizado

Mostrar cuadrícula — menores cada 10 unidades, mayores cada 50 Mostrar cuadro delimitador — rectángulo discontinuo de acento alrededor de la ruta Marcar punto de inicio — pequeño punto en el primer comando M Rellenar — pintar el interior en lugar de solo el contorno

Trazo Ancho viewBox

Desglose por comando —

#	Cmd	Forma	Descripción

Aún no se han analizado comandos.

Referencia de comandos haz clic en una fila para insertarla en el cursor

Acerca de los datos de ruta SVG

Los datos de ruta son el valor del atributo d de un elemento <path> — una sola cadena de comandos de una letra seguidos de números, p. ej. M 10 10 L 90 90.
Los comandos en mayúscula son absolutos (coordenadas en el viewBox); los de minúscula son relativos (desplazamiento desde el punto anterior).
Las repeticiones implícitas son una abreviatura de SVG: M 10 10 30 30 significa mover a (10, 10) seguido de línea a (30, 30). El segundo par se trata como una L implícita por el renderizador.
La longitud la mide el navegador con getTotalLength() en unidades de usuario; el cuadro delimitador, con getBBox(). Ambos se ejecutan después de montar la ruta, por lo que siempre están en vivo.
El campo viewBox controla qué parte del sistema de coordenadas es visible. El valor por defecto 0 0 200 200 cubre una rejilla de diseño de 200×200; cambia a -50 -50 300 300 para darle espacio a la ruta.
Todo se ejecuta en el navegador. La ruta que pegas nunca sale de esta pestaña.