Mesures SVG de CreepJS : champs et limites

Les mesures de texte SVG proviennent des API SVG et DOM du navigateur ; elles ne forment pas une étiquette d'appareil. BotBrowser permet de configurer des polices liées au profil pour les comparaisons de compatibilité, mais cette analyse du code n'exécute pas CreepJS et ne promet pas des mesures SVG identiques entre plateformes.

TL;DR

Le collecteur SVG épinglé de CreepJS crée une fixture de texte hors écran, réduit une boîte englobante SVG, conserve un emoji pour chaque chaîne distincte de getComputedTextLength() et compare les mesures avant l'ajout de la classe shift-svg, lorsqu'elle est présente, puis après son retrait. Ses champs décrivent les mesures et branches de cette implémentation. Ils n'identifient ni système d'exploitation, ni appareil, ni personne. svgrectSystemSum est notamment une somme avec perte calculée sur des chaînes de longueur distinctes ; le code source ne la définit pas comme une métrique système.

Sommaire

• Configuration et périmètre du collecteur
• Origine des sept champs du rapport
• Branches absentes, bloquées et en erreur
• Géométries SVG, Canvas et DOM distinctes
• Relevé d'interprétation minimal
• Capacités et limites de BotBrowser
• Conclusion pratique

Configuration et périmètre du collecteur

BotBrowser documente les lots de polices associés au profil et les contrôles de repli, mais cela ne transforme pas un résultat CreepJS en identifiant de système ou d'appareil. La question utile est plus étroite : quelles opérations du src/svg/index.ts épinglé alimentent les champs appelés SVGRect par son rendu ?

Le collecteur commence par combiner plusieurs indicateurs d'incohérence déjà calculés, dont des propriétés de SVGRect, SVGRectElement.getBBox() et trois méthodes de SVGTextContentElement. Il choisit ensuite une référence de document, ajoute un div et y insère un SVG contenant un nœud <text> pour chaque élément de EMOJIS. La fixture est placée hors écran ; les nœuds utilisent une famille de polices configurée et une taille 200px. Le collecteur ajoute puis retire shift-svg entre deux lectures. Les sélecteurs CSS de base et de cette classe précisent la même échelle ; le second ajoute !important, donc ces déclarations n'établissent pas de changement d'échelle numérique.

Ce sont des faits du code, pas des mesures observées. Le code n'établit pas que tous les navigateurs rendent la fixture, que toutes les polices configurées sont installées, ni que les valeurs obtenues sont propres à une plateforme. Une table de provenance est donc plus utile qu'une étiquette de système supposée : chaque ligne relie un champ à une opération et à l'information perdue.

Le collecteur attend aussi queueEvent(timer) avant et pendant les mesures. Cela décrit le flux de cette révision épinglée ; cela ne prouve pas qu'un rapport a été généré dans une session navigateur réelle. Aucune exécution de page CreepJS ni mesure de navigateur n'est revendiquée ici.

Origine des sept champs du rapport

L'objet data renvoyé contient sept propriétés. Le rendu divise par 10,000 les valeurs affichées comme bBox, char, subs et text, et remplace les entrées falsy, dont zéro, par BLOCKED. Un svgrectSystemSum falsy s'affiche comme UNSUPPORTED. formatEmojiSet() prépare la vue d'emojiSet ; son titre d'aide contient un hash court et la liste des représentants.

Champ	Opération source	Transformation ou limite
bBox	svgBox.getBBox()	reduceToObject() conserve les propriétés non fonctionnelles ; getObjectSum() additionne leurs valeurs absolues.
extentOfChar	svgElems[0].getExtentOfChar(EMOJIS[0])	Le premier emoji configuré est passé comme argument. Le code seul ne justifie pas d'y voir l'étendue de l'emoji complet.
subStringLength	svgElems[0].getSubStringLength(0, 10)	Le premier nœud est interrogé avec le début 0 et la longueur 10 ; c'est la forme de l'appel, pas un résultat inter-navigateurs.
computedTextLength	svgElems[0].getComputedTextLength()	Une mesure du premier nœud est enregistrée séparément de l'ensemble des représentants.
emojiSet	getComputedTextLength() de chaque nœud	Un emoji est conservé pour chaque chaîne de longueur convertie en texte encore absente.
svgrectSystemSum	L'ensemble pattern de ces chaînes	Les parties numériques des chaînes distinctes sont additionnées, puis le total est multiplié par 0.00001.
lied	Indicateurs antérieurs et prédicat de décalage	La valeur part d'indicateurs choisis et peut devenir true si la comparaison décalage/restauration diffère.

