Editor de rutas SVG

El Editor de Rutas SVG es una herramienta online gratuita que analiza, visualiza y transforma cadenas del atributo d de rutas SVG con vista previa en vivo, tabla de comandos editable y herramientas de ruta. Funciona por completo en tu navegador, sin necesidad de instalación ni registro.

Todos los comandos de rutas SVG: M, L, H, V, C, S, Q, T, A, Z, tanto absolutos como relativos.

Sí. La pestaña Comandos muestra cada segmento con campos de argumentos editables. Los cambios actualizan la vista previa en tiempo real.

No. Todo el análisis, la representación y las transformaciones se ejecutan en tu navegador.

Sí, el Editor de Rutas SVG es 100 % gratuito, sin registro, sin tarifas ocultas y sin límites de uso. Todo el procesamiento ocurre localmente en tu navegador, garantizando una privacidad total.

Sí, el Editor de Rutas SVG es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No hace falta ninguna cuenta ni registro. Solo abre el Editor de Rutas SVG en tu navegador y empieza a usarlo de inmediato. No hay barreras de registro ni restricciones de uso.

El Editor de Rutas SVG admite una amplia variedad de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones compatibles.

Solo introduce tu entrada en el campo correspondiente, ajusta las opciones a tu gusto y la herramienta la procesará al instante. Después puedes copiar el resultado al portapapeles o descargarlo.

El Editor de Rutas SVG funciona en todos los navegadores modernos, como Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

En una ruta SVG, una letra de comando en mayúscula es absoluta y una en minúscula es relativa. Los comandos absolutos posicionan el lápiz en coordenadas exactas medidas desde el origen del SVG, así que "L 90 90" siempre dibuja una línea hasta el punto 90,90. Los comandos relativos, en cambio, se mueven mediante un desplazamiento respecto a la posición actual del lápiz, así que "l 90 90" dibuja 90 unidades a la derecha y 90 hacia abajo desde donde esté el lápiz en ese momento. Las rutas relativas suelen generar archivos más pequeños y son fáciles de trasladar como un bloque, mientras que las absolutas son más fáciles de leer y de reposicionar con precisión. Este editor analiza ambas formas e incluye una Transformación de un clic que convierte todos los comandos entre absolutos y relativos sin cambiar la forma renderizada, para que puedas alternar entre estilos y comparar el resultado lado a lado.

La longitud de ruta del panel de estadísticas es una aproximación, no una longitud de arco exacta. Para segmentos rectos como L, H y V es precisa, pero para curvas —comandos cúbicos (C, S), cuadráticos (Q, T) y de arco (A)— la herramienta estima la longitud muestreando puntos a lo largo de la curva en lugar de resolver su geometría de forma analítica. El resultado es lo bastante cercano como para comparar dos rutas o valorar si una forma tiene aproximadamente el tamaño esperado, pero no debería usarse cuando importa una medición exacta, como al configurar un stroke-dasharray para una animación de trazado precisa. Para eso, obtén el valor directamente del elemento renderizado con getTotalLength() en el navegador. Pega una ruta aquí para obtener una estimación de longitud rápida y útil junto con el cuadro delimitador y el recuento de comandos.

La mayoría de las cadenas de ruta con tamaño excesivo provienen de herramientas de diseño que exportan coordenadas con muchos decimales, como "M 50.000123 4.998761". La mejora rápida más importante es redondear esa precisión: la pestaña Transformar de este editor redondea cada coordenada al número de decimales que elijas, lo que a menudo reduce drásticamente la longitud de la cadena manteniendo la forma visualmente idéntica a tamaños normales. Convertir los comandos absolutos a relativos puede recortar más bytes porque los desplazamientos suelen ser números más cortos, y la opción de salida minificada elimina los espacios dejando una sola línea compacta. Eliminar comandos redundantes y usar atajos como H y V para líneas alineadas con los ejes también ayuda. Cuando la ruta esté ajustada, copia la versión minificada directamente en tu marcado. Pega una ruta arriba, redondea a dos o tres decimales y observa cómo baja el peso en bytes en el panel de estadísticas.

El comando de arco elíptico toma siete valores: "A rx ry x-axis-rotation large-arc-flag sweep-flag x y". Después de los dos radios y la rotación, las dos banderas de un solo dígito deciden cuál de los cuatro arcos posibles se dibuja entre el punto inicial y el final. El large-arc-flag elige el arco más corto (0) o el más largo (1), que cubre más de 180 grados. El sweep-flag elige la dirección en la que se curva el arco: 0 barre en sentido antihorario, 1 en sentido horario. Los valores finales x e y son el punto final del arco. Como ambas banderas son booleanas, cambiar cualquiera de las dos convierte la curva en una ruta completamente distinta manteniendo los mismos puntos de inicio y fin. Este editor lista cada comando A en la pestaña Comandos con un campo editable y etiquetado para cada valor, para que puedas alternar una bandera y ver al instante qué arco produce en la vista previa en vivo.

SVG usa un sistema de coordenadas en el que el eje Y aumenta hacia abajo, justo lo contrario de las gráficas matemáticas estándar, por lo que las formas construidas con una mentalidad de abajo hacia arriba suelen aparecer invertidas. Una ruta también puede desaparecer simplemente porque sus coordenadas quedan fuera del viewBox, que define la ventana visible del lienzo. Este editor ayuda en ambos casos: el cuadro delimitador y los valores mínimo y máximo de X e Y en el panel de estadísticas te indican exactamente dónde se encuentra tu forma, y la herramienta ajusta automáticamente el viewBox para que la ruta siempre sea visible en la vista previa. La cuadrícula opcional con el origen marcado hace evidentes las direcciones de las coordenadas de un vistazo. Si la orientación es incorrecta, la pestaña Transformar puede voltear la ruta vertical u horizontalmente con un solo clic. Pega tu ruta arriba para ver exactamente dónde cae y corregirla.