Editor de rutas SVG
Pega el atributo d de cualquier ruta SVG para verla dibujada con cada punto y manejador Bézier. Arrastra puntos, edita los comandos como números, convierte entre absoluto y relativo, escala o mueve toda la ruta y copia un resultado minificado. Todo se ejecuta en tu navegador.
Última actualización:
Comandos 0
Haz clic en una letra para cambiar entre absoluto / relativo. Los comandos nuevos se insertan después del seleccionado.
Transformar
Salida
Cómo usar Editor de rutas SVG
- Pega tus datos de ruta (el valor de d="…") en el cuadro, o elige un ejemplo como Corazón o Bocadillo.
- Arrastra los puntos en el lienzo: los puntos redondos son puntos finales y los cuadrados son puntos de control Bézier. Usa la rueda para hacer zoom y arrastra el fondo para desplazarte.
- Ajusta los números en la lista de comandos. Haz clic en la letra de un comando para cambiarlo entre absoluto (mayúscula) y relativo (minúscula).
- Transforma la ruta con Mover y Escalar, o convierte toda la ruta a comandos absolutos o relativos.
- Pulsa Minificar para obtener la cadena d equivalente más corta y luego cópiala o descarga un archivo SVG listo.
Referencia de comandos de ruta SVG
Cada comando es una letra seguida de sus números. La mayúscula indica coordenadas absolutas y la minúscula, coordenadas relativas al punto actual. Una letra puede ir seguida de varios grupos de números; el comando se repite entonces (después de M, los pares adicionales se convierten en comandos de línea L).
| Comando | Parámetros | Qué dibuja |
|---|---|---|
M / m | x y | Mueve el lápiz sin dibujar e inicia una nueva subruta |
L / l | x y | Línea recta hasta el punto |
H / h | x | Línea horizontal (solo cambia x) |
V / v | y | Línea vertical (solo cambia y) |
C / c | x1 y1 x2 y2 x y | Curva Bézier cúbica con dos puntos de control |
S / s | x2 y2 x y | Cúbica suave: el primer punto de control refleja el segundo de la curva anterior |
Q / q | x1 y1 x y | Curva Bézier cuadrática con un punto de control |
T / t | x y | Cuadrática suave: el punto de control refleja el anterior |
A / a | rx ry rotation large-arc sweep x y | Arco elíptico hasta el punto; los dos indicadores (0 o 1) eligen cuál de los cuatro arcos posibles se dibuja |
Z / z | ninguno | Cierra la subruta con una línea recta de vuelta a su punto inicial |
Cómo trata el editor los comandos absolutos y relativos
Cuando arrastras un punto o cambias un solo comando entre absoluto y relativo, el editor primero convierte toda la ruta a coordenadas absolutas, aplica el cambio y luego vuelve a escribir cada comando en su forma original. Así el resto de la forma se queda exactamente donde estaba, aunque los comandos posteriores sean relativos. En cambio, al escribir un número en la lista de comandos se edita ese valor sin más, por lo que los comandos relativos siguientes se mueven con él, igual que en un editor de texto.
Al arrastrar un punto final también se mueven los manejadores Bézier unidos a él, de modo que las curvas mantienen su forma alrededor del punto movido. Las flechas del teclado desplazan el punto seleccionado 1 unidad (10 con Shift, o el paso de ajuste).
Qué hace el minificador
- Redondea cada coordenada absoluta al número de decimales elegido y luego calcula los valores relativos a partir de las posiciones redondeadas, para que los errores de redondeo nunca se sumen.
- Convierte los comandos L horizontales y verticales en las formas más cortas H y V.
- Escribe cada comando en la forma (absoluta o relativa) que sea más corta.
- Elimina letras de comando repetidas, ceros iniciales (
0.5pasa a.5) y todos los espacios que un signo menos o un segundo punto decimal hacen innecesarios, p. ej.l-1.45-1.32o0 .5.5.
En iconos dibujados en una cuadrícula de 24×24, 2 decimales suelen ser imperceptibles; en ilustraciones grandes, 1 o incluso 0 decimales pueden bastar.
Preguntas frecuentes
¿Qué es el atributo d de una ruta SVG?
El atributo d contiene los datos de la ruta: una lista de comandos, cada uno formado por una letra seguida de números. M mueve el lápiz, L, H y V dibujan líneas rectas, C y S dibujan curvas Bézier cúbicas, Q y T dibujan curvas cuadráticas, A dibuja un arco elíptico y Z cierra la forma volviendo a su punto inicial.
¿Cuál es la diferencia entre comandos en mayúscula y en minúscula?
Los comandos en mayúscula usan coordenadas absolutas medidas desde el origen del sistema de coordenadas SVG. Los comandos en minúscula son relativos: sus números son desplazamientos desde la posición actual del lápiz. Ambos dibujan la misma forma; las rutas relativas suelen ser más cortas y más fáciles de mover.
¿Cómo escalo una ruta SVG?
Introduce un factor de escala como 2 o 0.5 y pulsa Escalar. El editor multiplica cada coordenada y radio de arco; si escalas con factores X e Y distintos, la forma se estira, y un factor negativo la refleja (el indicador de barrido del arco se invierte automáticamente). También puedes escalar respecto al centro de la ruta en lugar del origen.
¿La ruta minificada tiene exactamente la misma forma?
Al minificar se redondean las coordenadas al número de decimales que elijas, por lo que los puntos pueden moverse como máximo la mitad del último decimal. Los valores relativos se calculan a partir de las posiciones redondeadas, así que los errores no se acumulan a lo largo de la ruta. Todo lo demás (eliminar espacios, ceros iniciales, letras repetidas, elegir absoluto o relativo) es sin pérdida.
¿Por qué mi ruta muestra un error?
El editor indica el primer carácter que no puede leer, por ejemplo un número que falta, un indicador de arco que no es 0 ni 1, o una ruta que no empieza por M. Corrige ese punto y el dibujo se actualiza al instante; mientras tanto, la última ruta válida permanece en pantalla.
¿Funciona con rutas de iconos y herramientas de diseño?
Sí. Las rutas exportadas por Figma, Illustrator, Inkscape y los conjuntos de iconos son datos de ruta SVG estándar. Copia el valor d del archivo SVG, pégalo aquí, edítalo y vuelve a pegarlo. Las transformaciones definidas en los grupos padre no forman parte de d y no se aplican.
¿Se sube mi SVG a algún sitio?
No. El análisis, el dibujo y la edición se hacen con JavaScript en tu navegador. Nada de lo que pegas se envía a un servidor.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.