bBox n'est pas une sérialisation du rectangle. reduceToObject() énumère les clés de nativeObj.__proto__, retire les membres qui sont des méthodes et renvoie les autres propriétés. getObjectSum() additionne ensuite la valeur absolue de chacune. Il ne faut donc pas reconstruire x, y, width et height comme si le rapport avait conservé un tuple rectangulaire. Le résultat est un scalaire dérivé d'un objet de type rectangle.

Les noms de méthode distinguent aussi les entrées. getBBox() fournit une boîte englobante pour l'élément graphique SVG. getComputedTextLength() fournit une longueur de contenu textuel. getSubStringLength() reçoit une paire proche d'indices de plage. Le code appelle getExtentOfChar() avec la chaîne EMOJIS[0]. Sans établir séparément la conversion de cet argument par l'API, il faut garder l'appel littéral et ne pas attribuer au résultat le sens d'une étendue complète de l'emoji.

La carte champ-opération est l'artefact central : forme source, transformation et limite restent visibles ensemble. Une étiquette générale comme « empreinte SVG » effacerait ces distinctions et affirmerait plus que le code.

Pourquoi emojiSet perd la multiplicité

Le collecteur crée pattern = new Set() et une liste des éléments .svgrect-emoji de la fixture. Pour chaque élément d'indice i, il lit getComputedTextLength(), convertit le résultat en chaîne et vérifie si cette chaîne est déjà dans pattern. La chaîne et EMOJIS[i] ne sont ajoutés qu'en cas de valeur nouvelle.

L'ordre compte. Si plusieurs emoji produisent la même chaîne de longueur, emojiSet conserve le premier associé à cette valeur. Il ne conserve pas tous les emoji d'entrée, un compte de fréquences, un nom de fichier de police, une chaîne de repli ni une liste de glyphes pris en charge. Un ensemble de représentants n'est pas un inventaire.

Par exemple, une séquence purement illustrative "42", "42", "57" laisse deux entrées dans pattern, pas trois. Les emoji choisis seraient le premier associé à "42" et le premier associé à "57". Ces nombres illustrent seulement l'opération ; ils ne sont pas une sortie CreepJS. Les longueurs répétées disparaissent, la transformation ne permet donc pas de retrouver combien d'emoji d'entrée partageaient une valeur.

Cette politique diffère de l'analyse des limites des métriques emoji de CreepJS, qui suit les tuples Canvas TextMetrics et leur propre regroupement. Le résultat n'est pas non plus un inventaire de polices : document.fonts.check() ou la liste de polices d'un profil répond à une autre question que la longueur calculée d'un nœud SVG. La documentation des polices BotBrowser décrit lots, repli et contrôles de rendu ; elle ne transforme pas une longueur mesurée en liste de fichiers installés.

L'opération Set élimine les fréquences. Si dix entrées partagent une longueur et qu'une autre diffère, la somme voit deux chaînes distinctes. Elle ne peut pas savoir si le premier groupe comptait deux ou deux cents emoji. Appeler emojiSet un compte, un pourcentage de couverture ou un inventaire exhaustif contredirait le flux de données.

Ce que calcule et écarte svgrectSystemSum

Le nom contient System, mais l'implémentation définit un calcul plus limité. Pour chaque chaîne de pattern, le code la sépare sur les virgules, convertit chaque partie avec l'opérateur unaire +, remplace par 0 une valeur numérique fausse, puis additionne les parties. Il additionne ensuite les totaux par chaîne et multiplie le total final par 0.00001.

La logique source peut s'écrire ainsi :

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

L'entrée du calcul est l'ensemble des chaînes distinctes de getComputedTextLength(), pas tous les nœuds d'origine ni un tuple géométrique à sept propriétés. Les chaînes répétées ayant déjà été supprimées, la somme a perdu de l'information avant même la séparation par virgule. Le facteur réduit la magnitude ; il ne restaure pas la structure omise et n'identifie aucune plateforme.

Considérons l'ensemble explicitement hypothétique {"42", "57"}. Ses deux parties numériques totalisent 99 ; multiplié par 0.00001, le résultat arithmétique est 0.00099. Si dix nœuds avaient produit "42" et un "57", le même ensemble distinct donnerait le même calcul. C'est une illustration, pas une sortie de navigateur ni un échantillon CreepJS.

Le calcul ne conserve pas non plus quelle API a fourni chaque valeur, l'indice d'emoji d'origine, le nombre de doublons ni une explication par police. Il ne faut pas le renommer « score système », « somme OS » ou « empreinte de police ». La formulation défendable est « somme mise à l'échelle des parties numériques de longueurs textuelles converties en chaînes distinctes, selon cette source épinglée ».

