SVG / Beschriftung

Text zu SVG: Schriftkonturen und Pfade

Wandle Text mit mitgelieferten lateinischen Schriften oder einer lokalen TTF-, OTF- oder WOFF-Datei in SVG-Pfade um. Passe Größe, Buchstabenabstand, Zeilenhöhe, Ausrichtung und Farben an und lade anschließend SVG oder PNG herunter.

Text zu SVG: Schriftkonturen und Pfade: Gib deinen Text ein, wähle eine der mitgelieferten Schriften aus oder lade deine eigene TTF-, OTF- oder WOFF-Datei. Die Buchstaben werden in SVG-Konturen umgewandelt, sodass das Ergebnis überall gleich aussieht, auch wenn die Schrift nicht installiert ist. Passe Größe, Buchstabenabstand, Zeilenhöhe, Ausrichtung, Füllung und Kontur an und kopiere anschließend das SVG oder lade es als SVG oder PNG herunter. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Text in SVG-Pfade umwandelnLokale Verarbeitung

Läuft vollständig in deinem Browser

TTF, OTF oder WOFF · bis zu 10 MB

Schriftart wird geladen …

Deine Beschriftung beginnt hier.Gib Text ein, um bearbeitbare Konturen zu erstellen.

Die enthaltenen lateinischen Schriftarten stehen unter der SIL Open Font Licence. Hochgeladene Schriftarten bleiben lokal; du bist für ihre Lizenzen verantwortlich. Das Kerning ist aktiviert. Die Darstellung komplexer Schriften hängt von der Schriftart und dem Parser ab. PNG-Exporte sind auf 4096 Pixel an der längsten Seite begrenzt.

SVG-Formen bearbeiten

SVG-Pfade

Die Pfadspezifikation von SVG 2 definiert Pfadbefehle und geschlossene Teilpfade. https://www.w3.org/TR/SVG2/paths.html

Schriftparser

Schriftarten werden in deinem Browser mit opentype.js 2.0.0 eingelesen, einer Open-Source-Bibliothek unter MIT-Lizenz. WOFF2-Dateien werden nicht unterstützt; wandle sie zuerst in WOFF, TTF oder OTF um. Einige fortgeschrittene Schriftfunktionen, etwa kontextabhängige Alternativen und bestimmte Kerningtabellen, werden nicht angewendet. Daher kann der Abstand geringfügig von einem Textverarbeitungsprogramm abweichen. https://github.com/opentypejs/opentype.js

Enthaltene Schriftquellen

Unveränderte lateinische WOFF-Dateien stammen aus Fontsource-Paketen: https://fontsource.org/fonts/inter ; https://fontsource.org/fonts/oswald ; https://fontsource.org/fonts/pacifico ; https://fontsource.org/fonts/lobster . Der Copyright-Hinweis und der vollständige Text der SIL Open Font Licence jeder Schriftart werden zusammen mit den Schriftdateien veröffentlicht.

So benutzt du es

  1. Gib Text ein und wähle eine mitgelieferte Schrift aus oder ziehe deine eigene Schriftdatei hierher.
  2. Lege Größe, Abstand, Ausrichtung, Füllung und Kontur fest und prüfe die Konturen.
  3. Kopiere die SVG-Pfade oder lade sie als SVG herunter bzw. exportiere eine PNG-Datei.

Datenschutz & Einschränkungen

Text und hochgeladene Schriften bleiben in deinem Browser. Mitgelieferte WOFF-Dateien werden von dieser Website geladen; ein externer Schriftdienst wird nicht verwendet.

Ähnliche Tools

SVG-EditorSVG-WelleSVG-Blob

Häufige Fragen

Welche Schriften sind enthalten?

Inter und Oswald jeweils in Regular und Bold sowie Pacifico und Lobster in Regular. Diese lateinischen Teilmengen werden unter der SIL OFL 1.1 unverändert weitergegeben. Die jeweilige Lizenz findest du unter /fonts/text-to-svg/. Für die Lizenzen hochgeladener Schriften bist du selbst verantwortlich.

Warum kann sich eine Beschriftung von meiner Designanwendung unterscheiden?

Der Parser unterstützt nur einige Tabellen zur Formgebung und Positionierung. Nicht unterstützte kontextabhängige Ersetzungen werden durch direkte Zeichen-Glyphen ersetzt; ein Hinweis macht auf diese Einschränkung aufmerksam. Einige Schriften, darunter Inter, enthalten Positionierungstabellen, deren Kerning-Paare möglicherweise nicht verfügbar sind. Komplexe Schriftsysteme und Farbschriften können abweichen.

Ist der SVG-Text bearbeitbar?

Nein. Die Datei enthält Konturen und benötigt zum Anzeigen nicht die ursprüngliche Schrift. Leere Zeilen beeinflussen den Abstand der Grundlinien, während die viewBox auf die sichtbare Fläche zugeschnitten wird. Die PNG-Ausgabe ist an ihrer längsten Seite auf 4096 Pixel begrenzt.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig