Texte SVG sur un tracé : refaire un lettrage de badge éditable

Pour mettre du texte SVG sur un tracé, définis un tracé avec un identifiant, référence-le depuis un <textPath> dans <text> et écris les mots entre les balises. Pour un lettrage centré, combine startOffset="50%" et text-anchor="middle". Garde l’emblème dans un groupe distinct pour changer les mots sans reconstruire le dessin.

Cette séparation est utile pour restaurer un badge de club, un symbole de boutique ou un logo d’événement. Tu peux avoir besoin de tracés vectoriels pour l’emblème central tout en devant corriger une date ou changer un nom. Vectoriser tout le badge produit des formes de lettres, pas une chaîne de texte éditable. Reconstruis la typographie en texte éditable lorsque les mots doivent rester modifiables.

Pour un lettrage horizontal à côté d’un emblème, ajuste un libellé SVG droit avec textLength et compare les changements d’espacement avant de modifier les proportions des glyphes.

Commencer avec trois parties distinctes

Un badge a besoin d’un emblème, d’un tracé guide et du texte qui suit ce tracé. Le guide contrôle la position du lettrage ; il n’a pas besoin d’être visible dans le dessin final. La référence MDN de textPath décrit la connexion href entre le texte et son tracé.

Pour l’exemple ci-dessous, nous avons dessiné un sapin simple et un guide semi-circulaire en code SVG. Ce sont deux dessins originaux de démonstration, pas des sorties de conversion PerfectVector. Le badge porte PINE TRAIL CLUB ; le lettrage reste une chaîne de texte pendant toutes les étapes de construction.

Construire le badge éditable

Enregistre ce code sous badge.svg et ouvre-le dans un navigateur. Garde ce fichier comme original éditable. Si tu découvres ce format, notre guide des fichiers SVG explique la différence entre texte, tracés et images intégrées.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

Le tracé commence à (70, 215) et suit un demi-cercle supérieur jusqu’à (330, 215). Son rayon est de 130 unités. Le placer dans <defs> le rend disponible pour référence sans dessiner de contour visible. Le cercle extérieur pâle est une forme peinte distincte.

Remplace PINE TRAIL CLUB par ton propre nom court, enregistre et recharge. Le sapin doit rester fixe tandis que les nouveaux mots suivent le même guide. Un nom plus long nécessite une nouvelle vérification d’ajustement ; le centrage ne fait pas tenir n’importe quel texte sur l’arc.

Centrer avec le décalage et l’ancrage

startOffset="50%" place la position de référence du texte à mi-chemin du tracé. text-anchor="middle" aligne le milieu du texte à cette position. L’un sélectionne une position sur la courbe ; l’autre choisit la partie du texte qui s’y place. La référence de startOffset et la référence de text-anchor décrivent ces commandes.

Essaie de changer seulement text-anchor en start. Avec ce texte de gauche à droite, les mots commencent maintenant au milieu et continuent vers l’extrémité droite. Dans notre test navigateur, cela a déplacé le lettrage vers la droite et laissé une partie de la phrase au-delà de l’arc utilisable. Restaure middle avant d’ajuster la taille de police.

Pour un badge symétrique, examine visuellement le résultat après le centrage mathématique. Les lettres ont des formes et espaces latéraux différents ; une avance de texte centrée peut encore nécessiter un petit ajustement optique. Garde cet ajustement volontaire au lieu de changer plusieurs coordonnées sans rapport jusqu’à obtenir un résultat approximatif.

Vérifier la direction du tracé avant de déplacer le texte

Inverse cet arc supérieur exact en remplaçant sa valeur d par :

d="M330 215 A130 130 0 0 0 70 215"

Le début et la fin s’échangent et l’indicateur de balayage de l’arc change. Pour un guide visuel des deux indicateurs, consulte les quatre combinaisons d’indicateurs d’arc SVG. La courbe géométrique reste au même endroit, mais le texte la suit dans l’autre sens. Dans notre test navigateur, cette inversion a changé l’orientation du lettrage. Restaure le tracé original pour un lettrage à l’endroit en haut de ce badge.

Inverser un tracé diffère d’inverser l’orthographe ou de définir la direction d’écriture d’une langue. Garde les mots intacts. La spécification de mise en page du texte SVG explique le placement des glyphes le long d’un tracé. Pour une ligne inférieure, crée et teste un guide inférieur distinct plutôt que de déplacer le texte supérieur jusqu’à ce qu’il traverse l’emblème.

Choisir la police avant l’espacement final

L’exemple demande Georgia, puis une police serif générique de remplacement. Cette demande n’intègre pas de police dans le SVG. Le moteur choisit une police disponible dans la liste de familles, comme le décrit la référence MDN de font-family.

Dans notre démonstration Chromium, passer le même texte de Georgia, serif à Arial, sans-serif a changé son avance mesurée. L’arc et l’emblème sont restés inchangés. La vérification essentielle est l’étendue occupée et l’apparence des lettres, pas une largeur particulière qu’un autre ordinateur peut rendre différemment.

Pour un vrai badge, fixe la police et la graisse prévues avant d’ajuster taille ou espacement des lettres. Rouvre ensuite le SVG dans son environnement d’utilisation. Si la police y change, utilise le guide de dépannage des polices SVG pour isoler la substitution ou le comportement d’import.

