Morphing SVG : fais correspondre les tracés

Si le contour doit rester identique tandis que tout le symbole tourne, définis plutôt un pivot de rotation SVG commun.

Le morphing SVG modifie la géométrie d’une forme entre deux états. Pour l’interpolation native des données de tracé, prépare des structures de commandes correspondantes et décide quels points doivent se correspondre. Deux dessins finaux séduisants peuvent encore produire une forme aplatie ou tordue à mi-parcours.

Les règles d’animation des données de tracé du W3C exigent le même nombre et les mêmes types de commandes, dans le même ordre, pour une interpolation fluide. C’est une exigence structurelle. Elle ne détermine pas quel coin d’un logo doit devenir quel coin de son état suivant.

Commence par une petite paire facile à inspecter. Les exemples originaux ci-dessous utilisent un carré, un losange et un carré volontairement inversé pour séparer ces deux décisions.

Crée deux tracés aux coins correspondants

Ce carré et ce losange écrits à la main utilisent tous deux M L L L Z : aller au premier coin, tracer trois lignes et fermer la forme. Chaque paire de coordonnées a une position correspondante dans l’autre tracé.

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

L’élément SVG animate change un attribut au fil du temps. Ici, il change d pendant deux secondes. Le fill="freeze" de l’animation conserve l’état final ; le fill vert du tracé est un réglage de peinture distinct.

Garde l’exemple dans une page HTML autonome pendant l’inspection. Il démarre automatiquement sans le script d’inspection ci-dessous. Pour les contrôles de production, détermine quand il doit être joué et fournis un état statique adapté à l’interface.

La correspondance des coins est explicite :

Les deux contours parcourent leur périmètre dans le même sens. Le premier coin va vers le haut du losange, le second vers sa droite, et ainsi de suite. C’est un choix de conception délibéré, et non une interprétation du sens de chaque forme.

Mets en pause l’interpolation réelle

Inspecte le départ, le milieu et l’arrivée avant d’ajuster la courbe d’accélération ou d’ajouter des effets décoratifs. Pour le SVG ci-dessus, cette fonction suspend sa chronologie et se place à un temps donné en secondes :

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN documente pauseAnimations() et setCurrentTime() pour contrôler la chronologie SVG. Relie la fonction à des boutons avec les valeurs 0, 1 et 2. Ce sont trois positions dans une même interpolation, et non trois dessins de remplacement.

À une seconde, l’interpolation linéaire place chaque coordonnée à mi-chemin entre ses valeurs de départ et d’arrivée. Le premier coin est donc à 55, 25. Le milieu complet de cet exemple original est :

M55 25L135 55L105 135L25 105Z

Nous avons vérifié cette animation SVG native dans un navigateur au départ, à mi-parcours et à l’arrivée, puis l’avons jouée une fois. À mi-parcours, la forme restait un quadrilatère rempli et la lecture atteignait le losange. Cette observation concerne ces tracés écrits à la main dans le navigateur testé ; ce n’est ni un résultat de conversion PerfectVector ni un test de compatibilité entre navigateurs.

Un même nombre de commandes peut produire un mauvais morphing

Garde le carré de départ, mais inverse l’ordre des coins du carré cible :

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

Les états de départ et d’arrivée montrent le même carré. Les deux chaînes utilisent toujours M L L L Z. Pourtant, les deuxième et quatrième coins traversent maintenant la forme pour échanger leurs places. À mi-parcours, leurs coordonnées coïncident :

M30 30L80 80L130 130L80 80Z

Les quatre points se trouvent sur une diagonale. Dans notre test navigateur, le carré rempli s’est aplati sur cette diagonale à mi-parcours avant de redevenir carré à la fin. Une structure de commandes correspondante a rendu l’interpolation possible ; la mauvaise correspondance des points a rendu le résultat indésirable.

Lorsqu’une paire exportée se tord, inspecte le premier point et le sens de parcours de chaque tracé. Vérifie ensuite si les coins et les caractéristiques des courbes occupent des positions correspondantes. Ajouter des nœuds sans discernement peut compliquer cette lecture. Le guide de nettoyage des nœuds aide à simplifier les dessins statiques, mais préserve la correspondance établie entre les deux états.

Tiens compte des trous et des parties séparées

Un logo peut comporter une limite extérieure, une ouverture et un accent détaché. Considère-les comme des parties auxquelles il faut attribuer des partenaires délibérés dans l’état suivant. Avant d’animer, liste quelle partie devient quelle autre. Si un état possède un trou et l’autre non, décide comment l’ouverture doit disparaître au lieu de supposer qu’un nombre de nœuds égal réglera la question.

La référence fill-rule explique comment SVG détermine quelles régions sont à l’intérieur d’un tracé. Préserve le comportement de remplissage prévu pendant la préparation et le test d’un tracé composé. Si l’ouverture semble déjà incorrecte dans un état statique, utilise le guide de diagnostic des trous remplis avant d’ajouter une transition.

