Visualizador y Editor de Rutas SVG

Visualizador y Editor de Rutas SVG

Pega cualquier atributo d de una ruta SVG y ve cómo se renderiza en tiempo real. Esta herramienta descompone cada comando en sus parámetros y punto final absoluto, dibuja las líneas de control y los puntos de control en rojo sobre la vista previa, y reescribe la ruta entre coordenadas absolutas y relativas con precisión configurable. Está diseñada para autores de SVG que deseen entender, limpiar o ajustar manualmente la cadena original del atributo d sin salir del navegador.

Cómo Usar

1. Pega el contenido de tu atributo d de ruta (o haz clic en “Prueba un ejemplo”) en el campo de entrada.
2. Ajusta el viewBox para que coincida con el lienzo en el que se creó la ruta. El valor predeterminado 0 0 200 200 funciona para los ejemplos integrados.
3. Establece el color del trazo, el ancho del trazo y el relleno para ver cómo se renderizará la ruta.
4. Elige un modo de coordenadas — mantener tal cual, convertir a absoluto o convertir a relativo — y una precisión desde 0 hasta 6 decimales.
5. Activa las superposiciones para mostrar u ocultar la cuadrícula, los puntos finales numerados de los comandos, los manejadores de control de Bezier y la animación de dibujo.
6. Copia el atributo d transformado o descarga el SVG completo independiente.

Características

• Vista previa en tiempo real de la ruta – renderiza tu cadena d en un lienzo SVG con estilo de trazo, relleno y viewBox configurable.
• Tabla de desglose de comandos – lista cada comando en orden con sus parámetros, argumentos etiquetados y punto final absoluto.
• Superposición de puntos de control de Bezier – dibuja líneas discontinuas y puntos de control en naranja para los comandos C, S, Q y T para que puedas ver cómo se forman las curvas.
• Puntos finales numerados – marca el inicio de la ruta en verde y cada punto final subsiguiente en azul con una etiqueta de índice.
• Conversión absoluta ↔ relativa – reescribe toda la cadena d en cualquiera de los sistemas de coordenadas sin cambiar la forma renderizada.
• Redondeo de coordenadas – elimina la precisión decimal de 0 a 6 lugares para reducir y normalizar los datos de la ruta.
• Superposición de cuadrícula – líneas de cuadrícula automáticamente ajustadas y resaltado de los ejes cero vinculados al viewBox.
• Longitud de la ruta – utiliza el API getTotalLength del navegador para reportar la longitud total dibujada en unidades de viewBox.
• Animación de dibujo – animación opcional de stroke-dashoffset que dibuja la ruta en un bucle para depuración visual.
• Exportación de SVG independiente – copia o descarga un archivo SVG completo con el viewBox y los ajustes de estilo aplicados actualmente.

Comandos soportados de ruta

• M / m – moveto: inicia un nuevo sub-ruta en el punto dado.
• L / l – lineto: dibuja una línea recta al punto dado.
• H / h – horizontal lineto: dibuja una línea horizontal al valor x dado.
• V / v – vertical lineto: dibuja una línea vertical al valor y dado.
• C / c – Bezier cúbico: dos puntos de control más un punto final.
• S / s – Bezier cúbico suave: refleja automáticamente el punto de control anterior.
• Q / q – Bezier cuadrático: un punto de control más un punto final.
• T / t – Bezier cuadrático suave: refleja automáticamente el punto de control anterior.
• A / a – arco elíptico: radios, rotación del eje X, bandera de arco largo y de barrido, más punto final.
• Z / z – closepath: dibuja una línea recta de vuelta al punto de inicio del sub-ruta.