Métricas SVG de CreepJS: campos y límites

Las métricas de texto SVG proceden de APIs SVG y DOM del navegador, no son una etiqueta de dispositivo. BotBrowser permite configurar fuentes asociadas al perfil para pruebas de compatibilidad, pero este análisis de código no ejecuta CreepJS ni promete medidas SVG idénticas entre plataformas.

TL;DR

El colector SVG de CreepJS crea una muestra de texto fuera de pantalla, reduce un cuadro delimitador SVG, conserva un emoji por cada cadena distinta de getComputedTextLength() y compara medidas antes de alternar la clase shift-svg, mientras está presente y después de quitarla. Sus campos describen medidas y ramas de esa implementación fijada. No identifican un sistema operativo, un dispositivo ni a una persona. En particular, svgrectSystemSum es una suma con pérdida sobre cadenas de longitud distintas; el código fuente no la define como una métrica del sistema.

Contents

• Configuración y alcance del colector
• Origen de los siete campos del informe
• Rutas ausentes, bloqueadas y de error
• Geometría SVG, Canvas y DOM por separado
• Registro mínimo de interpretación
• Capacidad y límites de BotBrowser
• Conclusión práctica

Configuración y alcance del colector

BotBrowser documenta paquetes de fuentes asociados al perfil y controles de reserva, pero eso no convierte un resultado de CreepJS en un identificador de sistema operativo o dispositivo. La pregunta útil es más concreta: ¿qué operaciones del src/svg/index.ts fijado alimentan los campos que su renderizador llama SVGRect?

El colector comienza combinando varias señales de inconsistencia ya calculadas, entre ellas propiedades de SVGRect, SVGRectElement.getBBox() y tres métodos de SVGTextContentElement. Después elige una referencia de documento, añade un div e inserta un SVG con un nodo <text> por cada elemento de EMOJIS. La muestra se coloca fuera de pantalla; los nodos usan una familia configurada y tamaño 200px. El colector añade y luego quita shift-svg entre dos lecturas. Los selectores CSS de la clase base y la clase alternada especifican la misma escala; el segundo añade !important, así que estas declaraciones no establecen un cambio de escala numérico.

Son hechos del código, no resultados medidos. El código no demuestra que todos los navegadores representen la muestra, que todas las fuentes configuradas estén instaladas ni que los valores resultantes sean únicos de una plataforma. Por eso conviene una tabla de procedencia, no una etiqueta de sistema operativo: cada fila conecta un campo con una operación y con la información que se pierde.

El colector también espera a queueEvent(timer) antes y durante la medición. Eso describe el flujo de esta revisión fijada; no prueba que se haya generado un informe en una sesión de navegador activa. Aquí no se afirma haber ejecutado una página de CreepJS ni haber medido un navegador.

Origen de los siete campos del informe

El objeto data devuelto contiene siete propiedades. El renderizador divide por 10,000 los valores mostrados como bBox, char, subs y text, y convierte las entradas falsy, incluido cero, en BLOCKED. Un svgrectSystemSum falsy se muestra como UNSUPPORTED. La vista de emojiSet usa formatEmojiSet(); su título de ayuda incluye un hash breve y la lista de representantes.

Campo	Operación fuente	Transformación o límite
bBox	svgBox.getBBox()	reduceToObject() conserva propiedades que no son funciones; getObjectSum() suma sus valores absolutos.
extentOfChar	svgElems[0].getExtentOfChar(EMOJIS[0])	Se pasa el primer emoji configurado. El código por sí solo no justifica decir que el valor sea la extensión del emoji completo.
subStringLength	svgElems[0].getSubStringLength(0, 10)	Se consulta el primer nodo con inicio 0 y longitud 10; es la forma de la llamada, no un resultado entre navegadores.
computedTextLength	svgElems[0].getComputedTextLength()	Se guarda una medida del primer nodo por separado del conjunto de representantes.
emojiSet	getComputedTextLength() de cada nodo	Conserva un emoji por cada cadena de longitud convertida a texto que aún no aparece.
svgrectSystemSum	El conjunto pattern de esas cadenas	Suma partes numéricas de las cadenas distintas y multiplica el total por 0.00001.
lied	Señales previas y predicado de desplazamiento	Parte de señales seleccionadas y puede pasar a true si difiere la comparación de desplazamiento/restauración.

bBox no es una serialización del rectángulo. reduceToObject() enumera claves de nativeObj.__proto__, descarta miembros que son métodos y devuelve las propiedades restantes. Luego getObjectSum() suma el valor absoluto de cada propiedad. Por tanto, no se deben reconstruir x, y, width y height como si el informe hubiera conservado una tupla rectangular. El resultado es un escalar derivado de un objeto de tipo rectángulo.

