Alignement vertical SVG : centrer un libellé reconstruit

Pour un libellé SVG horizontal, y positionne la ligne de base sélectionnée. Il ne place pas le haut des lettres à cette coordonnée. Commence par dominant-baseline="middle" pour placer un court libellé latin autour d’un repère horizontal, puis examine le résultat dans la police réelle. Utilise text-anchor="middle" pour centrer horizontalement le texte autour de sa coordonnée x.

Un libellé peut malgré tout paraître trop haut ou trop bas à côté d’un emblème. middle et central utilisent des lignes de base de police différentes, tandis que le centrage visuel dépend des formes du mot. Détermine si la mise en page exige une ligne de base commune, une boîte de texte centrée ou un ajustement optique avant d’ajouter un décalage.

Choisir la cible d’alignement

Le même y="100" peut produire des positions de lettres différentes :

Les définitions des lignes de base du W3C distinguent middle de central. Aucune définition ne promet de centrer les contours peints de chaque mot. Les tables de lignes de base des polices et les heuristiques du moteur comptent aussi, comme l’explique la référence MDN de dominant-baseline.

Pour du texte horizontal ordinaire, text-anchor="middle" agit sur l’autre axe. Il aligne le fragment de texte autour de la position horizontale donnée ; il ne fournit pas le centrage vertical. Consulte la référence de text-anchor pour son lien avec les fragments de texte.

Comparer un emblème et un libellé éditable

Enregistre cet exemple complet sous baseline-example.svg et ouvre-le dans un navigateur. L’anneau est une géométrie originale ; Agyp est une chaîne de test avec une hampe et des jambages descendants. La ligne rouge marque y=100.

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

Change seulement dominant-baseline en alphabetic, puis en central. Garde les coordonnées, la taille de police et le texte fixes. Compare ensuite une deuxième police disponible. Changer plusieurs réglages ensemble complique l’identification de celui qui a déplacé le libellé.

Nous avons rendu les trois valeurs avec des copies chargées d’Arial et de Times New Roman. Chaque panneau utilise les mêmes coordonnées SVG et le même anneau original. Les rectangles verts montrent le résultat de getBBox() renvoyé par le navigateur pour le texte éditable.

Les exemples alphabetic se trouvent plus haut par rapport à la ligne centrale de l’anneau. Les exemples middle descendent, tandis que central place les boîtes indiquées près du repère. Les mesures sous chaque spécimen correspondent à ces fichiers de police et à ce rendu navigateur. Ce ne sont pas des décalages à copier dans un autre dessin.

Nos fichiers de police étaient chargés avant la mesure. Ton SVG exporté peut choisir une police de remplacement lorsque celle demandée est indisponible ; résous cette dépendance avant de juger l’alignement. Le guide des changements de police SVG explique comment vérifier la police réelle et préserver une copie de livraison.

Une boîte de texte centrée peut quand même sembler déséquilibrée

Les limites du texte SVG ne sont pas nécessairement le plus petit rectangle autour de l’encre visible. Les règles SVG des boîtes englobantes utilisent les cellules des glyphes et les métriques d’ascension et de descente de la police pour calculer les limites du texte. Un rectangle autour de ces cellules peut inclure de l’espace qu’aucune lettre ne peint.

Cette distinction compte avec des libellés comme Agyp : le g, le y et le p descendent sous la ligne de base alphabétique. Un libellé entièrement en capitales a une autre répartition visuelle. La police prévue et le texte réel doivent être présents pendant l’ajustement de l’alignement.

Pour une rangée de libellés qui doivent se lire sur une ligne, conserve une ligne de base alphabétique commune. Décaler chaque mot individuellement jusqu’à centrer visuellement sa forme peut désaligner la rangée.

Pour une composition unique emblème et texte, compare le libellé à sa taille finale et ajuste-le visuellement après avoir choisi une ligne de base. Si la mise en page exige précisément un alignement par les contours des lettres, utilise dans ton éditeur un duplicata converti en tracés pour examiner cette géométrie, tout en gardant le texte éditable dans l’original. Traite les limites des contours et l’ajustement optique comme deux décisions distinctes.

Centrer la boîte de texte SVG mesurée si c’est l’objectif

Pour un élément <text> simple, sans transformation et sur une seule ligne, calcule le décalage entre le centre de la boîte indiquée et la cible. Exécute ceci dans le document contenant l’exemple, une fois sa police prête :

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

Le calcul aligne la boîte de texte indiquée avec targetY. Il ne calcule pas l’équilibre visuel et ne retire pas l’espace inutilisé des cellules de glyphes de la police. Mesure à nouveau après un changement de texte, de police, de graisse ou de taille.

