Editor de trazados SVG
SVG Path Editor
Convierte los datos de un trazado entre comandos absolutos y relativos, lo desplaza, escala, gira e invierte, y muestra su caja envolvente con vista previa.
Lee un atributo `d` y te devuelve uno transformado: absoluto o relativo, movido, escalado, rotado alrededor del centro de la caja delimitadora, invertido, y redondeado al número de decimales que elijas. Dibuja el resultado a través de Path2D para que el navegador haga los cálculos de los arcos igual que lo haría un renderizador de SVG, e informa de la caja delimitadora y de un viewBox que puedes pegar.
El atributo d de un path
Vista previa
El rectángulo de línea discontinua es la caja delimitadora y el punto rojo es el punto de inicio. El relleno usa la regla nonzero.
Resultado
Comandos
18
Subtrazados
3
Números
32
Bytes
113 → 97
Caja delimitadora
x 2,00 y 2,00 w 20,00 h 20,00
viewBox
2.00 2.00 20.00 20.00
Qué hace
- · Se lee con el mismo analizador que el optimizador de SVG, así que la notación comprimida como
1.5.5y las banderas de los arcos se leen bien. Convierte entre absoluto y relativo, redondea decimales, mueve, escala y rota alrededor del centro de la caja delimitadora, invierte la dirección y calcula la caja delimitadora. - · Al rotar,
HyVpasan a serL, y los radios de un arco, su rotación sobre el eje x y su bandera de barrido se recalculan con las fórmulas del apéndice F.6 de SVG 1.1. La caja delimitadora sale de los extremos reales de cada curva, no de sus puntos de control. - · No simplifica curvas. Eso cambia la forma, y elegir la tolerancia es una decisión humana.
Para encoger un archivo entero, el optimizador de SVG; para ajustar cómo acelera una curva, el editor de curvas de aceleración.
Cómo se usa
Pega el atributo d
Solo el valor, sin el `<path>` que lo rodea. La notación comprimida vale —`1.5.5` como dos números, banderas de arco sin separador—, porque el analizador es el del optimizador de SVG y maneja esos casos.
Aplica la transformación que necesites
Mover, escalar y rotar se aplican a la geometría en sí, así que lo que sale no necesita ningún atributo `transform`. La rotación es alrededor del centro de la caja delimitadora, que es lo que quieres para un icono y no lo que hace un `rotate()` a secas.
Elige absoluto o relativo, y la precisión
Los comandos relativos suelen ser más cortos, lo que importa para un icono en línea. La precisión es la palanca real de tamaño: tres decimales sobran para una cuadrícula de icono de 24 unidades, y bajar de seis a dos a menudo reduce la cadena a la mitad. Mira el contador de bytes mientras la mueves.
Invierte la dirección si un relleno se ve mal
El punto rojo marca el punto de inicio, así que el efecto de una inversión es visible. La dirección es lo que decide si un subtrazado interior es un agujero bajo la regla nonzero, y también es lo que sigue una animación de stroke-dash.
Toma el trazado, o el viewBox
La caja de salida tiene el valor `d` y un elemento `<path>` listo. El panel de estadísticas tiene la caja delimitadora como cadena de viewBox, que es la forma más rápida de hacer que un icono llene su marco exactamente.
Preguntas frecuentes
¿Por qué no simplifica la curva?
Porque simplificar cambia la forma, y cuánto cambio es aceptable es un juicio sobre este dibujo concreto que una herramienta no puede hacer. Todo algoritmo de reducción de puntos toma una tolerancia, y el lugar honesto para esa decisión es un editor vectorial donde puedas ver lo que cuesta. Redondear decimales es la palanca de tamaño segura, y está aquí.
¿Qué pasa con los arcos cuando roto o escalo?
Siguen siendo arcos. Los radios, la rotación del eje x y la bandera de barrido se recalculan con las fórmulas del apéndice F.6 de SVG 1.1, que es lo que mantiene correctos los ejes de una elipse bajo una escala no uniforme. `H` y `V` se convierten en `L` bajo rotación, porque una línea horizontal no se mantiene horizontal.
¿La caja delimitadora sale de los puntos de control?
No, de los extremos reales de cada curva. Un punto de control de una cúbica suele quedar fuera de la curva, así que una caja de puntos de control es demasiado grande, a menudo de forma notable, que es exactamente cuando importa, porque la caja es lo que pegas como viewBox.
Solo maneja un trazado. ¿Y un archivo entero?
Esto trabaja sobre un único valor `d` por diseño: es el nivel en el que las transformaciones y la inversión tienen sentido. Para un documento entero, el optimizador de SVG reescribe cada trazado que contiene, y el editor de SVG lee la estructura a su alrededor.
Puede recibir de
Optimizador de SVG
SVG Optimiser
Quita los restos que deja el editor, funde las transformaciones y redondea la precisión de los trazados, mostrando el resultado lado a lado.
Imagen a SVG
Image to SVG
Traza un mapa de bits como trayectorias SVG, afinado para logos y dibujo de línea antes que para fotografías.
Editor de curvas de aceleración
Easing Curve Editor
Ajusta una curva cubic-bezier o de resorte contra una vista previa animada y emite la función de tiempo en CSS.
Editor y explicador de SVG
SVG Editor and Explainer
Edita un SVG junto a su render en vivo y explica el archivo: viewBox y escalado, transformaciones, cada comando de trazado, el color heredado, los bytes desperdiciados y qué se rompe dentro de un <img>, de un data URI o en línea.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Editor de curvas de aceleración
Easing Curve Editor
Ajusta una curva cubic-bezier o de resorte contra una vista previa animada y emite la función de tiempo en CSS.
Imagen a SVG
Image to SVG
Traza un mapa de bits como trayectorias SVG, afinado para logos y dibujo de línea antes que para fotografías.
Optimizador de SVG
SVG Optimiser
Quita los restos que deja el editor, funde las transformaciones y redondea la precisión de los trazados, mostrando el resultado lado a lado.
SVG a PNG
SVG to PNG
Renderiza un SVG a PNG, JPEG o WebP en cualquier factor de escala, con fondo transparente o relleno.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.