SVG-Text auf einem Pfad: Bearbeitbare Abzeichenschrift

Um SVG-Text auf einen Pfad zu setzen, definiere einen Pfad mit einer ID, referenziere ihn über ein <textPath> innerhalb von <text> und schreibe die Wörter zwischen die Tags. Kombiniere für zentrierte Schrift startOffset="50%" mit text-anchor="middle". Halte das Emblem in einer separaten Gruppe, damit du die Wörter ändern kannst, ohne die Grafik neu aufzubauen.

Diese Trennung ist hilfreich, wenn du ein Vereinsabzeichen, Ladenzeichen oder Veranstaltungslogo wiederherstellst. Vielleicht benötigst du Vektorpfade für das zentrale Emblem und musst zugleich ein Datum korrigieren oder einen Namen ändern. Das gesamte Abzeichen nachzuzeichnen erzeugt Buchstabenformen, keine bearbeitbare Textzeichenfolge. Baue die Typografie als bearbeitbaren Text neu auf, wenn der Wortlaut bearbeitbar bleiben muss.

Passe bei horizontaler Schrift neben einem Emblem eine gerade SVG-Beschriftung mit textLength ein und vergleiche Abstandsänderungen, bevor du die Glyphenproportionen anpasst.

Mit drei getrennten Teilen beginnen

Ein Abzeichen benötigt ein Emblem, einen Führungspfad und den Text, der diesem Pfad folgt. Die Führung steuert die Schriftposition; sie muss im fertigen Design nicht sichtbar sein. Die textPath-Referenz von MDN dokumentiert die href-Verbindung zwischen Text und Pfad.

Für das Beispiel unten haben wir eine einfache Kiefer und eine halbkreisförmige Führung in SVG-Code gezeichnet. Beide sind eigene Demonstrationsgrafik, keine PerfectVector-Konvertierungsausgabe. Das Abzeichen trägt PINE TRAIL CLUB; die Schrift bleibt während aller Konstruktionsschritte eine Textzeichenfolge.

Das bearbeitbare Abzeichen erstellen

Speichere diesen Code als badge.svg und öffne ihn in einem Browser. Behalte die Datei als bearbeitbare Vorlage. Wenn dir das Format neu ist, erklärt unser Leitfaden zu SVG-Dateien den Unterschied zwischen Text, Pfaden und eingebetteten Bildern.

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

Der Pfad beginnt bei (70, 215) und folgt einem oberen Halbkreis bis (330, 215). Sein Radius beträgt 130 Einheiten. Den Pfad in <defs> abzulegen macht ihn referenzierbar, ohne eine sichtbare Kontur zu zeichnen. Der helle äußere Kreis ist eine separate gezeichnete Form.

Ändere PINE TRAIL CLUB zu deinem eigenen kurzen Namen, speichere und lade neu. Der Baum sollte feststehen, während die neuen Wörter derselben Führung folgen. Ein längerer Name braucht eine weitere Einpassungsprüfung; Zentrieren lässt nicht beliebigen Text auf den Bogen passen.

Mit Versatz und Anker zentrieren

startOffset="50%" setzt die Referenzposition des Texts auf die Hälfte des Pfads. text-anchor="middle" richtet die Textmitte an dieser Position aus. Der eine Wert wählt eine Position auf der Kurve; der andere bestimmt, welcher Teil des Texts dort sitzt. Die startOffset-Referenz und die text-anchor-Referenz beschreiben diese Einstellungen.

Ändere testweise nur text-anchor zu start. Bei diesem Text von links nach rechts beginnen die Wörter nun am Mittelpunkt und laufen zum rechten Endpunkt weiter. In unserem Browsertest verschob das die Schrift auf die rechte Seite und ließ einen Teil der Phrase über den nutzbaren Bogen hinauslaufen. Stelle vor dem Anpassen der Schriftgröße middle wieder her.

Prüfe bei einem symmetrischen Abzeichen das Ergebnis nach der mathematischen Zentrierung visuell. Buchstaben haben unterschiedliche Formen und seitliche Abstände; eine zentrierte Textvorschubweite kann weiterhin eine kleine optische Anpassung benötigen. Halte eine solche Anpassung bewusst, statt mehrere unabhängige Koordinaten zu ändern, bis das Ergebnis ungefähr passt.

Die Pfadrichtung vor dem Verschieben des Texts prüfen

