También disponible en: English · Português · Français · العربية
Path de SVG: analiza el atributo d comando a comando
Pega los datos de una ruta y obtén una vista previa, el desglose comando a comando, el rectángulo real y todos los comandos relativos resueltos.
¿Qué son los datos de una ruta SVG?
Una ruta de SVG es una única cadena larga dentro de un atributo d: una letra, unos números, otra letra, más números. M mueve el lápiz, L traza una línea, C dibuja una curva cúbica, A dibuja un trozo de elipse y Z cierra la figura. Las mayúsculas usan coordenadas absolutas y las minúsculas, desplazamientos desde donde ya está el lápiz. Todo el arte vectorial que ves —un juego de iconos, un mapa, un logotipo— es esa cadena.
Está pensada para escribirse de forma escueta, y la gramática lleva esa idea mucho más lejos de lo que casi nadie imagina. Los separadores entre números son opcionales siempre que dos valores no puedan confundirse: un número puede empezar por punto, así que una ruta puede poner M.5.5 y significar dos coordenadas, y un signo abre número nuevo, con lo que 1-2 también son dos. Por eso un SVG minificado es ilegible y sigue siendo del todo válido.
Esta página analiza esa cadena tal como la define la gramática y te enseña lo que sale: cada comando con sus argumentos y el punto en que deja el lápiz, una vista previa dibujada por tu propio navegador, el rectángulo delimitador de la curva de verdad y la ruta entera reescrita con los comandos relativos ya resueltos.
Cómo usarlo
- Pega el atributo d. Solo los datos de la ruta, sin el marcado que la rodea. Los botones de ejemplo cubren una figura redondeada, las banderas del arco, una ruta deliberadamente escueta y otra con un fallo real.
- Lee la tabla de comandos. Una fila por comando, con sus argumentos y la coordenada en la que deja el lápiz. Una fila con la letra entre paréntesis no tenía letra propia: es una repetición de la de arriba.
- Mira el rectángulo y la forma absoluta. El rectángulo sale de la curva y no de sus puntos de control, así que es el que la figura ocupa realmente. Debajo, la misma ruta con todos los comandos relativos resueltos, lista para copiar.
Las banderas del arco son el rincón más raro del formato
Un arco elíptico lleva siete valores: dos radios, una rotación, dos banderas y el punto donde acabar. Las banderas eligen cuál de los cuatro arcos posibles entre dos puntos querías: el grande o el pequeño, en un sentido o en el otro. Y en la gramática no son números. Son literalmente los caracteres 0 y 1, el único sitio de toda la sintaxis de rutas donde un valor es un carácter y no un número.
Eso tiene una consecuencia que nadie espera. Como una bandera ocupa exactamente un carácter, no puede pegarse con lo que venga detrás, así que los separadores alrededor de las dos banderas son opcionales. Escribir un arco como a5 5 0 0110 10 es del todo legal: radios 5 y 5, sin rotación, luego bandera 0, bandera 1, y el punto final 10 10. Parece una errata. Un analizador que parta los argumentos por espacios y lea siete números ve 0110 y produce un disparate. De tres analizadores publicados que se comprobaron al construir esta página, dos lo resuelven bien y el tercero lo rechaza como malformado.
La regla corta también en el otro sentido. Como una bandera es un carácter y no un número, 0.0 y +0 no son banderas: ambos son números perfectamente correctos y ambos se aceptan en cualquier otro sitio de la misma ruta, incluida la propia rotación del arco. Ponlos donde va una bandera y la ruta queda malformada. Los mismos tres analizadores también se dividen aquí: dos los rechazan, y el que rechazaba la forma legal acepta esta ilegal y la convierte calladamente en bandera 0.
Hay un separador del arco que sí es obligatorio, y es el que va después de la rotación. Esa asimetría tiene su razón: la rotación es un número, y un número es voraz. Sin un espacio se tragaría los dígitos de las banderas, que es exactamente lo que pasa si lo pruebas: a5 5 00110 10 lee la rotación como ciento diez y luego se queda sin argumentos.
De qué está hecho de verdad el rectángulo
Lo obvio para encajar una curva es tomar los extremos de sus puntos de control, y está mal. Una curva cúbica ni siquiera pasa por sus dos puntos de control intermedios: tira hacia ellos y se queda corta. Si la encajas así te sale un rectángulo demasiado grande, a veces bastante.
El de aquí sale de la curva. Los puntos más pronunciados y más planos de una cúbica están donde su derivada vale cero, y esa derivada es una cuadrática con como mucho dos raíces por eje; la derivada de una curva cuadrática es lineal y tiene una. Un arco gira donde gira la elipse paramétrica, que son dos ángulos que hay que contrastar con el trozo de elipse que se está dibujando de verdad. Todo eso se calcula en forma cerrada y luego se comprueba, en la batería de pruebas, contra recorrer la misma curva en dos mil pasos y quedarse con el mínimo y el máximo. Forma cerrada contra fuerza bruta es una comprobación de verdad: coincidir con una segunda copia del mismo álgebra no demostraría nada.
Un detalle que al principio parece un fallo: un comando de movimiento levanta el lápiz, así que el punto del que salía no forma parte de la figura. Incluirlo mete el origen en el rectángulo de toda ruta que empiece en otro sitio, que es justo el error que tenía esta página hasta que lo cazó la comprobación por muestreo.
Lo que esta herramienta no hace
No edita la ruta. No hay manejadores que arrastrar ni simplificación, porque aquí la idea es leer lo que dice una ruta y no crear una nueva. La conversión a absoluto es la única reescritura que ofrece, y es deliberadamente sin pérdida: nada de redondeos más allá de seis decimales, ni de fusionar comandos, ni de reordenarlos.
No aplica transformaciones, trazos ni marcadores. Un atributo transform en el elemento, o en cualquier ancestro, mueve el conjunto entero; un trazo lo ensancha media anchura de trazo en todas direcciones, y más en una esquina afilada. El rectángulo de aquí es la geometría de la ruta en sí, que suele ser lo que quiere un viewBox y no es lo que ocupa la tinta al dibujarse.
También se detiene en lo primero que no puede analizar. Es una decisión y no una limitación del formato: la especificación dice que un renderizador debe dibujar la ruta hasta el error y no más allá, así que una ruta rota no queda en blanco, queda truncada. Ver dónde se paró el análisis suele bastar para encontrar el fallo, y se indica la posición del carácter.
¿Por qué es gratis?
Analizar una cadena y resolver una ecuación de segundo grado son cosas que tu navegador hace en microsegundos. No hay servidor de por medio, así que no hay nada que facturar ni cuenta que crear.
No se sube nada. La ruta que pegas se queda en esta pestaña, y la vista previa la dibuja tu propio navegador a partir de esa misma cadena.