> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Mesurer un tracé SVG sans confondre les échelles
> Mesure les tracés SVG en unités utilisateur, tiens compte des transformations et de la taille nominale, et distingue les contours de la calibration pathLength ou du trajet machine.
Source: https://perfectvector.com/fr/blog/measure-svg-path-length
Language: fr
Author: Irene Kim
Published: 2026-10-16T08:00:00+09:00
Pour mesurer un tracé SVG, appelle `getTotalLength()` sur l'élément géométrique, puis identifie le système de coordonnées derrière le nombre. Le navigateur renvoie une longueur en unités utilisateur. Ce nombre n'est pas automatiquement la longueur affichée, une mesure en millimètres ou la distance parcourue par une machine.
Par exemple, notre diagonale originale mesure 50 unités utilisateur. Une mise à l'échelle uniforme double sa longueur dans l'espace racine à 100, tandis qu'un agrandissement horizontal seul donne environ 72,111. Le résultat local de l'API reste à 50 dans les deux cas. Ces nombres répondent à des questions de mesure différentes.
## Mesurer un segment connu avant le visuel
Il te faut un SVG à géométrie accessible et un navigateur exécutant le SVG en ligne et JavaScript. Travaille sur une copie du visuel. Décide si tu as besoin de la géométrie locale, transformée ou d'une longueur à une taille physique définie avant de noter un résultat.
Un tracé stocke un parcours avec des commandes de déplacement, ligne, courbe et fermeture. Une unité utilisateur appartient à ce système de coordonnées SVG ; ne la renomme pas pixel ou millimètre sans vérifier la correspondance. [La référence MDN de `getTotalLength()`](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) définit le résultat comme la longueur du tracé calculée par le navigateur en unités utilisateur.
Cet exemple HTML complet mesure un segment droit. Enregistre-le dans un fichier HTML et ouvre-le dans un navigateur :
```html
SVG length control
```
Le déplacement horizontal vaut 30 et le vertical 40, donc la longueur attendue est `sqrt(30² + 40²) = 50`. Le résultat affiché fournit un contrôle connu avant de faire confiance à une courbe complexe ou à un emblème importé. La fenêtre de 240 pixels ne transforme pas ce résultat local en 100 unités utilisateur.
Dans notre fichier de test navigateur, nous avons déclaré une tolérance de 0,01 unité utilisateur. Un quart de cercle témoin de rayon 10 a une longueur analytique de `5π`, soit environ 15,708. Le navigateur de test indiquait Chrome 155 et a renvoyé environ 15,7102, dans cette tolérance. Un navigateur calcule numériquement la longueur des courbes : conserve une précision utile et compare avec une tolérance appropriée plutôt que d'exiger les mêmes dernières décimales de chaque implémentation.
## Distinguer les longueurs locales et transformées
Nos deux spécimens suivants gardent le même `d="M10 10 L40 50"` et ajoutent des transformations :
| Segment original | Longueur locale de l'API | Longueur après la transformation indiquée, en unités utilisateur du SVG racine |
| ------------------- | ------------------------ | ------------------------------------------------------------------------------ |
| Sans transformation | 50 | 50 |
| `scale(2)` | 50 | 100 |
| `scale(2 1)` | 50 | Environ 72,111 |
Une mise à l'échelle uniforme multiplie toutes les directions par la même grandeur : multiplier la longueur locale par 2 fonctionne donc pour la deuxième ligne. Une mise à l'échelle non uniforme traite les directions différemment. Dans la troisième ligne, le segment modifié parcourt 60 unités horizontalement et 40 vers le bas : `sqrt(60² + 40²)`, pas `50 × 2`.
La [spécification des systèmes de coordonnées SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) explique comment les transformations et la correspondance de la `viewBox` établissent les systèmes de coordonnées. Nomme ton espace cible. Une longueur en unités utilisateur du SVG racine diffère encore des pixels CSS dans la fenêtre.
Pour ce segment droit connu, nous avons transformé ses extrémités dans l'espace utilisateur du SVG racine :
```js
const root = route.ownerSVGElement;
const relative = root.getCTM().inverse().multiply(route.getCTM());
const a = new DOMPoint(10, 10).matrixTransform(relative);
const b = new DOMPoint(40, 50).matrixTransform(relative);
const transformedLength = Math.hypot(b.x - a.x, b.y - a.y);
```
La matrice racine inverse retire la correspondance de fenêtre de la racine ; la matrice relative conserve la transformation du tracé vers l'espace utilisateur racine. Cet extrait suppose un SVG attaché au document avec des matrices inversibles et le segment droit précis ci-dessus. Ses extrémités sont connues depuis la source du tracé.
Pour une courbe, la distance entre ses extrémités n'est qu'une corde. Pour mesurer une courbe transformée en général, transforme la géométrie dans le système cible et mesure cette géométrie, ou utilise une approximation numérique contrôlée préservant les contours séparés. N'applique pas cette formule d'extrémités à un parcours courbe et ne multiplie pas une forme transformée non uniformément par un seul facteur d'échelle deviné.
*Géométrie originale créée avec résultats du navigateur en direct. Longueurs locales, longueurs transformées dans l'espace racine et millimètres nominaux calculés sont nommés séparément. Aucun test d'application destinataire ou de production physique n'est montré.*
## Convertir en millimètres seulement après avoir fixé la correspondance
Notre document d'emblème original déclare `width="50mm"`, `height="50mm"` et `viewBox="0 0 100 100"`. Avec la correspondance uniforme prévue, cela donne 0,5 mm par unité utilisateur. La largeur extérieure de l'emblème couvre 80 unités : sa largeur nominale est donc de 40 mm.
Ses deux longueurs de contour totalisent 380 unités utilisateur. À cette échelle déclarée :
```text
50 mm / 100 user units = 0.5 mm per user unit
380 user units × 0.5 mm per user unit = 190 mm of contours
```
C'est un calcul fondé sur des dimensions créées. Nous n'avons ni mesuré un objet imprimé, ni vérifié un écran avec une règle, ni testé les dimensions d'import d'un éditeur. Le CSS peut remplacer la fenêtre SVG, et une destination peut redimensionner le visuel. Confirme les dimensions livrées dans cette destination avant de considérer un calcul nominal comme une mesure de production.
La largeur de tout le document diffère aussi de celle du visuel à l'intérieur. Si tu fixes seulement la largeur extérieure de l'emblème à 50 mm, ses 80 unités donnent un autre facteur : `50 / 80 = 0.625 mm per unit`. Les mêmes 380 unités représenteraient alors 237,5 mm de contours. Note quelle largeur tu as fixée ; utilise le [guide de la boîte englobante SVG](https://perfectvector.com/fr/blog/svg-bounding-box) pour inspecter d'abord les limites si nécessaire.
## `pathLength` calibre les distances sans redimensionner la géométrie
Nous avons aussi fait une copie du segment original de 50 unités avec `pathLength="1"`. Son résultat `getTotalLength()` est resté à 50. L'attribut n'a pas changé ses extrémités et n'a pas rendu sa longueur géométrique égale à une unité.
La [spécification de l'API géométrique SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) exclut explicitement `pathLength` du résultat calculé. [La référence MDN de `pathLength`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) décrit sa calibration des comportements de distance le long du tracé, dont les tirets de contour. C'est utile pour créer un effet à distances normalisées ; cela ne remplace pas la mesure du parcours sous-jacent.
Pour un dévoilement progressif du dessin, suis le [guide d'animation des contours SVG](https://perfectvector.com/fr/blog/svg-stroke-animation). Distingue ses valeurs de tirets calibrées de la longueur géométrique notée pour inspecter un visuel.
## Additionner les contours sans en faire un trajet machine
Notre emblème a une limite extérieure et un trou en losange. Le tracé composé original stocke les deux contours fermés :
```xml
```
Le contour extérieur mesure 280 unités et l'intérieur 100. Le tracé composé a renvoyé 380 ; mesurer les deux contours comme éléments de tracé séparés puis les additionner a aussi donné 380. La [spécification des tracés SVG](https://www.w3.org/TR/SVG2/paths.html) distingue les nouveaux sous-tracés des segments de ligne et de fermeture. Le déplacement vers le trou n'ajoute pas de segment dessiné entre les contours.
Cette somme décrit la géométrie enregistrée sélectionnée. Un trait épais vectorisé peut avoir deux parcours de bord ; un tracé dupliqué peut ajouter la géométrie une deuxième fois ; un emblème peut contenir de petits contours intérieurs que tu ne voulais pas traiter. Mesure les objets et contours réellement visés et inspecte-les avant d'interpréter un total.
Le trajet machine est un résultat distinct. Un travail peut inclure des déplacements entre contours, des choix d'ordre, des passages répétés ou des modifications de tracés propres à la destination. Notre total navigateur n'établit rien de cela. Il ne donne pas non plus de temps de découpe, de consommation de matériau ou de résultat machine réussi. Si tu as besoin d'un seul parcours central depuis un dessin scanné, le [guide SVG à ligne unique](https://perfectvector.com/fr/blog/drawing-to-single-line-svg) traite de cette autre reconstruction.
## Consigner la mesure avec ses hypothèses
1. Identifie la géométrie sélectionnée et vérifie si elle contient plusieurs contours ou des doublons.
2. Mesure un contrôle connu et les tracés sélectionnés en unités utilisateur locales.
3. Note les transformations et l'espace de coordonnées nécessaire au résultat.
4. Établis les dimensions prévues du document ou du visuel avant de convertir les unités.
5. Nomme séparément les valeurs de calibration, les totaux de contours et les mesures dans la destination.
Si le contrôle droit connu ne renvoie pas 50 dans la tolérance déclarée, vérifie l'élément sélectionné et si ses données sources ont changé. Si les résultats locaux concordent mais pas la taille nominale, inspecte la fenêtre, les transformations et l'échelle de destination avant de modifier les tracés. Davantage de décimales ne résoudra pas une mauvaise correspondance de coordonnées.
Le contrôle de géométrie du fichier est terminé lorsqu'une autre personne peut reproduire le total des contours sélectionnés et comprendre ses unités, sa correspondance, sa tolérance et les objets inclus. Notre fichier de test navigateur conservé a réussi ces contrôles numériques. Aucun import dans un éditeur, trajet machine ou test de taille physique n'a été effectué.
Si la seule source est un bitmap, [le processus image vers vectoriel de PerfectVector](https://perfectvector.com/fr/image-to-vector) peut d'abord reconstruire une géométrie SVG modifiable. Inspecte les contours et les trous récupérés, puis mesure cette géométrie sélectionnée avec une échelle explicite. La vectorisation crée des tracés à partir de pixels ; elle ne récupère pas une taille physique perdue, ne déduit pas une ligne médiane et ne fournit pas d'estimation de trajet machine. Conserve un original vectoriel existant lorsqu'il est disponible. L'emblème de cet article a été créé directement, sans vectorisation.
## FAQ
**`getTotalLength()` renvoie-t-il des pixels ou des millimètres ?**
Il renvoie la longueur calculée par le navigateur en unités utilisateur SVG. Établis la correspondance de coordonnées et de taille avant d'exprimer ce résultat en pixels de fenêtre ou en unités physiques nominales.
**Pourquoi la mise à l'échelle du tracé ne change-t-elle pas le résultat local de l'API ?**
Le parcours local stocké et sa représentation transformée occupent des espaces de coordonnées différents. Notre segment aux mêmes données a renvoyé 50 localement après les mises à l'échelle uniforme et non uniforme. Ses longueurs transformées étaient de 100 et d'environ 72,111 unités SVG racines.
**`pathLength="1"` signifie-t-il que le tracé mesure une unité ?**
Il fournit une valeur de calibration pour les comportements pris en charge de distance le long du tracé. La longueur calculée de l'API géométrique ignore cet attribut ; notre contrôle de 50 unités renvoyait toujours 50.
**Puis-je estimer le temps de découpe avec un total de contours ?**
Le total seul ne suffit pas. Il n'établit ni les parcours générés dans la destination, ni les déplacements entre contours, les passages répétés, les changements de vitesse ou le comportement du matériau. Utilise les contrôles du véritable travail de destination et un test de production approprié.
## Sources
1. [MDN : SVGGeometryElement.getTotalLength()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) — Longueur de tracé calculée par le navigateur en unités utilisateur.
2. [W3C : API géométrique SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) — Longueur calculée et indépendance vis-à-vis de la calibration `pathLength`.
3. [W3C : systèmes de coordonnées SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Correspondances de fenêtre, de `viewBox` et de transformations.
4. [MDN : pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) — Calibration du comportement de distance le long du tracé.
5. [W3C : tracés SVG](https://www.w3.org/TR/SVG2/paths.html) — Sous-tracés, segments dessinés et commandes de fermeture.
***
Besoin de géométrie modifiable depuis un bitmap avant de mesurer ? [Crée un SVG candidat](https://perfectvector.com/fr/image-to-vector), inspecte ses contours et établis l'échelle prévue avant de noter une longueur.
## Explore
- [Read the HTML article](https://perfectvector.com/fr/blog/measure-svg-path-length)
- [Contours SVG pointillés : espacement et extrémités](https://perfectvector.com/fr/blog/svg-dotted-outlines.md)
- [Marqueurs SVG Leaflet : aligne la pointe avec iconAnchor](https://perfectvector.com/fr/blog/leaflet-svg-marker-anchor.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)