Los nombres de método también distinguen las entradas. getBBox() proporciona el cuadro delimitador del elemento gráfico SVG. getComputedTextLength() devuelve una longitud del contenido de texto. getSubStringLength() recibe un par parecido a un rango de índices. El código llama a getExtentOfChar() con la cadena EMOJIS[0]. Sin establecer por separado cómo convierte ese argumento la API, hay que conservar la llamada literal y no atribuir a su resultado el significado de la extensión completa del emoji.

El mapa campo-operación es el artefacto principal porque presenta juntos la forma fuente, la transformación y el límite. Una etiqueta genérica como «huella SVG» borraría esas diferencias e implicaría más de lo que demuestra el código.

Por qué emojiSet pierde multiplicidad

El colector crea pattern = new Set() y una lista de elementos .svgrect-emoji. Para cada elemento con índice i, lee getComputedTextLength(), convierte el resultado a cadena y comprueba si esa cadena ya está en pattern. Solo si es nueva se añade a pattern, y solo entonces se añade EMOJIS[i] a emojiSet.

La secuencia importa. Si varios emoji producen la misma cadena de longitud, emojiSet conserva el primero asociado a ese valor. No conserva todos los emoji de entrada, un recuento de frecuencias, un nombre de archivo de fuente, una cadena de reserva ni una lista de glifos compatibles. Un conjunto de representantes no es un inventario.

Por ejemplo, una secuencia puramente ilustrativa de cadenas "42", "42" y "57" deja dos entradas en pattern, no tres. Los emoji elegidos serían el primero asociado a "42" y el primero asociado a "57". Son números para una operación aritmética de ejemplo, no una salida de CreepJS. Al desaparecer las longitudes repetidas, la transformación no permite reconstruir cuántos emoji de entrada compartían un valor.

La política de representantes es distinta del enfoque de límites de las métricas emoji de CreepJS, que sigue tuplas Canvas TextMetrics y su propio agrupamiento. El resultado tampoco es un inventario de fuentes: document.fonts.check() o la lista de fuentes de un perfil responde a otra pregunta que la longitud calculada de un nodo SVG. La documentación de fuentes de BotBrowser describe paquetes, reservas y controles de representación; no convierte una longitud de texto medida en una lista de archivos instalados.

La operación Set elimina las frecuencias. Si diez entradas comparten una longitud y otra entrada difiere, la suma posterior ve dos cadenas únicas. No puede saber si el primer grupo contenía dos emoji o doscientos. Llamar a emojiSet recuento, porcentaje de cobertura o lista exhaustiva de compatibilidad contradiría el flujo de datos.

Qué calcula y descarta svgrectSystemSum

El nombre de la variable contiene System, pero la implementación define un cálculo más limitado. Para cada cadena de pattern, el código la divide por comas, convierte cada parte con el operador unario +, sustituye por 0 un resultado numérico falso y suma las partes. Después suma los totales por cadena y multiplica el total final por 0.00001.

Expresada como lógica fuente, la operación es:

sum(pattern.map(s => sum(s.split(',').map(part => +part || 0)))) * 0.00001

La entrada son cadenas distintas de getComputedTextLength(), no todos los nodos originales ni una tupla geométrica de siete propiedades. Como las cadenas repetidas se eliminaron antes, la suma ya es con pérdida antes de dividir por comas. El factor escala la magnitud; no restaura la estructura omitida ni identifica una plataforma.

Considera el conjunto explícitamente hipotético {"42", "57"}. Sus dos partes numéricas suman 99; al multiplicar por 0.00001 se obtiene 0.00099. Si diez nodos hubieran producido "42" y uno "57", el mismo conjunto distinto daría el mismo cálculo. Es un cálculo ilustrativo, no una salida del navegador ni una muestra de CreepJS.

El cálculo tampoco conserva qué API devolvió cada valor, el índice original del emoji, el número de duplicados ni una explicación por fuente. No se debe renombrar en el texto como «puntuación del sistema», «suma de SO» o «huella de fuente». La formulación defendible es «suma escalada de partes numéricas de longitudes de texto convertidas a cadena y distintas, según esta fuente fijada».

La diferencia con Canvas importa. La guía de medición de texto cubre measureText() de Canvas y TextMetrics, otra API con otras dimensiones devueltas. El colector SVG no repite esos campos bajo otro nombre. Del mismo modo, las comprobaciones de coherencia ClientRects tratan fragmentos geométricos de Element y Range, no longitudes de texto SVG ni este conjunto de representantes.

La comprobación de desplazamiento y el estado lied

Después de crear el conjunto de representantes, el colector selecciona svgElems[0] y lee su getComputedTextLength() inicial. Añade shift-svg, vuelve a leer el valor, quita la clase y lee el valor restaurado. La comparación es:

initial - shifted != unshifted - shifted;

Si la expresión es verdadera, el colector asigna lied = true y llama a documentLie('SVGTextContentElement.getComputedTextLength', 'failed unshift calculation'). Esto describe la rama que toma la fuente. No define un invariante universal de navegador, demuestra por qué difirieron dos números ni acredita que un servicio externo clasifique el entorno como automatizado.

El campo lied no se inicializa solo con esta prueba. Antes de ella se deriva de entradas seleccionadas de lieProps, incluidas propiedades SVGRect, getBBox, getExtentOfChar, getSubStringLength y getComputedTextLength. Por ello, false solo significa que el predicado acumulado permaneció falso para las entradas y la ruta representadas por esta implementación. No certifica que todo comportamiento SVG sea nativo, no modificado o idéntico entre plataformas.

Una tabla de estados separa observación de explicación:

Estado visible en el código	Qué establece el código	Qué no establece
Los valores inicial, desplazado y restaurado satisfacen la comparación	Este predicado no activó lied en esa ruta.	Un perfil normal, un SO concreto o un navegador limpio.
La comparación difiere	El colector asigna lied y registra la entrada documentLie nombrada.	La causa, la intención o una decisión posterior.
Una entrada previa seleccionada de lieProps es verdadera	El valor inicial de lied ya puede ser verdadero.	Qué cambio específico lo causó sin conservar la evidencia pertinente.
La llamada lanza una excepción	La captura registra passed: false y devuelve sin el objeto de datos.	Que SVG no sea compatible, que una política lo bloqueara o una causa concreta.

La tabla ayuda a leer el código; no es un resultado de prueba. Evita convertir el nombre de una rama en una conclusión causal.

Rutas ausentes, bloqueadas y de error

El creador del informe tiene una rama distinta para !fp.svg. En ella, la tarjeta muestra el título SVGRect y marcadores bloqueados para bBox, char, subs, text y el bloque de resumen. La pantalla no explica por qué falta fp.svg. Un marcador bloqueado no debe reescribirse como «SVG desactivado», «fuente no disponible» o «bot detectado» sin evidencia independiente.

La recolección también está dentro de try/catch. Si hay una excepción, la fuente llama a logTestResult({ test: 'svg', passed: false }), pasa el error a captureError y devuelve. Esto difiere de un objeto data devuelto correctamente cuyo lied sea true, y también de que svgHTML() reciba un objeto sin propiedad svg. Un registro de interpretación debe conservar esas ramas en lugar de reducir tres observaciones a una etiqueta «falló».

Para una nota de soporte o investigación basta el mínimo necesario: revisión fijada, nombre del campo, si el informe muestra un valor o marcador y qué rama se está comentando. No guardes perfiles completos, identificadores de usuario sin procesar ni todo el resultado de CreepJS cuando basta una nota por campo. Un hash o etiqueta corta sigue siendo dato y requiere un propósito de retención.

Si falta un campo, registra primero «no aparece en esta salida visible». Después enumera rutas del código como hipótesis, por ejemplo la rama de pantalla !fp.svg o la captura de error, y márcalas como no confirmadas salvo que exista evidencia de ejecución. El código fijado demuestra que esas ramas existen; no revela cuál ocurrió en un informe cuya ruta de ejecución no se ha trazado.

Geometría SVG, Canvas y DOM por separado

Tres temas cercanos usan valores geométricos, pero responden preguntas distintas. getBBox() y los métodos SVGTextContentElement operan sobre gráficos o texto SVG. Canvas measureText() devuelve un objeto TextMetrics para texto de lienzo. CSSOM getClientRects() devuelve rectángulos de fragmentos representados de un elemento o rango. Los nombres parecidos no hacen que los datos sean intercambiables.

El límite de API indica qué inspeccionar. Para longitud de texto SVG, sigue el elemento y la llamada exacta, como getComputedTextLength() en src/svg/index.ts. Para Canvas, registra la entrada de measureText() y propiedades como el ancho o los límites reales. Para geometría CSSOM, conserva separados los fragmentos de elemento o rango y su reducción. El artículo de coherencia ClientRects modela ese problema; no debe usarse para explicar svgrectSystemSum.

