Editor de Rutas SVG
Visualiza e inspecciona datos de rutas SVG. Analiza comandos del atributo d (M, L, C, Q, A, Z), configura viewBox, trazo y relleno.
Examples
Live Preview
8 commands parsed
Settings
Show grid lines
Parsed Commands(8 total)
| # | Cmd | Description | Parameters |
|---|---|---|---|
| 1 | M | Move to (absolute) | 50, 30 |
| 2 | C | Cubic Bézier (absolute) | 50, 20, 35, 10, 20, 20 |
| 3 | C | Cubic Bézier (absolute) | 5, 30, 5, 50, 20, 65 |
| 4 | L | Line to (absolute) | 50, 90 |
| 5 | L | Line to (absolute) | 80, 65 |
| 6 | C | Cubic Bézier (absolute) | 95, 50, 95, 30, 80, 20 |
| 7 | C | Cubic Bézier (absolute) | 65, 10, 50, 20, 50, 30 |
| 8 | Z | Close path | — |
Cómo usar Editor de Rutas SVG
- 1Pega o escribe tu atributo d de ruta SVG.
- 2Ve la ruta renderizada en la vista previa en vivo.
- 3Revisa los comandos analizados en la tabla a continuación.
- 4Ajusta la configuración de viewBox, trazo y relleno según sea necesario.
ZenovayAnalytics
Analytics pensado para fundadores.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Formateador y Validador JSON
Formatea, valida y embellece datos JSON con resaltado de sintaxis y detección de errores.Decodificador JWT
Decodifica e inspecciona tokens JWT. Consulta el encabezado, la carga útil y verifica firmas.Base64 Codificar/Decodificar
Codifica texto a Base64 o decodifica Base64 a texto. Soporta UTF-8 y datos binarios.Codificador/Decodificador de URL
Codifica o decodifica componentes de URL. Maneja caracteres especiales, cadenas de consulta y URLs completas.Preguntas frecuentes
¿Qué es un atributo d de ruta SVG?▾
El atributo d define una ruta a dibujar. Contiene una serie de comandos como M (mover a), L (línea a), C (bezier cúbica), Q (bezier cuadrática), A (arco) y Z (cerrar ruta).
¿Cuáles son todos los comandos de ruta SVG?▾
M/m (mover a), L/l (línea a), H/h (línea horizontal), V/v (línea vertical), C/c (bezier cúbica), S/s (cúbica suave), Q/q (bezier cuadrática), T/t (cuadrática suave), A/a (arco), Z/z (cerrar).
¿Cuál es la diferencia entre comandos de ruta SVG absolutos y relativos?▾
Los comandos en mayúsculas (M, L, C) usan coordenadas absolutas desde el origen. Los comandos en minúsculas (m, l, c) usan coordenadas relativas desde el punto actual.
¿Qué es el viewBox SVG?▾
El atributo viewBox define el sistema de coordenadas del SVG. Toma cuatro valores: min-x, min-y, ancho y alto. Controla cómo el contenido SVG se escala y se posiciona dentro de su contenedor.
¿Cómo puedo optimizar rutas SVG?▾
Usa comandos relativos para reducir tamaños de coordenadas, elimina precisión decimal innecesaria, combina segmentos de línea consecutivos y usa comandos abreviados (H, V, S, T) donde sea posible.