SVG-Text vertikal ausrichten: Beschriftungen zentrieren

Bei einer horizontalen SVG-Beschriftung positioniert y die gewählte Grundlinie. Es legt nicht die Oberkante der Buchstaben auf diese Koordinate. Beginne mit dominant-baseline="middle", wenn du eine kurze lateinische Beschriftung um eine horizontale Hilfslinie platzierst, und prüfe das Ergebnis in der tatsächlichen Schrift. Verwende text-anchor="middle", um den Text horizontal um seine x-Koordinate zu zentrieren.

Eine Beschriftung kann neben einem Emblem trotzdem zu hoch oder zu tief aussehen. middle und central verwenden unterschiedliche Schriftgrundlinien, während die visuelle Zentrierung von den Formen im Wort abhängt. Entscheide vor dem Hinzufügen eines Versatzes, ob das Layout eine gemeinsame Grundlinie, ein zentriertes Textfeld oder eine optische Anpassung benötigt.

Das Ausrichtungsziel wählen

Dasselbe y="100" kann unterschiedliche Buchstabenpositionen erzeugen:

Die W3C-Grundliniendefinitionen unterscheiden middle von central. Keine der Definitionen verspricht, die gezeichneten Konturen jedes Worts zu zentrieren. Auch Grundlinientabellen der Schrift und Heuristiken des Renderers spielen eine Rolle, wie die dominant-baseline-Referenz von MDN erklärt.

Bei gewöhnlichem horizontalem Text behandelt text-anchor="middle" die andere Achse. Es richtet den Textabschnitt um die angegebene horizontale Position aus; eine vertikale Zentrierung liefert es nicht. Die text-anchor-Referenz beschreibt seine Beziehung zu Textabschnitten.

Ein Emblem und eine bearbeitbare Beschriftung vergleichen

Speichere dieses vollständige Beispiel als baseline-example.svg und öffne es in einem Browser. Der Ring ist eigene Geometrie; Agyp ist eine Testzeichenfolge mit einer Oberlänge und Unterlängen. Die rote Linie markiert 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>

Ändere nur dominant-baseline zu alphabetic, dann zu central. Halte Koordinaten, Schriftgröße und Wortlaut konstant. Vergleiche als Nächstes eine zweite verfügbare Schrift. Wenn du mehrere Einstellungen gemeinsam änderst, ist schwerer zu erkennen, welche davon die Beschriftung verschoben hat.

Wir haben alle drei Werte mit geladenen Exemplaren von Arial und Times New Roman gerendert. Jedes Feld verwendet dieselben SVG-Koordinaten und denselben eigenen Ring. Die grünen Rechtecke zeigen das vom Browser gelieferte getBBox()-Ergebnis für den bearbeitbaren Text.

Die alphabetic-Beispiele sitzen relativ zur Mittellinie des Rings höher. Die middle-Beispiele rücken nach unten, während central die gemeldeten Felder nahe an der Hilfslinie platziert. Die unter jedem Muster gedruckten Messwerte gehören zu diesen Schriftdateien und dieser Browserdarstellung. Sie sind keine Versätze, die du in ein anderes Design kopieren solltest.

Unsere Schriftdateien waren vor der Messung geladen. Dein exportiertes SVG kann auf eine Ersatzschrift ausweichen, wenn seine angeforderte Schrift nicht verfügbar ist. Löse diese Abhängigkeit, bevor du die Ausrichtung beurteilst. Der Leitfaden zu Schriftänderungen in SVG behandelt die Prüfung des tatsächlichen Schriftschnitts und das Erhalten einer Übergabekopie.

Ein zentriertes Textfeld kann trotzdem unausgewogen aussehen

SVG-Textbegrenzungen sind nicht unbedingt das kleinste Rechteck um die sichtbare Schrift. Die SVG-Regeln zu Begrenzungsrahmen verwenden für Textberechnungen Glyphenzellen sowie Ober- und Unterlängenmetriken der Schrift. Ein Rechteck um diese Zellen kann Raum enthalten, den kein Buchstabe zeichnet.

