Ordre des transformations SVG : taille et position

Avec l’attribut SVG transform="translate(60 25) scale(2)", un point source est multiplié par deux, puis déplacé de 60 unités horizontalement et de 25 verticalement lorsqu’il est converti dans le système de coordonnées parent. Inverse la liste en scale(2) translate(60 25) et cette translation est elle aussi doublée. Le dessin conserve la même taille, mais change de position.

Lorsqu’un logo se déplace brusquement après un redimensionnement, vérifie la liste des transformations avant de modifier ses tracés. Une organisation utile consiste à réserver un groupe extérieur au placement et un groupe intérieur à l’échelle. Les deux rôles restent visibles et les coordonnées du dessin original restent disponibles pour les modifications ultérieures.

Suis un point au lieu de deviner l’ordre

Prends le point source (10, 10). Avec une échelle de 2 et une translation de (60, 25), les deux listes donnent :

Les deux points proviennent de la même coordonnée source. La seconde liste redimensionne la translation aussi bien que le dessin. Sa position finale diffère de (60, 25) de la première.

Tu peux rencontrer des descriptions de l’ordre qui semblent contradictoires. La spécification SVG décrit une liste comme des systèmes de coordonnées imbriqués dans l’ordre écrit : la transformation la plus à gauche devient le groupe extérieur. Lorsqu’on suit un point source vers l’extérieur à travers ces groupes, l’opération la plus intérieure agit sur lui en premier. La définition W3C de l’attribut transform montre explicitement l’imbrication équivalente.

Pour le calcul des points, pars de la fonction la plus à droite et avance vers la gauche. Pour la structure des groupes, lis de l’extérieur vers l’intérieur. Garde l’interprétation choisie cohérente tout au long du calcul.

Compare le même symbole en deux parties

Enregistre cet exemple complet sous transform-order.svg et ouvre-le dans un navigateur. Son dessin est un anneau carré original avec un accent triangulaire distinct. L’ouverture est un véritable espace vide défini par la règle de remplissage pair-impair.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Change uniquement l’attribut du groupe en transform="scale(2) translate(60 25)". Le symbole se déplace davantage vers la droite et le bas, tandis que sa taille et l’espace entre ses parties restent identiques.

Nous avons rendu les deux listes et un équivalent en groupes imbriqués dans un navigateur. Les panneaux de comparaison utilisent des zones de coordonnées identiques ; le symbole pâle montre la géométrie originale. Chaque point rouge indique la position finale du point source (10, 10).

La boîte locale du dessin original est x=10, y=10, width=95, height=40. La première organisation produit des limites dans les coordonnées racines de x=80, y=45, width=190, height=80. La liste inversée produit x=140, y=70, avec la même taille de 190 × 80.

Ces mesures décrivent cet exemple simple sans contour. L’exemple ne comporte ni animation ni transformation CSS. Il démontre la composition des coordonnées, et non la qualité de conversion PerfectVector ou la compatibilité avec tous les éditeurs SVG.

Sépare le placement de la taille avec des groupes imbriqués

Remplace le groupe original par cette structure, en conservant ses tracés :

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Cela correspond à translate(60 25) scale(2) sur un seul groupe. La translation extérieure positionne le système de coordonnées redimensionné. Modifier l’échelle intérieure laisse les valeurs de translation extérieure à (60, 25).

Cela ne signifie pas que chaque point visible reste fixe lorsque tu changes l’échelle. Un point éloigné de l’origine locale se déplace toujours lorsque ses coordonnées sont multipliées. Décide quel point source doit servir d’ancrage au dessin avant de choisir la translation.

Supposons par exemple que le coin source de l’anneau (10, 10) doive arriver à (120, 80) après une mise à l’échelle par 2. Calcule :

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

Utilise translate(100 60) scale(2). Le coin correspond maintenant à (120, 80). Une translation directe de (120, 80) y placerait l’origine locale et laisserait le coin plus à droite et plus bas.

Ce calcul suppose une mise à l’échelle uniforme sans rotation ni inclinaison. Pour un pivot de rotation choisi délibérément, consulte le guide SVG transform-origin. Place chaque transformation sur le groupe chargé de ce rôle au lieu de combiner des corrections sans rapport par essais successifs.

Lis la correspondance rendue lorsque le fichier est imbriqué

Un SVG importé peut déjà avoir des transformations sur plusieurs ancêtres. Examiner uniquement l’attribut du groupe le plus proche masque leur effet combiné. La référence MDN de transform précise aussi qu’une transformation CSS est prioritaire lorsque la propriété CSS et l’attribut de présentation ciblent le même élément. Vérifie les styles calculés si modifier l’attribut semble ne rien faire.