La distinction avec Canvas compte. Le guide sur la mesure du texte traite measureText() de Canvas et TextMetrics, une autre API avec d'autres dimensions renvoyées. Le collecteur SVG ne répète pas ces champs sous un autre nom. De même, les contrôles de cohérence ClientRects portent sur les fragments rectangulaires d'Element et Range, pas sur les longueurs de texte SVG ou cet ensemble de représentants.

Le test de décalage et l'état lied

Après l'ensemble de représentants, le collecteur choisit svgElems[0] et lit son getComputedTextLength() initial. Il ajoute shift-svg, relit la valeur, retire la classe et lit la valeur restaurée. La comparaison est :

initial - shifted != unshifted - shifted;

Si l'expression est vraie, le collecteur définit lied = true et appelle documentLie('SVGTextContentElement.getComputedTextLength', 'failed unshift calculation'). Cela décrit la branche du code. Cela ne définit pas un invariant universel de navigateur, ne prouve pas pourquoi deux nombres diffèrent et ne montre pas qu'un service externe classera l'environnement comme automatisé.

Le champ lied n'est pas initialisé uniquement par ce test. Avant lui, il reprend certaines entrées de lieProps, dont des propriétés de SVGRect, getBBox, getExtentOfChar, getSubStringLength et getComputedTextLength. Une valeur false signifie seulement que le prédicat accumulé est resté faux pour les entrées et la branche représentées par cette implémentation. Elle ne certifie pas que tout comportement SVG est natif, inchangé ou identique entre plateformes.

Une table d'états sépare observation et explication :

État visible dans le code	Ce que le code établit	Ce qu'il n'établit pas
Valeurs initiale, décalée et restaurée conformes à la comparaison	Ce prédicat n'a pas défini lied sur cette branche.	Un profil normal, un OS précis ou un navigateur intact.
Comparaison différente	Le collecteur définit lied et enregistre l'entrée documentLie nommée.	La cause, l'intention ou une décision ultérieure.
Une entrée lieProps antérieure choisie est vraie	La valeur initiale de lied peut déjà être vraie.	Quel changement précis l'a causée sans conserver l'élément de preuve pertinent.
L'appel lève une exception	Le catch journalise passed: false et renvoie sans objet de données.	Que SVG soit non pris en charge, bloqué par une politique ou absent pour une cause précise.

Cette table aide à lire la source ; ce n'est pas un résultat de test. Le nom d'une branche ne suffit pas pour attribuer une cause.

Branches absentes, bloquées et en erreur

Le générateur de résultat possède une branche distincte pour !fp.svg. Elle affiche le titre SVGRect et des marqueurs bloqués pour bBox, char, subs, text et le bloc récapitulatif. Cet affichage n'explique pas pourquoi fp.svg manque. Sans preuve indépendante, un marqueur bloqué ne doit pas devenir « SVG désactivé », « police absente » ou « bot détecté ».

La collecte est aussi entourée d'un try/catch. En cas d'exception, la source appelle logTestResult({ test: 'svg', passed: false }), transmet l'erreur à captureError et renvoie. C'est différent d'un objet data renvoyé correctement avec lied: true, et différent de l'appel à svgHTML() avec un objet sans propriété svg. Une fiche d'interprétation doit conserver ces branches séparées au lieu de résumer trois observations par « échec ».

Une note d'assistance ou de recherche ne devrait garder que le nécessaire : révision épinglée, nom du champ, valeur ou marqueur visible, branche examinée. Ne stockez pas des profils complets, des identifiants utilisateur bruts ou tout un rapport CreepJS si une note par champ suffit. Un hash ou une étiquette courte reste une donnée et exige un objectif de conservation.

Si un champ manque, écrivez d'abord « absent de cette sortie affichée ». Énumérez ensuite des branches de source comme hypothèses, par exemple !fp.svg ou le catch, et marquez-les non confirmées sans preuve d'exécution. La source épinglée montre que ces branches existent ; elle ne dit pas laquelle s'est produite pour un rapport dont le chemin d'exécution n'est pas tracé.

Géométries SVG, Canvas et DOM distinctes

Trois sujets proches utilisent des valeurs géométriques mais répondent à des questions différentes. getBBox() et les méthodes SVGTextContentElement opèrent sur les graphiques ou textes SVG. Canvas measureText() renvoie un objet TextMetrics pour du texte de canevas. CSSOM getClientRects() renvoie les rectangles des fragments rendus d'un élément ou d'une plage. Des noms voisins ne rendent pas les données interchangeables.

La frontière d'API indique quoi examiner. Pour la longueur de texte SVG, suivez l'élément et l'appel précis, par exemple getComputedTextLength() dans src/svg/index.ts. Pour Canvas, notez l'entrée de measureText() et des propriétés comme la largeur ou les boîtes réelles. Pour la géométrie CSSOM, gardez séparés les fragments d'élément ou de plage et leur réduction. L'article sur la cohérence ClientRects modélise ce dernier problème ; il ne faut pas l'utiliser pour expliquer svgrectSystemSum.