document.fonts.ready attend le chargement des polices et le travail de mise en page associé. Cela ne prouve pas que la police prévue a bien été fournie ; vérifie aussi la ressource de police ou les informations de police rendue du navigateur.

Ce snippet suppose une seule valeur y, aucune position par caractère, aucun décalage dy et aucun groupe de texte transformé. getBBox() renvoie une boîte SVG locale. Une cible dans un autre système de coordonnées nécessite une correspondance ; utilise la procédure de limites SVG avant de mélanger pixels écran et unités SVG.

Résoudre les réglages contradictoires avant d’ajouter des décalages

Examine le texte et ses groupes parents. Un dy restant, un <tspan> imbriqué ou une transformation peut modifier le placement que tu essaies de diagnostiquer. Retire un ajustement suspect à la fois dans une copie et compare le résultat.

Vérifie aussi les styles de la page. Le CSS peut remplacer l’attribut de présentation dominant-baseline. Si changer l’attribut n’a aucun effet visible, examine la valeur calculée avant d’ajouter une seconde correction.

alignment-baseline détermine comment la ligne de base d’un élément s’aligne sur la ligne correspondante de son parent. Ce n’est pas un synonyme général de « centrer ce libellé dans le SVG ». La référence MDN de alignment-baseline indique aussi des limites de prise en charge par les navigateurs. Pour ce libellé autonome, concentre le test sur dominant-baseline, puis vérifie la destination réelle de l’export.

Cet exemple traite du texte latin horizontal dans un seul navigateur. Les libellés courbes nécessitent une autre vérification de placement ; le guide de texte SVG sur un tracé sépare le lettrage de sa courbe guide. Les autres écritures et le texte vertical nécessitent leurs propres choix de ligne de base.

Garder le symbole séparé du lettrage

Si tu as déjà un emblème vectoriel propre, conserve-le et reconstruis le libellé comme texte éditable. Déplacer le libellé ou choisir une police ne demande pas de vectorisation.

Lorsque l’emblème n’existe que dans un PNG ou JPG, le vectoriseur de logos de PerfectVector peut préparer une géométrie candidate pour cette partie du dessin. Vérifie son contour et ses ouvertures, puis place-le à côté du texte nouvellement saisi avec la ligne de base choisie. La vectorisation n’identifie pas la police originale et ne restaure pas une typographie éditable depuis une image matricielle.

Pour un lettrage de marque exact, utilise la police et les ressources vectorielles originales lorsqu’elles sont disponibles, ou reconstruis le lettrage délibérément. Le guide de vectorisation de logos aide à choisir entre préservation, vectorisation et redessin de la source.

Avant livraison, vérifie le texte et la police réels, examine la composition à sa taille finale et rouvre le SVG exporté dans sa destination. Garde l’original éditable si la copie livrée utilise du texte converti en tracés.

FAQ

dominant-baseline="middle" est-il identique à central ? Non. Middle utilise une ligne de base liée à la hauteur d’x, tandis que central utilise la ligne de base centrale de la police associée au carré em. Leurs positions peuvent différer, et aucun des deux ne garantit le centrage optique de chaque mot.

text-anchor="middle" centre-t-il verticalement le texte SVG ? Pour du texte horizontal ordinaire, text-anchor contrôle le placement horizontal autour de la coordonnée x. Choisis séparément la ligne de base verticale avec dominant-baseline, puis examine le résultat dans la police prévue.

getBBox peut-il centrer exactement les lettres visibles ? Il peut centrer la boîte de texte SVG indiquée par le navigateur. Les limites du texte peuvent inclure de l’espace des cellules de glyphes au-delà des lettres peintes ; ce calcul ne garantit donc pas le centrage optique ou l’alignement serré des contours.

Sources

1. W3C — Alignement des lignes de base SVG — Définit les lignes de base alphabetic, middle et central.
2. MDN — dominant-baseline — Explique les tables de lignes de base, heuristiques des polices et priorité du CSS.
3. MDN — text-anchor — Décrit l’ancrage des fragments de texte autour d’une position donnée.
4. W3C — Boîtes englobantes SVG — Décrit le modèle de cellules de glyphes utilisé pour les limites du texte.
5. MDN — FontFaceSet.ready — Définit la fin du chargement des polices et de la mise en page.
6. MDN — getBBox — Décrit les limites SVG locales et les exclusions de transformations.
7. MDN — alignment-baseline — Explique l’alignement sur la ligne de base parente et les limites de prise en charge navigateur.

Si ton logo reconstruit a encore besoin d’un emblème éditable, prépare un SVG candidat avec PerfectVector, examine le contour reconstruit, puis associe-le à un lettrage éditable et vérifie l’alignement dans la destination finale.