Si les mots dépassent l’arc, essaie une phrase plus courte, une police plus petite ou un guide plus large. Vérifie tout le badge après chaque changement. Augmenter le rayon du guide peut rapprocher les lettres de la bordure extérieure ; réduire la taille du texte peut rendre un petit badge imprimé plus difficile à lire. Évite d’étirer les lettres simplement pour remplir une étendue fixe, sauf si cette déformation fait partie du dessin.

Reconstruire seulement le dessin qui nécessite une vectorisation

Si l’emblème n’existe que dans un PNG ou JPG, sépare la reconstruction du dessin du travail typographique. Utilise une copie de la source qui isole l’emblème aussi proprement que possible. Garde l’original complet comme référence visuelle pour reconstruire le badge.

Vectorise l’emblème matriciel avec PerfectVector, puis compare sa silhouette, ses espaces intérieurs et ses petits détails à la source. Utilise le SVG accepté dans le groupe de l’emblème et reconstruis les mots séparément avec la police prévue. PerfectVector crée des tracés vectoriels depuis l’image ; cette procédure ne dépend pas de l’OCR, de l’identification de police ni de la reconstruction automatique de texte courbe éditable.

Quand l’emblème vectoriel original est disponible, réutilise-le. Lorsque le lettrage est dessiné sur mesure et que ses formes irrégulières comptent, suis la procédure de lettrage manuel vers vecteurs au lieu de le remplacer par une police. Notre guide de vectorisation de logos traite du choix plus large entre vectorisation, ressaisie et réparation manuelle.

Le sapin simple de l’exemple évite une complication d’import : un emblème existant peut utiliser un autre système de coordonnées ou inclure des transformations. Dimensionne et positionne ce groupe dans le viewBox du badge, puis vérifie-le à nouveau avec le texte visible. Ne modifie pas le guide du lettrage pour compenser un emblème mal positionné.

Garder un original éditable et créer une copie livrable

Le texte éditable est utile dans l’original lorsque noms, dates ou mots peuvent changer. Pour un badge fixe envoyé à un autre éditeur ou outil de production, une copie convertie en tracés retire au destinataire le besoin de reproduire les glyphes de la police. Les mots deviennent des tracés vectoriels et perdent l’édition textuelle ordinaire.

Dans les options d’enregistrement SVG d’Illustrator, Convert To Outlines convertit le texte en tracés. Adobe avertit aussi que le texte exporté sur un tracé peut être rendu différemment par les visionneuses SVG. Ce sont des raisons d’examiner la copie exportée dans sa destination, pas une garantie que tous les outils en aval reproduiront tout le badge. Consulte la documentation Adobe d’enregistrement SVG.

Utilise cet ordre de transmission :

1. Enregistre l’original à texte éditable avant toute conversion en tracés.
2. Confirme les mots, la police, la direction du tracé, le centrage et l’espacement.
3. Crée une copie livrable distincte et convertis son texte en tracés dans ton éditeur.
4. Rouvre cette copie et compare toutes les lettres, contreformes, espaces et l’emblème.
5. Vérifie le badge à sa taille de sortie prévue dans l’application destinataire.

La conversion en tracés fige l’apparence de police actuelle. Si la mauvaise police de remplacement est active à ce moment, tu figes les mauvaises lettres. Pour une image web, garde aussi un nom accessible utile ; les formes des lettres converties en tracés ne portent pas à elles seules la chaîne de texte originale.

FAQ

Pourquoi mon texte SVG n’est-il pas centré sur le tracé ? Utilise startOffset="50%" avec text-anchor="middle" pour l’exemple centré. Un décalage de 50% avec un ancrage start commence la phrase au milieu du guide. Vérifie aussi la forme du tracé et si tous les mots tiennent.

Pourquoi le texte est-il à l’envers ? Vérifie la direction du guide. Le texte suit le tracé tel qu’il est dessiné ; inverser le tracé peut donc changer l’orientation du lettrage. Teste la direction avant de déplacer le texte ou de changer son orthographe.

Vectoriser un badge crée-t-il du texte courbe éditable ? La vectorisation reconstruit les formes de lettres visibles comme dessin. Pour des mots éditables, reconstruis séparément le texte avec la police prévue et un guide textPath. Garde un original à texte éditable avant de créer une copie livrable en tracés.

Sources

1. MDN — textPath — Relier le texte éditable à un tracé référencé.
2. MDN — startOffset — Positionner le texte le long du guide.
3. MDN — text-anchor — Aligner le texte par rapport à sa position de référence.
4. W3C — Texte SVG 2 — Placement des glyphes et règles du texte sur un tracé.
5. MDN — font-family — Polices disponibles et sélection de famille de remplacement.
6. Adobe — Enregistrer un dessin dans Illustrator — Conversion du texte SVG en tracés et limites d’export du texte sur un tracé.

Construis le lettrage autour de l’emblème approuvé et garde les mots éditables jusqu’à la finalisation du badge. Si ton emblème est enfermé dans une image matricielle, reconstruis ses tracés vectoriels, examine les petits détails et utilise le dessin accepté dans ton original de badge.