PerfectVector
Von Irene Kim8 Min. Lesezeit

SVG in FontForge: Zeichnungen zu Glyphenkonturen

Importiere SVG-Grafiken in einen FontForge-Glyphenplatz und prüfe Konturen, Grundlinie, Maßstab und Abstände. Erfahre, was Nachzeichnen liefert und was Schriftdesign bleibt.

Auf dieser Seite

Um ein SVG in FontForge zu importieren, öffne den gewünschten Glyphenplatz, wähle File → Import, stelle das Format auf SVG und wähle deine Datei aus. Das Ergebnis ist Umrissgeometrie im Bearbeitungsfenster dieser Glyphe. Bevor du eine brauchbare Schrift erzeugst, musst du weiterhin Position, Größe, Konturen und Abstände prüfen.

Dieser Unterschied ist wichtig, wenn die Quelle eine Zeichnung ist. Nachzeichnen kann Formen aus Pixeln wiederherstellen. Es kann nicht die gewünschte Grundlinie, Dickte oder den Abstandsrhythmus einer Schrift bestimmen. Beginne mit einer Glyphe und schließe diese Prüfungen ab, bevor du ein Alphabet importierst.

Importiere in einen Glyphenplatz, nicht nur in ein offenes Schriftfenster

Erstelle ein neues FontForge-Dokument oder öffne deine Arbeitsschrift und doppelklicke dann auf den Zeichenplatz, den du bearbeiten möchtest. Importiere das SVG über File → Import in diesem Umrissfenster. Listet die Dateiauswahl zunächst Bitmapformate auf, stelle ihren Formatfilter auf SVG um. Diese Reihenfolge beschreibt FontForges Tutorial zum Umrissimport.

Prüfe zuerst das Ziel. Wenn du ein eigenes kleines g hinzufügst, bestätige, dass du den gewünschten g-Platz bearbeitest. Eine Datei namens g.svg ersetzt nicht die Prüfung der Glyphe und ihrer Zeichenzuordnung. Speichere eine Kopie einer bestehenden Schrift, bevor du Konturen ersetzt.

Wähle nach dem Import einen Punkt aus und bestätige, dass du bearbeitbare Konturen hast. Wenn du nur ein Bild als Nachzeichnungsreferenz hast, hast du nicht dasselbe Ergebnis erreicht. FontForges Dokumentation zum File-Menü unterscheidet Bildimporte, Glyphenkonturen und Schriftdateioperationen.

Ziel dieses Leitfadens ist eine gewöhnliche Umrissglyphe. Spezialisierte Workflows für mehrschichtige oder farbige Schriften haben zusätzliche Anforderungen; eine browserfertige Illustration wird auch nicht automatisch zu einer solchen Schrift.

Verwende vorhandene Vektororiginale

Wenn du die Glyphe in einem Vektoreditor gezeichnet hast, bereite diese Grafik direkt vor. Behalte ihre ursprünglichen Konturen, erstelle eine separate Importkopie und vereinfache darin nicht unterstützte Darstellungsfunktionen. Erneutes Nachzeichnen eines Bildes bestehender Vektoren kann Formen verändern, die du bereits kontrollierst.

Wenn die Quelle eine Rasterzeichnung oder ein generiertes Symbol ist, wandle das Bild mit PerfectVector in Vektorpfade um und prüfe das SVG. Damit erhältst du eine Ausgangskontur zur Bearbeitung. FontForge bleibt der Ort, an dem du Metriken, Abstände und Schriftverhalten der Glyphe aufbaust.

Wähle für ein handgezeichnetes Design eine klare, kontrastreiche Quelle. Schneide benachbarte Zeichen und störende Papierdetails weg, erhalte aber die vollständige Ober- oder Unterlänge. Der Leitfaden zur Vektorisierung von Handlettering behandelt die Quellenvorbereitung; die Erklärung zur Bildvektorisierung beschreibt, was die Konvertierung tatsächlich erzeugt.

Ein nachgezeichneter Buchstabe bleibt Grafikgeometrie

Wir haben ein eigenes kleines Raster-g mit einer breiten Punze und einer klaren Unterlänge vorbereitet und durch PerfectVector konvertiert. Das rohe SVG enthielt drei geschlossene Pfade: einen fast weißen Zeichenflächenhintergrund, eine schwarze Buchstabensilhouette und eine fast weiße Punzenform. Es enthielt keine eingebetteten Bilder.

Die weiße Punze war über die schwarze Silhouette gemalt. Sie war noch keine Innenkontur einer fertigen Schriftglyphe. Nur die weiße Form zu entfernen, würde darunter durchgehendes Schwarz freilegen. Entferne in der Importkopie den bestätigten Hintergrund und bereite die Punze als echte Öffnung vor, bevor du die Glyphenfüllung bewertest.