Kehre genau diesen oberen Bogen um, indem du seinen d-Wert ersetzt durch:

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

Anfang und Ende tauschen die Positionen, und das Sweep-Flag des Bogens ändert sich. Für eine visuelle Erklärung beider Bogen-Flags sieh dir die vier SVG-Bogen-Flag-Kombinationen an. Die geometrische Kurve bleibt am selben Ort, aber der Text folgt ihr in Gegenrichtung. In unserem Browsertest änderte diese Umkehrung die Schriftausrichtung. Stelle den Originalpfad wieder her, um die Schrift auf der Oberseite dieses Abzeichens aufrecht darzustellen.

Pfadumkehrung ist etwas anderes als die Schreibweise umzukehren oder die Schreibrichtung einer Sprache zu setzen. Behalte die Wörter unverändert. Die SVG-Textlayoutspezifikation erklärt die Glyphenplatzierung entlang eines Pfads. Erstelle und teste für eine untere Zeile eine separate untere Führung, statt den oberen Text so lange zu verschieben, bis er das Emblem kreuzt.

Die Schrift vor den endgültigen Abständen wählen

Das Beispiel fordert Georgia an, dann eine generische Serifenschrift als Ersatz. Diese Angabe bettet keine Schrift im SVG ein. Der Renderer wählt einen verfügbaren Schriftschnitt aus der Familienliste, wie in MDNs font-family-Referenz beschrieben.

In unserer Chromium-Demonstration änderte der Wechsel desselben Wortlauts von Georgia, serif zu Arial, sans-serif die gemessene Textvorschubweite. Bogen und Emblem blieben unverändert. Wichtig sind die belegte Ausdehnung und das Erscheinungsbild der Buchstaben, nicht eine bestimmte Breite, die ein anderer Rechner anders darstellen kann.

Lege bei einem echten Abzeichen die vorgesehene Schrift und Schriftstärke fest, bevor du Größe oder Zeichenabstände anpasst. Öffne das SVG anschließend erneut in der Umgebung, in der es verwendet wird. Wenn sich die Schrift dort ändert, verwende den Leitfaden zur SVG-Schriftfehlersuche, um Ersetzung oder Importverhalten einzugrenzen.

Wenn der Wortlaut über den Bogen hinausläuft, versuche eine kürzere Phrase, kleinere Schriftgröße oder breitere Führung. Prüfe nach jeder Änderung das gesamte Abzeichen. Ein größerer Führungsradius kann die Schrift näher an den Außenrand schieben; kleinere Schrift kann ein kleines gedrucktes Abzeichen schwerer lesbar machen. Vermeide, die Buchstaben nur zum Füllen einer festen Ausdehnung zu strecken, sofern diese Verzerrung nicht zum Design gehört.

Nur die Grafik rekonstruieren, die nachgezeichnet werden muss

Wenn das Emblem nur innerhalb eines PNG oder JPG existiert, trenne die Rekonstruktion von der Typografieaufgabe. Verwende eine Kopie der Quelle, die das Emblem möglichst sauber isoliert. Behalte das vollständige Original als visuelle Referenz zum Neuaufbau des Abzeichens.

Vektorisiere das Rasteremblem mit PerfectVector und vergleiche dann seine Silhouette, inneren Zwischenräume und kleinen Details mit der Quelle. Verwende die akzeptierte SVG-Grafik in der Emblemgruppe und baue den Wortlaut separat mit der vorgesehenen Schrift neu auf. PerfectVector erzeugt Vektorpfade aus dem Bild; dieser Ablauf hängt weder von OCR noch von Schriftidentifikation oder automatischer Rekonstruktion gebogenen bearbeitbaren Texts ab.

Wenn das ursprüngliche Vektoremblem verfügbar ist, verwende es erneut. Wenn die Schrift von Hand gezeichnet ist und ihre unregelmäßigen Formen wichtig sind, folge dem Ablauf von Handlettering zu Vektoren, statt sie durch eine Schrift zu ersetzen. Unser Leitfaden zur Logo-Vektorisierung behandelt die umfassendere Entscheidung zwischen Nachzeichnen, neuem Setzen und manueller Reparatur.

