SVG-textLength: Beschriftungen ohne verzerrte Buchstaben

Verwende textLength mit lengthAdjust="spacing", wenn eine SVG-Beschriftung eine bestimmte Länge benötigt und eine kleine Abstandskorrektur akzeptabel ist. Die Glyphenformen bleiben unverändert. Wenn du spacingAndGlyphs wählst, kann der Renderer die Buchstaben selbst entlang der Textzeile strecken oder stauchen. Das sind die beiden in der SVG-Textspezifikation definierten Modi.

Der Haken ist das Ziel: textLength ist eine angeforderte Länge, keine maximale Breite. Es kann eine kurze Beschriftung ebenso auseinanderziehen, wie es eine lange zusammendrückt. Außerdem erzeugt es keine umgebrochenen Zeilen.

Was die jeweilige Anpassung verändert

spacing ist der Standard, wenn du textLength ohne einen lengthAdjust-Wert setzt. Die textLength-Referenz von MDN erklärt, wie angeforderte Länge und Anpassungsmodus zusammenwirken.

Verwende für gewöhnliche Markengestaltung eine kleine Korrektur und prüfe sie. Eine Beschriftung, die stark verkürzt werden müsste, verdient meist eine kleinere Schriftgröße, einen kürzeren Wortlaut oder mehr Platz im Layout.

Eine kurze und eine lange Beschriftung mit demselben Zielwert

Wir haben ein eigenes rautenförmiges Emblem gezeichnet und zwei bearbeitbare Beschriftungen in Abel Regular mit einer Schriftgröße von 64 SVG-Einheiten getestet. Nach dem Laden der vorgesehenen Schrift maß der Browser PINE mit etwa 115.6 Einheiten und PINE & FIELD mit 325.3 Einheiten. Beide angepassten Zeilen verlangen 240 Einheiten.

Gleiches Ziel, andere Typografie

Bei der kurzen Beschriftung erzeugt spacing auffällige Lücken. Bei der langen drängt es die Buchstaben zusammen. Die Glyphen behalten in beiden Fällen ihre Formen, dennoch passt keines der Ergebnisse gut zu diesem Design. Die Zeile mit spacingAndGlyphs erreicht dieselbe Ausdehnung, indem sie die Proportionen der Schrift sichtbar verändert.

Unser Test verwendete Chrome 154 im In-App-Browser. Wir haben die horizontale Ausdehnung vom Anfang des ersten Zeichens bis zum Ende des letzten gemessen; jede angepasste Zeile erreichte ungefähr 240 Einheiten. Das Testbeispiel verwendet eine lateinische Schrift und einfachen Text von links nach rechts. Es ist kein Kompatibilitätstest über mehrere Renderer oder Sprachen hinweg.

Eine maßvolle Längenkorrektur festlegen

Für die lange Beschriftung oben liegen 330 Einheiten nahe an ihrer natürlichen Länge von 325.3 Einheiten. Das ist ein nützlicheres Kalibrierungsbeispiel, als sie auf 240 zu zwingen.

Lade Abel-Regular.ttf und ihre OFL.txt aus dem Google-Fonts-Verzeichnis für Abel herunter. Lege sie in einem Ordner fonts neben einer HTML-Datei mit diesem Markup ab und stelle diesen Ordner dann über einen lokalen Server bereit:

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

Der einheitenlose Wert 330 gehört zum Koordinatensystem des SVG. Das Skalieren des gesamten SVG auf einer Seite skaliert auch diese Distanz auf dem Bildschirm. Halte Emblem und Text getrennt, damit eine typografische Änderung die Zeichnung nicht verändert.

Die Schrift bleibt wichtig. textLength verwandelt die Buchstaben nicht in Pfade und verpackt auch nicht die Schriftdatei. Wenn sich die Buchstabenformen auf einem anderen Rechner ändern, untersuche zuerst die Schriftersetzung in SVG, bevor du ihre Abstände anpasst.

Für eine maximale Breite zuerst messen

Wenn die Regel lautet „kurze Beschriftungen unverändert lassen, nur lange verkleinern“, füge diese Bedingung selbst hinzu. Dieses Beispiel reduziert die Schriftgröße, sodass die Buchstaben ihre Proportionen behalten, während sie in beiden Dimensionen kleiner werden.

Platziere dieses Skript nach dem SVG oben. Es ersetzt die feste Anpassung auf 330 Einheiten durch ein Maximum von 240 Einheiten:

<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 wartet, bis das Laden der Schriften und die Layoutarbeit des Dokuments abgeschlossen sind. Der ausdrückliche load()-Aufruf fordert zuerst den im Beispiel verwendeten Schriftschnitt an. Wenn du misst, bevor der vorgesehene Schriftschnitt geladen ist, kann die Einpassungsentscheidung auf einer Ersatzschrift beruhen.

Wir entfernen textLength, bevor wir getComputedTextLength() aufrufen, weil dieser Zweig die natürliche Länge benötigt. In unserem Browsertest meldete diese Methode für die spacing-Zeilen weiterhin die natürliche Länge, obwohl sich die angezeigte Ausdehnung vom Anfang bis zum Ende geändert hatte. Gehe nicht davon aus, dass sie universell die angepasste sichtbare Breite misst.

Mit diesem Skript behält die kurze Beschriftung PINE ihre Größe von 64 Einheiten. Die lange Beschriftung sinkt auf etwa 47.2 Einheiten. Prüfe das Ergebnis in der tatsächlichen Anzeige- oder Druckgröße. Wenn die verkleinerten Wörter zu klein sind, ändere Layout oder Wortlaut, statt die Größe unbegrenzt zu senken. Führe die Einpassung erneut aus, wenn sich Wortlaut oder Schrifteinstellungen ändern.

Die endgültige Beschriftung in ihrer Zielanwendung prüfen

Die rechnerische Einpassung ist nur eine Prüfung. Betrachte die Buchstabenpaare und den Abstand zwischen Emblem und Text in der endgültigen Größe. Belasse gewöhnliche Beschriftungen bei ihren natürlichen Abständen, sofern das Design keine Kalibrierung benötigt.

Erstelle und positioniere mehrere Zeilen bewusst; textLength allein liefert keine Umbruchregeln. Verwende für ein gebogenes Abzeichen den separaten Ablauf für SVG-Text auf einem Pfad. Dieser Leitfaden steuert die Grundlinie, der die Buchstaben folgen.

Behalte die Quelle mit bearbeitbarem Text und öffne anschließend die Übergabedatei in dem Editor, Browser oder Renderer, der sie tatsächlich verwenden wird. Der Leitfaden zu SVG-Dateien erklärt, warum ein SVG trotz derselben Endung bearbeitbaren Text, Vektorpfade oder ein eingebettetes Bild enthalten kann.

Wenn dein Ausgangslogo nur als Rasterbild vorliegt, kann PerfectVectors Logo-Vektorisierer die Grafik für das Emblem rekonstruieren. Prüfe und bereinige diese Pfade und setze anschließend die Wörter neu als bearbeitbaren Text, bevor du die Beschriftung einpasst. Ein nachgezeichnetes Wort ist Pfadgeometrie; textLength kann seine Zeichenabstände nicht ändern. Unsere Anleitung zur Logo-Vektorisierung behandelt diesen Schritt zur Quellenrekonstruktion.

FAQ

Verkleinert textLength nur Text, der zu lang ist? Nein. Es fordert eine Länge an und kann deshalb auch Text vergrößern, der von Natur aus kürzer ist. Miss die natürliche Beschriftung und wende deine eigene Bedingung an, wenn du eine Regel für maximale Breite brauchst.

Welcher lengthAdjust-Wert erhält die Buchstabenformen? Verwende spacing, um die Zeichenabstände anzupassen, ohne die Glyphen zu strecken. Eine große Anpassung kann trotzdem unpassende Lücken oder Kollisionen erzeugen. Prüfe den Schriftzug deshalb in seiner endgültigen Größe.

Kann textLength aus einem PNG nachgezeichnete Schrift einpassen? Es arbeitet mit SVG-Text, nicht mit buchstabenförmigen Pfaden. Setze den Wortlaut neu als bearbeitbaren Text, wenn du textLength oder bearbeitbare Zeichenabstände benötigst, und halte das Emblem als separate Vektorgrafik.

Quellen

1. W3C — SVG-2-Textanpassung — Die beiden Modi und ihre Wirkung auf Glyphenformen und Vorschubweiten.
2. MDN — textLength — Angeforderte Länge und standardmäßiger spacing-Modus.
3. MDN — FontFaceSet.ready — Warten auf Schriftladen und Layout.
4. MDN — getComputedTextLength — Messen eines SVG-Textelements.
5. Google Fonts — Abel — Schrift und Lizenz des eigenen Vergleichs.

Rekonstruiere bei Bedarf ein Rasteremblem mit dem Logo-Vektorisierer und halte den Schriftzug anschließend als separates Textelement. Vergleiche die endgültige Beschriftung in normaler Größe, bevor du eine Übergabekopie mit Schrift in Pfaden oder einen Rasterexport erstellst.