Vorbereitetes kleines Raster-g neben tatsächlicher SVG-Ausgabe mit drei geschlossenen Pfaden, weiß übermalter Punze und blauen SVG-Pfadumrissen
Vorbereitete eigene Rasterglyphe und tatsächliche PerfectVector-SVG-Ausgabe. Die Rohdatei hat drei Pfade einschließlich Hintergrund und aufgemalter Punze. Weder FontForge-Import noch fertige Schrift werden gezeigt. Blaue Linien überlagern zur Prüfung die tatsächlichen SVG-Pfade; Hintergrundumrisse sind ausgelassen.

Der Vergleich zeigt die von uns geprüften Konturen, keinen FontForge-Test. Wir haben dieser Ausgabe weder Grundlinie noch em-Größe, Dickte oder Kerning zugewiesen. Eine sauber aussehende Unterlänge zeigt, wohin die Zeichnung reicht; sie sagt der Schrift nicht, wo die Grundlinie liegt.

Bereite eindeutige Konturen vor den Metriken vor

Behalte ein unverändertes SVG und eine separate Arbeitskopie. Entferne in der Arbeitskopie unbeteiligte Hintergrundformen, wandle Konturen in Flächen um, wenn ihre sichtbare Dicke die Glyphe definiert, und löse Masken oder beschnittene Effekte in die Formen auf, die du behalten möchtest. FontForge importiert einen Teilumfang von SVG, wie seine Importreferenz erklärt.

Prüfe bei einem Buchstaben mit Punze sowohl Außen- als auch Innenbegrenzung. Sie müssen den gewünschten gefüllten Bereich beschreiben. Eine weiße Überlagerung kann das Aussehen auf einer weißen Seite nachahmen, ohne der Schrift die richtige Konturstruktur zu geben.

Prüfe nach dem Import der vorbereiteten Grafik auf offene Enden, versehentliche Überlappungen und Selbstüberschneidungen. Element → Correct Direction legt abwechselnde Richtungen für äußere und verschachtelte Konturen fest, kann aber bei sich kreuzenden Splines unerwartete Ergebnisse erzeugen. Behebe diese Kreuzungen, bevor du dem Befehl vertraust. FontForge dokumentiert diese Einschränkung in seiner Referenz zum Element-Menü.

Vereinfache nicht allein nach einer Zielanzahl von Knoten. Erhalte Ecken, Endformen und Kurven, die deine Zeichnung definieren. Der Leitfaden zu übermäßig vielen SVG-Knoten kann bei der Diagnose unruhiger Konturen helfen, aber eine Schriftkontur verlangt auch typografisches Urteil in den Größen, in denen sie gelesen wird.

Richte vor der Höhenbeurteilung die Grundlinie aus

Importierte Grafiken können zu klein, zu groß oder gegenüber dem gewünschten Ursprung versetzt ankommen. Wähle alle Punkte der Glyphe aus und verschiebe oder skaliere sie gemeinsam. FontForges Importtutorial beschreibt das Verschieben des Umrisses an seine Position und gleichmäßige Skalierung über Element → Transform → Transform.

Richte beim kleinen g nicht den tiefsten Punkt an der Grundlinie aus: Dieser gehört zur Unterlänge. Setze den Buchstabenkörper relativ zur gewünschten Grundlinie und x-Höhe und lasse die Unterlänge darunter. Vergleiche mit benachbarten Kleinbuchstaben desselben Designs, wenn diese bereits existieren.

Verwende beim Vorbereiten weiterer Buchstaben ein einheitliches Quellkoordinatensystem. FontForges Tutorial beschreibt einen Workflow mit 1.000 Einheiten, während der Importleitfaden von Design With FontForge erklärt, wie die vertikalen SVG-Koordinaten mit Ascent und Descent zusammenhängen. Behandle diese Hinweise als abgestimmte Einrichtungsanleitung, nicht als Regel, jedes bestehende SVG zu einem Quadrat zu strecken.

Eine Schrift mit anderen Einheiten pro em braucht einen passenden Plan. Ebenso kann durch enges Zuschneiden jedes Buchstabens auf unterschiedlich hohe SVG-Seiten die gemeinsame Referenz verloren gehen, die du für konsistente Platzierung brauchst. Lege diese Referenz mit einer oder zwei Glyphen fest, bevor du den Rest bearbeitest.

Lege Abstände im Zusammenhang fest

Die sichtbare Breite eines Buchstabens und seine Dickte unterscheiden sich. Die Dickte gibt an, wo das nächste Zeichen beginnt; der Leerraum um die Kontur trägt zum Rhythmus eines Wortes bei.

Öffne das Metrics-Fenster über das Menü Window und prüfe die Glyphe neben anderen Buchstaben. FontForges Metriktutorial beschreibt, wie du die linke Vorbreite durch Verschieben der Kontur und die rechte Nachbreite über die Dicktenlinie änderst.

