SVG textLength : ajuster un libellé sans déformer les lettres

Utilise textLength avec lengthAdjust="spacing" lorsqu’un libellé SVG doit avoir une longueur précise et qu’une petite correction d’espacement est acceptable. Les formes des glyphes restent inchangées. Si tu choisis spacingAndGlyphs, le moteur peut étirer ou comprimer les lettres elles-mêmes le long de la ligne de texte. Ce sont les deux modes définis par la spécification du texte SVG.

Le piège est la cible : textLength est une longueur demandée, pas une largeur maximale. Il peut aussi bien étaler un libellé court que resserrer un long. Il ne crée pas non plus de lignes avec retour automatique.

Ce que chaque ajustement modifie

spacing est le mode par défaut lorsque tu définis textLength sans valeur lengthAdjust. La référence MDN de textLength explique comment la longueur demandée et le mode d’ajustement fonctionnent ensemble.

Pour une identité de marque ordinaire, applique une petite correction et examine-la. Un libellé nécessitant une forte réduction mérite généralement une police plus petite, un texte plus court ou un espace plus large dans la mise en page.

Un libellé court et un long avec la même cible

Nous avons dessiné un emblème original en losange et testé deux libellés éditables en Abel Regular à une taille de police de 64 unités SVG. Après chargement de la police prévue, le navigateur a mesuré PINE à environ 115.6 unités et PINE & FIELD à 325.3 unités. Les deux lignes ajustées demandent 240 unités.

Même cible, typographie différente

Dans le libellé court, spacing crée des espaces très visibles. Dans le long, il serre les lettres les unes contre les autres. Les glyphes conservent leurs formes dans les deux cas, mais aucun résultat ne convient bien à ce dessin. La ligne spacingAndGlyphs atteint la même étendue en modifiant visiblement les proportions de la police.

Notre test a utilisé Chrome 154 dans le navigateur intégré à l’application. Nous avons mesuré l’étendue horizontale entre le départ du premier caractère et la fin du dernier ; chaque ligne ajustée atteignait environ 240 unités. L’exemple utilise une seule police latine et du texte simple de gauche à droite. Ce n’est pas un test de compatibilité multilingue ou entre moteurs de rendu.

Définir une correction de longueur modeste

Pour le long libellé ci-dessus, 330 unités sont proches de sa longueur naturelle de 325.3 unités. C’est un exemple de calibrage plus utile que de le forcer à 240.

Télécharge Abel-Regular.ttf et son OFL.txt depuis le répertoire Abel de Google Fonts. Place-les dans un dossier fonts à côté d’un fichier HTML contenant ce balisage, puis sers ce dossier localement :

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

Le 330 sans unité appartient au système de coordonnées du SVG. Mettre à l’échelle tout le SVG sur une page met aussi à l’échelle cette distance à l’écran. Garde l’emblème et le texte séparés pour qu’un changement typographique ne modifie pas le dessin.

La police reste essentielle. textLength ne convertit pas les lettres en contours et n’intègre pas la police. Si la forme des lettres change sur un autre ordinateur, diagnostique la substitution des polices SVG avant de modifier leur espacement.

Pour une largeur maximale, mesurer d’abord

Si la règle est « laisser les libellés courts tels quels, réduire seulement les longs », ajoute toi-même cette condition. Cet exemple réduit la taille de police : les lettres gardent leurs proportions tout en devenant plus petites dans les deux dimensions.

Place ce script après le SVG ci-dessus. Il remplace l’ajustement fixe de 330 unités par un maximum de 240 unités :

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready attend la fin du chargement des polices et du travail de mise en page du document. L’appel explicite à load() demande d’abord la police utilisée dans cet exemple. Mesurer avant le chargement de la police prévue peut conduire à une décision d’ajustement fondée sur des lettres de remplacement.

Nous retirons textLength avant d’appeler getComputedTextLength(), car cette branche a besoin de la longueur naturelle. Dans notre test navigateur, cette méthode indiquait encore la longueur naturelle pour les lignes spacing, même si l’étendue affichée du début à la fin avait changé. Ne suppose pas qu’elle mesure universellement la largeur visuelle ajustée.

Avec ce script, le court libellé PINE garde sa taille de 64 unités. Le long descend à environ 47.2 unités. Examine le résultat à sa taille réelle d’affichage ou d’impression. Si les mots réduits sont trop petits, change la mise en page ou le texte plutôt que de réduire la taille indéfiniment. Relance l’étape d’ajustement lorsque le texte ou les réglages de police changent.

Vérifier le libellé final dans sa destination

L’ajustement numérique n’est qu’une vérification. Observe les paires de lettres et l’espace entre emblème et texte à la taille finale. Garde les libellés ordinaires à leur espacement naturel sauf si le dessin nécessite un calibrage.

Pour plusieurs lignes, crée et positionne les lignes volontairement ; textLength seul ne fournit aucune règle de retour à la ligne. Pour un badge courbe, utilise la procédure distincte de texte SVG sur un tracé. Ce guide contrôle la ligne de base suivie par les lettres.

Garde la source avec du texte éditable, puis ouvre le fichier à livrer dans l’éditeur, le navigateur ou le moteur qui l’utilisera réellement. Le guide des fichiers SVG explique pourquoi un SVG peut contenir du texte éditable, des tracés vectoriels ou une image intégrée tout en partageant la même extension.

Si ton logo de départ n’existe qu’en image matricielle, le vectoriseur de logos de PerfectVector peut reconstruire le dessin de l’emblème. Examine et nettoie ces tracés, puis ressaisis les mots comme texte éditable avant d’ajuster le libellé. Un mot vectorisé est de la géométrie de tracé ; textLength ne peut pas modifier l’espacement de ses caractères. Notre guide pratique de vectorisation de logos traite de cette étape de reconstruction de la source.

FAQ

textLength réduit-il seulement les textes trop longs ? Non. Il demande une longueur ; il peut donc aussi élargir un texte naturellement plus court. Mesure le libellé naturel et applique ta propre condition si tu as besoin d’une règle de largeur maximale.

Quelle valeur de lengthAdjust préserve la forme des lettres ? Utilise spacing pour ajuster l’espacement des caractères sans étirer les glyphes. Un grand ajustement peut quand même créer des espaces maladroits ou des chevauchements ; examine donc le lettrage à sa taille finale.

textLength peut-il ajuster un lettrage vectorisé depuis un PNG ? Il agit sur le texte SVG, pas sur des tracés en forme de lettres. Ressaisis les mots comme texte éditable si tu as besoin de textLength ou d’un espacement des caractères modifiable, tout en gardant l’emblème comme dessin vectoriel distinct.

Sources

1. W3C — Ajustement du texte SVG 2 — Les deux modes et leur effet sur les formes et les avances des glyphes.
2. MDN — textLength — Longueur demandée et mode spacing par défaut.
3. MDN — FontFaceSet.ready — Attendre le chargement des polices et la mise en page.
4. MDN — getComputedTextLength — Mesurer un élément de texte SVG.
5. Google Fonts — Abel — Police et licence utilisées dans la comparaison originale.

Reconstruis un emblème matriciel avec le vectoriseur de logos si nécessaire, puis garde le lettrage dans un élément texte distinct. Compare le libellé final à taille normale avant de produire une copie de livraison en tracés ou un export matriciel.