Editor de Rutas SVG
Un editor de rutas SVG interactivo que te permite arrastrar puntos de control visualmente, ver análisis de comandos codificados por colores (M, L, C, Q, A, Z), previsualizar formas en tiempo real y copiar el código SVG con un clic. Incluye 8 rutas de ejemplo y un cheatsheet completo. Gratis, sin registro, 100% en el navegador.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90"> <path d="M 10 80 L 50 10 L 90 80 Z" fill="none" stroke="#3b82f6" stroke-width="2" /> </svg>
M 10 80 L 50 10 L 90 80 Z
¿Tienes una sugerencia?
Solicita una nueva herramienta o sugiere mejoras — ¡únete a nuestra comunidad en Slack!
¿Qué es un Editor de Rutas SVG?
Un Editor de Rutas SVG es una herramienta visual para crear y editar el atributo d de elementos SVG <path>. Las rutas SVG usan un mini-lenguaje de comandos (M para mover, L para línea, C para Bézier cúbica, Q para Bézier cuadrática, A para arco, Z para cerrar) para definir formas complejas. Este editor ofrece puntos de control interactivos, previsualización en tiempo real, visualización de comandos codificados por colores y exportación instantánea de código.
Cómo Usar el Editor de Rutas SVG
- Elige una ruta de ejemplo (Triángulo, Corazón, Estrella, etc.) o pega tu atributo SVG path d
- Arrastra los puntos de control en la previsualización para modificar la forma interactivamente
- Ajusta el color de relleno, color de trazo y ancho de trazo usando los controles de estilo
- Alterna la visibilidad de la cuadrícula y los puntos de control para edición precisa
- Cambia a la pestaña Visualizador para ver el análisis codificado por colores de cada comando
- Copia el código SVG generado o el atributo path d con un clic
Preguntas Frecuentes
¿Qué comandos de ruta SVG soporta este editor?
Este editor soporta todos los comandos estándar de ruta SVG: M (mover), L (línea), H (línea horizontal), V (línea vertical), C (Bézier cúbica), S (cúbica suave), Q (Bézier cuadrática), T (cuadrática suave), A (arco) y Z (cerrar). Se soportan variantes absolutas (mayúsculas) y relativas (minúsculas).
¿Puedo arrastrar y editar puntos de control Bézier?
Sí. El editor muestra puntos arrastrables para puntos finales (rojo) y controles (ámbar). Puedes hacer clic y arrastrar cualquier punto para remodelar la ruta interactivamente. Los datos de la ruta se actualizan en tiempo real.
¿Mis datos SVG se envían a algún servidor?
No. Toda la edición y renderizado ocurre 100% en tu navegador. Ningún dato se transmite a ningún servidor.
¿Cuál es la diferencia entre comandos absolutos y relativos en rutas SVG?
Los comandos absolutos (mayúsculas: M, L, C) usan coordenadas relativas al origen del canvas SVG (0,0). Los comandos relativos (minúsculas: m, l, c) usan coordenadas relativas a la posición actual del cursor. Por ejemplo, 'L 50 50' dibuja una línea hasta el punto absoluto (50,50), mientras que 'l 50 50' dibuja una línea 50 unidades a la derecha y 50 unidades hacia abajo desde la posición actual.
¿Mis datos SVG se envían a algún servidor?
No. Toda la edición y renderizado ocurre 100% en tu navegador. Ningún dato se transmite a ningún servidor. Puedes verificarlo en la pestaña Network del DevTools de tu navegador.
Herramientas Relacionadas
Generador de Contraseñas
Genera contraseñas seguras y aleatorias con opciones personalizables
Probar ahora →Generador de Apodos para Juegos
Crea nombres únicos para juegos con múltiples estilos y temas
Probar ahora →Generador de Nombres de Productos
Genera nombres creativos para productos, marcas y startups
Probar ahora →