Vergleiche für ein erstes g wiederholte Buchstaben und kurze Kombinationen mit bereits gezeichneten Glyphen, etwa gg, ng und go. Betrachte die Zwischenräume, nicht nur die Konturen. Verwende Kerning nicht, um jede schlecht gewählte Standardvor- oder -nachbreite auszugleichen; lege zuerst vernünftige Abstände für gewöhnliche Nachbarn fest und behandle dann Sonderpaare.

Eine Glyphe, die auf einer SVG-Seite zentriert aussieht, kann im Text trotzdem ungeschickt stehen. Umgekehrt ist numerisch gleicher Raum auf beiden Seiten nicht immer der optisch richtige Abstand. Behalte die SVG-Grenzen als Geometriereferenz und beurteile die Schrift in einer Textzeile.

Validiere und erzeuge eine Testschrift

Speichere das bearbeitbare FontForge-Projekt, bevor du eine Schriftdatei erzeugst. Save erhält die Arbeitsquelle; Generate Fonts erzeugt ein Schriftformat wie TrueType oder OpenType. Das Tutorial zu Prüfung und Generierung erklärt diese Trennung.

Führe Element → Find Problems für die vorbereiteten Glyphen aus. Prüfe die gemeldeten Probleme, statt jede vorgeschlagene Änderung automatisch anzunehmen: FontForge weist darauf hin, dass manche Befunde bewusste Designentscheidungen widerspiegeln können. Prüfe die Glyphen danach erneut visuell.

Erzeuge eine Testschrift und probiere sie in der Anwendung aus, in der du sie verwenden möchtest. Prüfe Zeichenzuordnung, Punze, Grundlinie, Freiraum für Unterlängen und Abstände bei kleinen und großen Textgrößen. Wenn die Schrift noch ein kleiner Prototyp ist, mache diesen Testumfang deutlich. Der Import einer gelungenen Kontur belegt nicht, dass eine ganze Schrift fertig ist.

FAQ

Warum hat mein SVG in FontForge die falsche Größe oder Position? Seine Quellkoordinaten und Seitenabmessungen passen möglicherweise nicht zur em- und Grundlinieneinrichtung der Schrift. Verschiebe und skaliere die importierte Kontur konsistent und lege dann einen gemeinsamen Koordinatenplan fest, bevor du weitere Glyphen vorbereitest.

Kann PerfectVector aus einer Zeichnung eine vollständige Schrift machen? PerfectVector konvertiert Rastergrafiken in Vektorpfade. Du benötigst weiterhin einen Schrifteditor, um Glyphenkonturen, Zeichenzuordnung, Metriken, Abstände und die erzeugte Schriftdatei vorzubereiten.

Warum füllt sich die Punze des Buchstabens? Prüfe, ob die scheinbare Öffnung eine weiße Überlagerung ist, ob die Innenkontur vorhanden ist und ob Konturrichtungen oder Kreuzungen repariert werden müssen. Prüfe die Füllung der vorbereiteten Glyphe, statt dich auf das Aussehen des Original-SVGs auf einer weißen Seite zu verlassen.

Sollte ich alle meine SVG-Buchstaben auf einmal importieren? Stelle zuerst eine repräsentative Glyphe fertig. Bestätige Maßstab, Grundlinie, Konturen und Abstände und wende dann eine einheitliche Vorbereitung auf die übrigen Buchstaben an. Stapelimport kann diese Designwerte nicht für dich bestimmen.

Quellen

  1. FontForge-Tutorial zum Umrissimport — Import in Glyphenplätze, Positionierung, gleichmäßige Skalierung und abgestimmte Quellabmessungen.
  2. FontForge-File-Menü — Importtypen, SVG-Unterstützung und Operationen an Quell- und Schriftdateien.
  3. FontForge-Element-Menü — Korrektur von Konturrichtungen und ihre Grenzen bei Kreuzungen.
  4. Design With FontForge: Glyphen importieren — SVG-Koordinaten sowie Ascent- und Descent-Einrichtung.
  5. FontForge-Metriktutorial — Vor- und Nachbreiten, Dickte, Abstände im Zusammenhang und Kerning.
  6. FontForge-Tutorial zu Prüfung und Generierung — Probleme prüfen und ein nutzbares Schriftformat erzeugen.

Wenn deine erste Glyphe nur als Pixel existiert, konvertiere die Zeichnung in bearbeitbare Vektoren, prüfe Punze und Außenkontur und stelle dann diese eine Glyphe in FontForge fertig. Eine richtig platzierte, mit Abständen versehene und getestete Kontur ist ein brauchbarer Ausgangspunkt für den Rest der Schrift.

Mehr aus dem Blog

Starte mit einer sauberen SVG,
die leichter zu bearbeiten ist