Der einfache Baum im Beispiel vermeidet eine Importkomplikation: Ein vorhandenes Emblem kann ein anderes Koordinatensystem verwenden oder Transformationen enthalten. Skaliere und positioniere diese Gruppe innerhalb der viewBox des Abzeichens und prüfe sie erneut mit sichtbarem Text. Verändere nicht die Schriftführung, um ein falsch platziertes Emblem auszugleichen.

Eine bearbeitbare Vorlage behalten und eine Übergabekopie erstellen

Bearbeitbarer Text ist die nützliche Vorlage, wenn sich Namen, Daten oder Wortlaut ändern können. Bei einem festen Abzeichen für einen anderen Editor oder ein Produktionswerkzeug nimmt eine Kopie mit Text in Pfaden dem Empfänger die Notwendigkeit, die Glyphenformen der Schrift nachzubilden. Die Wörter werden zu Vektorpfaden und verlieren normale Textbearbeitung.

In Illustrators SVG-Speicheroptionen konvertiert Convert To Outlines Schrift in Pfade. Adobe warnt außerdem, dass exportierter Text auf einem Pfad in SVG-Betrachtern anders dargestellt werden kann. Das sind Gründe, die exportierte Kopie in ihrer Zielanwendung zu prüfen, keine Garantie, dass jedes nachgelagerte Werkzeug das vollständige Abzeichen nachbildet. Siehe Adobes SVG-Speicherdokumentation.

Verwende diese Übergabereihenfolge:

1. Speichere die Vorlage mit bearbeitbarem Text, bevor du etwas in Pfade umwandelst.
2. Bestätige Wortlaut, Schrift, Pfadrichtung, Zentrierung und Abstände.
3. Erstelle eine separate Übergabekopie und wandle deren Text in deinem Editor in Pfade um.
4. Öffne diese Kopie erneut und vergleiche sämtliche Buchstaben, Innenräume, Zwischenräume und das Emblem.
5. Prüfe das Abzeichen in seiner vorgesehenen Ausgabegröße in der Zielanwendung.

Das Umwandeln in Pfade fixiert das aktuelle Schrifterscheinungsbild. Wenn dabei die falsche Ersatzschrift aktiv ist, fixierst du die falschen Buchstaben. Behalte bei einem Webbild außerdem einen aussagekräftigen Namen für assistive Technologien; Buchstabenformen in Pfaden tragen die ursprüngliche Textzeichenfolge nicht von selbst.

FAQ

Warum ist mein SVG-Text auf dem Pfad nicht zentriert? Verwende für das zentrierte Beispiel startOffset="50%" zusammen mit text-anchor="middle". Ein Versatz von 50% mit einem start-Anker beginnt die Phrase auf halber Strecke der Führung. Prüfe außerdem die Pfadform und ob der gesamte Wortlaut passt.

Warum steht der Text auf dem Kopf? Prüfe die Führungsrichtung. Text folgt dem Pfad in dessen gezeichneter Richtung, weshalb das Umkehren des Pfads die Schriftausrichtung ändern kann. Teste die Führungsrichtung, bevor du den Text verschiebst oder seine Schreibweise änderst.

Erzeugt das Vektorisieren eines Abzeichens bearbeitbaren gebogenen Text? Die Vektorisierung rekonstruiert sichtbare Buchstabenformen als Grafik. Baue für bearbeitbaren Wortlaut den Text separat mit der vorgesehenen Schrift und einer textPath-Führung neu auf. Behalte vor dem Erstellen einer Übergabekopie mit Text in Pfaden eine Vorlage mit bearbeitbarem Text.

Quellen

1. MDN — textPath — Verbindet bearbeitbaren Text mit einem referenzierten Pfad.
2. MDN — startOffset — Positioniert Text entlang der Führung.
3. MDN — text-anchor — Richtet Text relativ zu seiner Referenzposition aus.
4. W3C — SVG-2-Text — Glyphenplatzierung und Layoutregeln für Text auf Pfaden.
5. MDN — font-family — Verfügbare Schriften und Wahl einer Ersatzfamilie.
6. Adobe — Grafik in Illustrator speichern — Schriftumwandlung in Pfade und Exportgrenzen für Text auf Pfaden.

Baue die Schrift um das freigegebene Emblem auf und halte die Wörter bearbeitbar, bis das Abzeichen fertig ist. Wenn dein Emblem in einem Rasterbild steckt, rekonstruiere seine Vektorpfade, prüfe die kleinen Details und verwende die akzeptierte Grafik in deiner Abzeichenvorlage.