Pour un SVG en ligne rendu, cet extrait convertit le point du groupe choisi dans les coordonnées utilisateur du SVG racine :

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

La matrice racine inverse retire la correspondance d’écran commune de la racine. Cela compte, car l’affichage de 700 × 400 de l’exemple est deux fois plus grand que son viewBox de 350 × 200. Les pixels d’écran et les coordonnées SVG sont ici des unités différentes. MDN documente la correspondance renvoyée par getScreenCTM().

Notre comparaison dans le navigateur a produit matrix(2 0 0 2 60 25) pour la première liste et la version imbriquée. La liste inversée a produit matrix(2 0 0 2 120 50). Dans cet exemple d’échelle et de translation, les deux derniers nombres rendent explicite la différence de translation.

L’extrait suppose des transformations bidimensionnelles inversibles. Une échelle nulle ne convient pas à cette vérification par matrice inverse. Pour les superpositions, les exports ajustés, les contours ou les boîtes tournées, utilise la méthode détaillée des limites SVG.

Ne t’attends pas à ce que getBBox() sur le groupe du dessin indique sa position transformée dans la racine. Son résultat local exclut la transformation propre de cet élément et celles de ses ancêtres, comme l’explique la référence getBBox. Une boîte locale peut rester identique alors que le symbole se déplace visiblement.

Corrige la transformation avant de reconstruire le dessin

Travaille sur une copie du SVG. Identifie les tracés qui doivent se déplacer ensemble, puis inspecte leur groupe et ses ancêtres. Note un point d’ancrage reconnaissable et la destination voulue pour ce point.

Change une transformation à la fois. Si la taille est correcte mais le placement incorrect, compare la translation produite par les deux ordres. Si les parties se déplacent indépendamment, définis leur placement commun sur un groupe englobant. Garde la question du pivot de rotation séparée de celle de l’ordre de mise à l’échelle.

Rouvre le fichier enregistré dans sa destination et inspecte toute l’étendue du symbole. Une transformation correcte peut tout de même déplacer le dessin au-delà du viewBox ou dans une zone de découpage. Le guide de modification SVG couvre le nettoyage et l’exportation plus largement.

Si le symbole existe uniquement en PNG ou JPG et que tu as besoin de contours modifiables, le vectoriseur de logos PerfectVector peut préparer un SVG candidat. Inspecte sa silhouette, son ouverture et ses formes détachées, puis groupe le dessin reconstruit et applique les transformations de placement dans ton éditeur ou ton code.

Un bitmap peut être déplacé et redimensionné sans vectorisation. Utilise le traçage lorsque des formes modifiables sont nécessaires et conserve l’original vectoriel existant si tu en possèdes un. Pour une géométrie ou un lettrage de logo exacts, une reconstruction manuelle peut rester nécessaire ; le guide de vectorisation des logos explique comment choisir cette méthode de départ.

FAQ

SVG applique-t-il les transformations de gauche à droite ou de droite à gauche ? La liste correspond à des systèmes de coordonnées imbriqués dans l’ordre écrit, de l’extérieur vers l’intérieur. Pour calculer la position finale d’un point source, applique d’abord la fonction la plus à droite et progresse vers l’extérieur, à gauche.

Pourquoi inverser translate et scale déplace-t-il le logo ? Lorsque scale précède translate dans la liste de transformations de l’attribut, l’échelle multiplie aussi la translation. Lorsque translate précède scale, la translation reste en dehors de cette échelle. Les mêmes valeurs peuvent donc produire des tailles égales à des positions différentes.

Une translation extérieure garde-t-elle tous les points fixes lorsque je redimensionne le groupe intérieur ? Non. Elle sépare les valeurs de translation extérieure de l’échelle intérieure. Les points éloignés de l’origine locale se déplacent toujours avec leur mise à l’échelle. Choisis un point d’ancrage et calcule la translation nécessaire pour le placer.

Sources

1. W3C — Attribut SVG transform — Définit la relation entre les listes de transformations et les systèmes de coordonnées imbriqués.
2. MDN — SVG transform — Documente la syntaxe des transformations, les correspondances matricielles et la priorité CSS.
3. MDN — getScreenCTM — Décrit la matrice qui convertit les coordonnées SVG vers la fenêtre du document.
4. MDN — getBBox — Explique les limites locales et l’exclusion des transformations de l’élément mesuré.

Si ton logo source a besoin de géométrie modifiable, prépare un SVG candidat avec PerfectVector, inspecte ses contours et ses parties distinctes, puis choisis un ancrage et vérifie sa position finale après mise à l’échelle.