Cette séparation aide aussi pour les questions produit. Les polices d'un profil peuvent influencer le rendu, mais un champ du collecteur ne révèle ni le fichier qui a fourni un glyphe, ni un repli, ni l'origine de deux longueurs distinctes. Il faut une preuve de la chaîne de chargement et de rendu pertinente, pas seulement la sortie CreepJS.

Relevé d'interprétation minimal

Ce modèle relie l'affirmation à la preuve sans transformer la note en profil utilisateur :

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

Il s'agit d'un modèle documentaire, pas d'un générateur de rapport. Il omet volontairement les exemples numériques de sortie, les profils navigateur et les listes d'emoji par utilisateur. Si une comparaison exige une valeur, conservez le minimum utile en indiquant son origine ; ne prétendez pas qu'elle provient d'une nouvelle exécution sans joindre un vrai relevé.

Pour comparer deux notes autorisées, alignez d'abord révision, champ, branche d'affichage et transformation. Comparer les chaînes emojiSet n'équivaut pas à comparer tous les emoji d'entrée. Comparer svgrectSystemSum ne compare pas la distribution d'origine, car Set a supprimé la multiplicité. Comparer lied revient à comparer le prédicat du collecteur, pas à prouver qu'un environnement est authentique et l'autre non.

Capacités et limites de BotBrowser

BotBrowser documente les lots de polices associés au profil, le repli et les contrôles de rendu multiplateforme. Ces capacités peuvent servir à une comparaison autorisée de compatibilité où la question est le comportement d'une application avec une configuration documentée. La documentation publique des polices ne garantit pas des mesures SVGTextContentElement identiques sur toutes les plateformes, ne fournit pas une sortie du collecteur SVG et ne définit pas la signification de svgrectSystemSum dans CreepJS.

La limite est importante : une configuration de profil ne transforme pas cette analyse de code en résultat d'exécution ni en affirmation sur un appareil précis. L'article ne prétend pas que BotBrowser exécute CreepJS, modifie une sortie SVG, supprime un rapport ou garantit l'égalité multiplateforme. Pour une vraie étude de compatibilité, comparez une fixture applicative désignée avec des configurations documentées et ne gardez que les éléments nécessaires à la question.

FAQ

svgrectSystemSum identifie-t-il un système d'exploitation ?

Non. La source épinglée le calcule à partir de parties numériques de chaînes de longueur distinctes, puis met le total à l'échelle par 0.00001. Elle ne définit ni étiquette d'OS ni classifieur inversible.

emojiSet est-il la liste complète des emoji pris en charge ?

Non. Le collecteur conserve le premier emoji par chaîne getComputedTextLength() distincte. Set retire les répétitions et le code n'enregistre ni compte de prise en charge ni correspondance de fichiers de police.

extentOfChar mesure-t-il l'emoji complet ?

La source passe EMOJIS[0] comme argument. Cette revue ne démontre pas que la valeur représente l'emoji entier ; cette interprétation n'est donc pas faite.

lied: false prouve-t-il que les mesures sont natives ?

Non. Cela signifie seulement que le prédicat accumulé n'est pas devenu vrai sur la branche représentée. Ce n'est pas une attestation générale du comportement SVG ni de chaque appel API.

Que signifie un marqueur bloqué ?

Le rendu montre des marqueurs lorsque fp.svg manque. Cet état ne donne pas la raison de l'absence. Le catch du collecteur est une autre branche et ne doit pas être inféré sans preuve d'exécution.

Sources

• Collecteur SVG CreepJS épinglé, src/svg/index.ts
• MDN : SVGGraphicsElement.getBBox()
• MDN : SVGTextContentElement.getComputedTextLength()
• MDN : SVGTextContentElement.getExtentOfChar()
• MDN : SVGTextContentElement.getSubStringLength()
• Documentation des polices BotBrowser

Conclusion pratique

Lisez la carte SVG de CreepJS comme une suite d'opérations définies par la source : réduction de boîte englobante, mesure de longueur pour chaque nœud de fixture, sélection du premier représentant par chaîne distincte, agrégat mis à l'échelle avec perte et prédicat de décalage/restauration. Gardez bBox, extentOfChar, subStringLength, computedTextLength, emojiSet, svgrectSystemSum et lied liés à leurs transformations. Traitez un marqueur absent et une exception comme deux états distincts. Aucun de ces champs n'établit à lui seul un OS, un appareil, une personne, un inventaire de polices ou un verdict externe.