Dieser Unterschied ist bei Beschriftungen wie Agyp wichtig: g, y und p reichen unter die alphabetische Grundlinie. Eine reine Großbuchstabenbeschriftung hat eine andere visuelle Verteilung. Bei der Ausrichtung sollten die vorgesehene Schrift und der tatsächliche Wortlaut vorliegen.

Behalte für eine Reihe von Beschriftungen, die auf einer Linie gelesen werden sollen, eine gemeinsame alphabetische Grundlinie bei. Wenn du jedes Wort einzeln verschiebst, bis seine sichtbare Form zentriert aussieht, kann die Reihe ungleichmäßig werden.

Vergleiche bei einer einzelnen Kombination aus Emblem und Schriftzug die Beschriftung in ihrer endgültigen Größe und passe sie nach der Grundlinienwahl visuell an. Verlangt das Layout ausdrücklich eine Ausrichtung anhand der Buchstabenkonturen, verwende in deinem Editor ein in Pfade umgewandeltes Duplikat, um diese Geometrie zu prüfen, und behalte den bearbeitbaren Text in der Vorlage. Behandle Konturbegrenzungen und optische Anpassung als getrennte Entscheidungen.

Das gemessene SVG-Textfeld zentrieren, wenn das das Ziel ist

Berechne für ein einfaches, nicht transformiertes, einzeiliges <text>-Element den Versatz von der gemeldeten Feldmitte zum Ziel. Führe dies im Dokument mit dem Beispiel aus, nachdem seine Schrift bereit ist:

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));

Die Berechnung richtet das gemeldete Textfeld an targetY aus. Sie berechnet keine visuelle Balance und entfernt nicht den ungenutzten Raum der Glyphenzellen. Miss nach Änderungen an Text, Schrift, Schriftstärke oder Größe erneut.

document.fonts.ready wartet auf das Laden der Schriften und die zugehörige Layoutarbeit. Es beweist nicht, dass deine beabsichtigte Schrift erfolgreich bereitgestellt wurde; prüfe auch die Schriftressource oder die Angaben des Browsers zur tatsächlich gerenderten Schrift.

Dieses Snippet setzt einen einzigen y-Wert, keine zeichenweisen Positionen, keine dy-Versätze und keine transformierte Textgruppe voraus. getBBox() gibt ein lokales SVG-Feld zurück. Ein Ziel in einem anderen Koordinatensystem erfordert eine Abbildung; verwende den Ablauf zu SVG-Begrenzungen, bevor du Bildschirmpixel mit SVG-Einheiten mischst.

Widersprüchliche Einstellungen beheben, bevor du weitere Versätze ergänzt

Prüfe den Text und seine übergeordneten Gruppen. Ein übrig gebliebenes dy, ein verschachteltes <tspan> oder eine Transformation kann die Platzierung beeinflussen, die du diagnostizieren willst. Entferne in einer Kopie jeweils eine verdächtige Anpassung und vergleiche das Ergebnis.

Prüfe auch die Seitenstile. CSS kann das Präsentationsattribut dominant-baseline überschreiben. Wenn eine Änderung des Attributs keine sichtbare Wirkung hat, prüfe den berechneten Wert, bevor du eine zweite Korrektur hinzufügst.

alignment-baseline behandelt, wie sich die Grundlinie eines Elements an der entsprechenden Grundlinie seines übergeordneten Elements ausrichtet. Es ist kein allgemeines Synonym für „diese Beschriftung im SVG zentrieren“. Die alignment-baseline-Referenz von MDN nennt außerdem Grenzen der Browserunterstützung. Halte den Test bei dieser eigenständigen Beschriftung auf dominant-baseline fokussiert und prüfe dann das tatsächliche Exportziel.