Un ordre d’inspection pratique est :

1. Confirme la silhouette, les trous et les détails détachés de chaque état de départ ou d’arrivée.
2. Identifie les sous-tracés ou éléments distincts correspondants.
3. Aligne leurs points de départ, directions et caractéristiques utiles.
4. Vérifie les états intermédiaires pour détecter des limites croisées ou des détails qui disparaissent.
5. Ajuste le rythme uniquement après avoir accepté cette géométrie.

Des éléments distincts peuvent être plus faciles à contrôler lorsqu’un petit accent doit s’atténuer ou se déplacer indépendamment. Ce choix fait partie de la conception de l’animation ; il n’a pas à être forcé dans un tracé composé unique.

Vérifie les règles de ton mécanisme d’animation

L’exemple natif utilise délibérément des commandes correspondantes. Une bibliothèque peut effectuer une préparation supplémentaire : ses exigences peuvent donc différer.

La documentation MorphSVG de GSAP décrit la conversion des données de tracé en courbes cubiques et l’ajout de points lorsque nécessaire. Elle expose aussi des contrôles de correspondance comme shapeIndex. Utilise-les pour examiner la correspondance au lieu de supposer que deux formes exportées indépendamment concordent déjà.

KUTE.js documente un autre modèle de préparation dans son guide SVG Morph, avec une méthode distincte pour les sous-tracés. Vérifie la version et le composant réellement utilisés avant de leur appliquer les restrictions des tracés natifs ou les conseils d’une autre bibliothèque.

Choisis une petite paire représentative pour ce mécanisme et inspecte sa géométrie intermédiaire. Un test réussi de carré vers losange ne démontre pas le comportement d’un logo composé détaillé. Garde une copie du dessin source pour distinguer les modifications introduites pendant la préparation de l’animation du dessin original.

Prépare le dessin matriciel avant de faire correspondre les états

Si l’original vectoriel manque et qu’il ne reste que des dessins PNG ou JPG, la méthode image vers vecteur PerfectVector peut aider à préparer un SVG candidat modifiable. Compare la silhouette, les trous et les régions distinctes à la source, puis inspecte les tracés téléchargés. Le guide de modification SVG couvre l’étape suivante de nettoyage.

Vectoriser deux images n’établit pas de correspondance sémantique entre leurs points et ne crée pas un morphing terminé. Accepte d’abord chaque dessin statique, puis prépare la paire pour l’outil d’animation choisi. Si un original vectoriel modifiable existe déjà, pars de celui-ci au lieu de retracer une copie matricielle.

Teste un état à mi-parcours après chaque modification significative de la paire. Un état final plus simple est utile seulement si la transition suit encore les caractéristiques prévues. Les articles de modification du blog apportent d’autres conseils de préparation des sources.

FAQ

Les tracés SVG doivent-ils avoir le même nombre de points pour un morphing ? Pour l’interpolation native des données de tracé, une structure de commandes correspondante compte, y compris les types et l’ordre des commandes. Une bibliothèque peut normaliser des structures différentes : consulte donc sa propre documentation au lieu de te fier seulement au nombre de points.

Pourquoi mon morphing SVG se tord-il alors que les états finaux semblent corrects ? Les points peuvent correspondre dans un ordre indésirable. Vérifie le point de départ, la direction et les correspondances des caractéristiques, puis inspecte le milieu. Des silhouettes finales identiques peuvent masquer une forme intermédiaire aplatie.

Peut-on appliquer automatiquement un morphing à deux fichiers SVG distincts ? Un outil d’animation nécessite une géométrie compatible ou normalisée et une correspondance utile entre les états. Deux extensions de fichier ne fournissent pas cette correspondance à elles seules ; inspecte les tracés, trous et parties distinctes.

Convertir deux PNG en SVG crée-t-il une paire adaptée au morphing ? Non. La conversion prépare des candidats vectoriels statiques. Tu dois encore faire correspondre leurs parties et points, choisir un mécanisme d’animation et inspecter la transition.

Sources

1. W3C — Tracés SVG — Définit la structure d’interpolation native des données de tracé et la correspondance des paramètres.
2. MDN — animate — Documente l’animation d’attributs au fil du temps.
3. MDN — pauseAnimations — Permet de suspendre la chronologie d’inspection.
4. MDN — setCurrentTime — Documente le positionnement dans la chronologie SVG en secondes.
5. MDN — fill-rule — Explique le comportement des régions intérieures des dessins composés.
6. GSAP — MorphSVG — Décrit la normalisation et les contrôles de correspondance des points.
7. KUTE.js — SVG Morph — Documente sa préparation propre au composant et sa méthode pour les sous-tracés.

Fais correspondre les parties et inspecte le milieu avant de peaufiner le rythme. Si ton dessin initial est matriciel, prépare un SVG candidat, vérifie sa géométrie statique, puis construis les états d’animation correspondants.