Leer una d a ojo

Un path real que llega de una herramienta de diseño es una cadena de doscientos caracteres sin espacios que a primera vista no dice nada. Pero dice bastante: el rango de los números revela la escala, la mezcla de comandos revela quién lo generó, y la estructura de subrutas revela qué piezas tiene la forma. Leerlo a ojo es una habilidad de depuración concreta, y cuando la vista no llega hay tres APIs del navegador que devuelven la geometría de verdad.

El método de lectura

Ante una d desconocida, cuatro pasadas, en este orden.

Pasada uno: cuenta las M y las Z. Cada M es una pieza. Un icono con tres M tiene tres piezas, y si tiene tres Z están las tres cerradas. Un desajuste entre el número de M y el de Z significa que hay al menos una subruta abierta, lo que en un icono relleno es casi siempre un error de exportación.

Pasada dos: mira el rango de los números. Si todos están entre 0 y 24, la forma está pensada para un viewBox de 24. Si hay valores de tres cifras y el viewBox dice 24, alguien ha pegado un icono de otra escala y falta un transform. Si hay números negativos grandes al principio, la forma sale fuera del lienzo. Esto explica el noventa por ciento de los «mi icono no se ve».

Pasada tres: identifica el alfabeto. ¿Solo M, L, H, V, Z? Geometría ortogonal, probablemente un diagrama o un icono de líneas rectas. ¿Muchas C y S? Una forma orgánica dibujada con la pluma. ¿Muchas Q y T? Casi seguro viene de una tipografía TrueType. ¿Aparece A? Hay arcos de verdad, típico de gráficos generados por código o de esquinas redondeadas escritas a mano.

Pasada cuatro: mira el primer punto y el último de cada subruta. Si coinciden y hay Z, la pieza está cerrada dos veces (redundante, no dañino). Si coinciden y no hay Z, tienes el bug del cierre falso del que hablamos en los comandos rectos.

Un ejemplo real, formateado para poder mirarlo:

<path d="M12 2 8.5 8.5 2 12l6.5 3.5L12 22l3.5-6.5L22 12l-6.5-3.5z"/>

Una sola M, una sola z. Números entre 2 y 22, así que el viewBox es de 24. Solo M, l y z, más las repeticiones implícitas del M inicial que funcionan como L. Y ocho vértices alternando cerca y lejos del centro (12, 12). Es una estrella de cuatro puntas. No hace falta abrir nada.

Firmas de origen

Cada herramienta deja huellas reconocibles en la d, y saber leerlas te dice qué esperar del resto del fichero.

Ninguna de estas pistas es definitiva, pero juntas orientan la búsqueda. Si ves clases st0 sabes que el fichero traerá un <style> global que va a colisionar con el de los demás iconos que inlines, y eso lo tratamos en qué produce Figma e Illustrator.

Los cuatro fallos que se ven sin herramientas

Uno: fill sin declarar en una ruta abierta. Una d sin Z que en el elemento no lleva fill="none" se rellena de negro. Si el icono es una línea y sale como una mancha, es esto.

Dos: escala equivocada. Números fuera del rango del viewBox. Se arregla con el viewBox correcto, no con un transform="scale()" a ojo; el transform escala también el stroke-width y estropea el grosor.

Tres: fill-rule incorrecta. Dos subrutas concéntricas y la forma sale maciza. Prueba evenodd antes de tocar la geometría.

Cuatro: el primer comando no es M. Una d que empieza por L o por C es inválida y el elemento no se dibuja. Ocurre cuando alguien recorta una cadena por la mitad para dividir una forma.

Hay un quinto que no se ve pero se nota: decimales excesivos. Una d con seis o siete decimales por número no es más precisa a efectos prácticos y triplica el peso. En un viewBox de 24 unidades renderizado a 24 píxeles, el tercer decimal ya está por debajo de la milésima de píxel.

Cuando la vista no llega

Tres métodos del DOM responden preguntas geométricas sin que tengas que parsear nada. Viven en SVGGeometryElement, así que funcionan sobre path, rect, circle, ellipse, line, polyline y polygon.

const p = document.querySelector('#forma');

// Cuanto mide el perimetro dibujado, en unidades de usuario
const L = p.getTotalLength();

// Que punto hay al 37 por ciento del recorrido
const { x, y } = p.getPointAtLength(0.37 * L);

// Cae este punto dentro del relleno? Y sobre el trazo?
const punto = new DOMPoint(12, 12);
p.isPointInFill(punto);
p.isPointInStroke(punto);

getTotalLength() es la herramienta para el patrón de dibujo progresivo: pones stroke-dasharray y stroke-dashoffset a la longitud total y animas el desfase hasta cero. getPointAtLength() sirve para colocar objetos a lo largo de una trayectoria a velocidad constante, y también para el muestreo que permite comparar dos formas sin analizar sus comandos.

isPointInFill() e isPointInStroke() son la puerta al hit testing manual. Sirven para preguntar si el cursor está dentro de una forma sin depender de los eventos del DOM, que es justo lo que necesitas cuando dibujas la forma en un lienzo y solo mantienes el path como modelo.

Una precisión importante sobre getTotalLength(): la especificación no obliga a un método exacto. Los motores muestrean la curva y suman segmentos, así que el valor tiene un error de aproximación y puede diferir ligeramente entre navegadores. Para animación es irrelevante. Para una medida que vayas a mostrar al usuario, no uses este método: calcula la longitud tú con la precisión que necesites.