Dieses Beispiel behandelt horizontalen lateinischen Text in einem Browser. Gebogene Beschriftungen benötigen eine andere Platzierungsprüfung; die Anleitung zu SVG-Text auf einem Pfad trennt den Schriftzug von seiner Führungskurve. Andere Schriftsysteme und vertikale Schreibrichtungen brauchen eigene Grundlinienentscheidungen.

Das Zeichen vom Schriftzug getrennt halten

Wenn du bereits ein sauberes Vektoremblem hast, behalte es und baue die Beschriftung als bearbeitbaren Text neu auf. Das Verschieben der Beschriftung oder die Schriftwahl erfordert keine Vektorisierung.

Wenn das Emblem nur in einem PNG oder JPG existiert, kann PerfectVectors Logo-Vektorisierer einen Geometriekandidaten für diesen Teil des Designs erstellen. Prüfe seine Kontur und Aussparungen und platziere ihn dann mit der gewählten Grundlinie neben neu gesetztem Text. Eine Vektorisierung identifiziert nicht die ursprüngliche Schrift und stellt aus einem Rasterbild keine bearbeitbare Typografie wieder her.

Verwende für exakte Markenschrift die Originalschrift und Vektordateien, wenn sie verfügbar sind, oder rekonstruiere den Schriftzug bewusst. Der Leitfaden zur Logo-Vektorisierung hilft bei der Wahl zwischen Erhalten, Nachzeichnen und Neuzeichnen der Quelle.

Prüfe vor der Übergabe den tatsächlichen Wortlaut und die Schrift, betrachte die Kombination in ihrer endgültigen Größe und öffne das exportierte SVG erneut in der Zielanwendung. Behalte die bearbeitbare Vorlage, wenn die Übergabekopie Text in Pfaden verwendet.

FAQ

Ist dominant-baseline="middle" dasselbe wie central? Nein. Middle verwendet eine Grundlinie mit Bezug zur x-Höhe, während central die zentrale Schriftgrundlinie des Geviertfelds verwendet. Ihre Positionen können sich unterscheiden, und keiner der Werte garantiert die optische Zentrierung jedes Worts.

Zentriert text-anchor="middle" SVG-Text vertikal? Bei gewöhnlichem horizontalem Text steuert text-anchor die horizontale Platzierung um die x-Koordinate. Wähle die vertikale Grundlinie separat mit dominant-baseline und prüfe dann das Ergebnis in der vorgesehenen Schrift.

Kann getBBox die sichtbaren Buchstaben exakt zentrieren? Es kann das vom Browser gemeldete SVG-Textfeld zentrieren. Textbegrenzungen können Glyphenzellenraum jenseits der gezeichneten Buchstaben enthalten. Deshalb garantiert diese Berechnung weder optische Zentrierung noch enge Konturausrichtung.

Quellen

1. W3C — SVG-Grundlinienausrichtung — Definiert alphabetische, middle- und central-Grundlinien.
2. MDN — dominant-baseline — Erklärt Grundlinientabellen, Schrift-Heuristiken und CSS-Vorrang.
3. MDN — text-anchor — Dokumentiert das Verankern von Textabschnitten um eine angegebene Position.
4. W3C — SVG-Begrenzungsrahmen — Beschreibt das für Textbegrenzungen verwendete Glyphenzellenmodell.
5. MDN — FontFaceSet.ready — Definiert, wann Schriftladen und Layout abgeschlossen sind.
6. MDN — getBBox — Dokumentiert lokale SVG-Begrenzungen und ausgeschlossene Transformationen.
7. MDN — alignment-baseline — Erklärt die Ausrichtung an übergeordneten Grundlinien und Grenzen der Browserunterstützung.

Wenn dein neu aufgebautes Logo noch ein bearbeitbares Emblem benötigt, erstelle einen SVG-Kandidaten mit PerfectVector, prüfe die rekonstruierte Kontur, kombiniere die Grafik dann mit bearbeitbarer Schrift und prüfe die Ausrichtung in der endgültigen Zielanwendung.