La separación también ayuda con preguntas de producto. Las fuentes de un perfil pueden influir en la representación, pero un campo de un colector no revela qué archivo aportó un glifo, si hubo reserva ni si dos longitudes distintas proceden de fuentes diferentes. Eso requiere evidencia de la ruta pertinente de carga y representación, no solo la salida de CreepJS.

Registro mínimo de interpretación

Esta plantilla mantiene la afirmación unida a la evidencia sin convertir la nota en un perfil de usuario:

collector: CreepJS src/svg/index.ts
source_revision: 10aa6724cd33a1015db1574211890518cd04f0cc
report_field: emojiSet | svgrectSystemSum | lied | other named field
source_operation: exact method or branch
display_state: value shown | blocked placeholder | absent | error recorded
claim: source-bounded description of what was observed
not_established: OS, device, person, cause, or external verdict
retention: reason and deletion date

Es una plantilla de documentación, no un generador de informes. Omite deliberadamente muestras numéricas, perfiles del navegador y listas de emoji por usuario. Si una comparación necesita un valor, guarda el mínimo necesario y etiqueta su origen; no indiques que viene de una ejecución nueva sin adjuntar un registro real.

Al comparar dos notas autorizadas, alinea primero revisión, campo, rama visible y transformación. Comparar cadenas de emojiSet no equivale a comparar todos los emoji de entrada. Comparar svgrectSystemSum no compara la distribución original de longitudes porque el Set eliminó multiplicidad. Comparar lied compara el predicado del colector; no demuestra que un entorno sea genuino y otro no.

Capacidad y límites de BotBrowser

BotBrowser documenta paquetes de fuentes asociados a perfiles, comportamiento de reserva y controles de representación multiplataforma. Estas capacidades pueden ayudar en una comparación autorizada de compatibilidad donde la pregunta sea cómo se comporta una aplicación con una configuración documentada. La documentación pública de fuentes no garantiza medidas idénticas de SVGTextContentElement para todas las plataformas, no proporciona una salida del colector SVG ni define qué significa svgrectSystemSum en CreepJS.

El límite es importante: la configuración del perfil no convierte este análisis de código en un resultado de ejecución ni en una afirmación sobre un dispositivo concreto. No se afirma que BotBrowser ejecute CreepJS, cambie un resultado SVG, suprima un informe o garantice igualdad multiplataforma. Para una investigación real de compatibilidad, compara una muestra de aplicación identificada bajo configuraciones documentadas y conserva solo la evidencia necesaria para responder a esa pregunta.

Preguntas frecuentes

¿svgrectSystemSum identifica un sistema operativo?

No. El código fijado lo calcula con partes numéricas de cadenas de longitud distintas y escala el total por 0.00001. No define una etiqueta de SO ni un clasificador reversible.

¿emojiSet es la lista completa de emoji compatibles?

No. El colector conserva el primer emoji por cada cadena distinta de getComputedTextLength(). El Set elimina valores repetidos y el código no registra un recuento ni una correspondencia con archivos de fuente.

¿extentOfChar mide el emoji completo?

La fuente pasa EMOJIS[0] como argumento del método. Esta revisión no demuestra que el valor represente el emoji completo, así que no se afirma esa interpretación.

¿lied: false demuestra que las medidas son nativas?

No. Solo significa que el predicado acumulado no pasó a verdadero en la ruta representada. No certifica en general el comportamiento SVG ni cada llamada a la API.

¿Qué significa un marcador bloqueado?

El renderizador muestra marcadores cuando falta fp.svg. Ese estado visible no explica la ausencia. La captura de errores del colector es otra ruta y no debe inferirse sin evidencia de ejecución.

Fuentes

• Colector SVG fijado de CreepJS, src/svg/index.ts
• MDN: SVGGraphicsElement.getBBox()
• MDN: SVGTextContentElement.getComputedTextLength()
• MDN: SVGTextContentElement.getExtentOfChar()
• MDN: SVGTextContentElement.getSubStringLength()
• Documentación de fuentes de BotBrowser

Conclusión práctica

Lee la tarjeta SVG de CreepJS como una secuencia de operaciones definidas en el código: reducción del cuadro delimitador, medición de texto por nodo de la muestra, selección del primer representante por cadena única, agregado escalado con pérdida y predicado de desplazamiento/restauración. Mantén bBox, extentOfChar, subStringLength, computedTextLength, emojiSet, svgrectSystemSum y lied unidos a sus transformaciones. Trata el marcador ausente y la excepción como estados diferentes. Ningún campo por sí solo establece sistema operativo, dispositivo, persona, inventario de fuentes ni veredicto externo.