TTF in SVG umwandeln

Diese Seite wandelt eine TrueType-Schrift in einen SVG-Font um: eine einzige XML-Datei, in der jedes Zeichen ein <glyph>-Element ist und seine Kontur als SVG-Pfaddaten enthält. Das ist nützlich für Icon-Font-Tools und Schrifteditoren, aber es ist nicht dasselbe wie ein Bild Ihres Textes.

oder TTF, OTF, WOFF …-Dateien hierher ziehen ·

Max. 95 MB pro Datei· Bis zu 20 Dateien· Gelöscht nach 30 Minuten

Ausgabe

Umwandeln in

Dateien werden auf unseren Servern verarbeitet und nach 30 Minuten gelöscht.

So verwenden Sie dieses Tool

1
TTF hochladen
Fügen Sie eine oder mehrere .ttf-Dateien hinzu, bis zu 20 pro Durchgang und je 95 MB. Icon-Fonts und Textschriften funktionieren gleichermaßen.
2
SVG-Font als Ausgabe beibehalten
Umwandeln in steht auf SVG-Font. Hinting gilt nicht für SVG-Ausgaben, die Option verschwindet daher; Familienname unter Erweiterte Einstellungen benennt die Schrift weiterhin um.
3
Konvertieren in SVG
Klicken Sie auf In SVG umwandeln und laden Sie die .svg-Datei herunter. Öffnen Sie sie in einem Texteditor, in Inkscape oder FontForge, um an die Glyphenpfade zu kommen.

SVG-Font oder SVG-Bild von Text

Wer nach TTF in SVG sucht, findet zwei verschiedene Ziele vermischt. Das eine ist eine SVG-Schrift: das Schriftformat aus der SVG-1.0-Empfehlung des W3C von 2001, bei dem ein <font>-Element pro Zeichen ein <glyph> mit Unicode-Wert, Laufweite und der Kontur als Pfad enthält. Das andere ist ein SVG-Bild von Text, etwa die Buchstaben eines Logos oder eines Namens, bereits in einer Zeile gesetzt und als Formen gespeichert. Dieser Konverter erzeugt die erste Art. Wenn Sie statt einer Schrift ein Logo-Bild haben, wandelt PNG in SVG es stattdessen in Pfade um.

Die Umwandlung einer TrueType-Kontur in SVG-Pfaddaten verliert an der Form nichts. SVG-Pfade unterstützen dieselben quadratischen Kurven wie TrueType, daher wird jede Kontur unverändert geschrieben. Verloren geht alles um die Konturen herum: Hinting-Anweisungen, OpenType-Features über einfaches Kerning hinaus und die binären Tabellen, die Betriebssysteme zum Installieren einer Schrift brauchen. Eine SVG-Schrift lässt sich unter Windows oder macOS nicht installieren.

So sieht eine SVG-Font-Datei aus

Gekürztes Beispiel für das Markup einer SVG-Schrift

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="HausSans" horiz-adv-x="1229">
      <font-face font-family="Haus Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

Das erzeugt diese Seite: eine Datei, ein <glyph> pro Zeichen, in Schrifteinheiten mit nach oben zeigender y-Achse.

Öffnet sich in FontForge, Inkscape und Icon-Font-Tools
Auf dem Computer nicht installierbar
Wird von aktuellem Chrome, Edge und Firefox nicht geladen

Eine normale OTF oder TTF mit einer zusätzlichen SVG-Tabelle, die farbige, geschichtete Glyphen enthält.

Wird wie jede Schrift installiert
Verwendet für Emojis und mehrfarbige Schriftzüge
Unterstützung je nach App und Browser unterschiedlich

Woher SVG-Fonts kamen und wohin sie verschwunden sind

SVG 1.0 definiert das Font-Element: 2001
letzte iPhone-Safari-Version, die SVG-Webfonts brauchte: iOS 4.1
entfernt SVG-Schriften 2014: Chrome 38
streicht das Schriftkapitel: SVG 2

TTF

TrueType-Schrift

TTF ist das TrueType-Schriftformat, das Apple Ende der 1980er-Jahre entwickelte und 1991 veröffentlichte und das dann an Microsoft lizenziert wurde. Es beschreibt Glyphenumrisse mit quadratischen Kurven und enthält Hinting-Anweisungen, die Text auf Bildschirmen scharf darstellen. TrueType wird von jedem Desktop-Betriebssystem, jeder Textverarbeitung und jeder Design-App unterstützt. Es bietet einige erweiterte typografische Funktionen von OpenType nicht und ist größer als Webfont-Formate.

Komprimierung: Verlustfrei
Transparenz: –
Animation: –
Eingeführt: 1991 · Apple

TTF-Konverter

SVG

Scalable Vector Graphics

SVG ist ein XML-basiertes Vektorformat, das das W3C 2001 standardisiert hat. Statt Pixeln beschreibt es Formen, Pfade und Text, bleibt daher in jeder Größe scharf und ist bei Logos und Icons meist winzig. Es unterstützt Transparenz, CSS-Formatierung, Skripte und Animation, und jeder Browser stellt es nativ dar. Für Fotos ist SVG ungeeignet, und komplexe Illustrationen können langsam rendern. Illustrator, Inkscape, Figma und Browser können es öffnen und bearbeiten.

Komprimierung: –
Transparenz: Ja
Animation: Ja
Eingeführt: 2001 · W3C

SVG-Konverter

TTF in SVG schreibt die Kontur jeder Glyphe als bearbeitbare SVG-Pfaddaten in eine SVG-Schrift, die Icon-Font-Tools, Schrifteditoren und alte Webfont-Kits verwenden; zum Einbinden von Schriften auf modernen Webseiten taugt sie nicht.

Häufige Fragen zu TTF in SVG

Kann ich einen SVG-Font heute noch in CSS @font-face verwenden?

In den meisten Browsern nicht. Chrome hat die Unterstützung für SVG-Schriften 2014 mit Version 38 entfernt, Firefox und Internet Explorer haben sie nie eingeführt. Wandeln Sie die TTF für eine Website stattdessen mit TTF in WOFF2 um.

Warum stehen die Glyphen auf dem Kopf, wenn ich sie in eine Zeichnung einfüge?

SVG-Schriften verwenden das eigene Koordinatensystem der Schrift, in dem die y-Achse von der Grundlinie aus nach oben zeigt, während normale SVG-Zeichnungen y von oben nach unten zählen. Spiegeln Sie den Pfad vertikal, zum Beispiel mit einer scale(1,-1)-Transformation, dann stimmt die Darstellung.

Wie wandle ich Text für Cricut oder einen Lasercutter in SVG-Pfade um?

Installieren Sie die TTF, tippen Sie Ihren Text in Inkscape oder Illustrator und wandeln Sie ihn in Pfade um: in Inkscape Pfad › Objekt in Pfad, in Illustrator Schrift › In Pfade umwandeln. Speichern Sie das Ergebnis als SVG. Eine SVG-Schrift enthält jeden Buchstaben einzeln und ist nicht als Wörter gesetzt.

Behalten SVG-Fonts Unterschneidung (Kerning) und Ligaturen?

Nur teilweise. Das SVG-Schriftformat kann Kerning-Paare mit hkern-Elementen und Glyphen aus mehreren Zeichen speichern, kennt aber keine Entsprechung zu OpenType-Feature-Tabellen wie Kapitälchen, Alternativen oder kontextabhängigen Regeln. Behalten Sie die TTF, wenn Sie diese brauchen.

Ist die Ausgabe als SVG-Font für Icon-Fonts nützlich?

Ja, das ist heute der Hauptzweck. Icon-Font-Tools wie IcoMoon importieren SVG-Schriften. So können Sie Icons aus einem alten Icon-Font herausholen, bearbeiten und ein neues Set zusammenstellen oder jedes Icon als eigene SVG exportieren.