logo
Zurück

Text aus Figma, Sketch & Photoshop in SVG umwandeln

2025-12-14
Text To Svg

Bei Übergaben oder dem finalen Export wird Live-Text schnell zum Problem:

  • Fehlende Schriften auf dem Rechner des Developers
  • Unerwartete Font-Ersatzschriften
  • Lizenzfragen beim Bündeln von Fonts
  • Fertigungs-Workflows (Laser/CNC), die nur reine Pfade akzeptieren

Darum konvertieren Designer oft in „Outlines“. Direkt in Figma, Sketch oder Photoshop zu konvertieren ist jedoch destruktiv (Text ist danach nicht mehr editierbar), und komplette Dateien auf zufällige Online-Konverter hochzuladen ist ein Datenschutzrisiko.

1. Warum überhaupt Text zu SVG-Pfaden machen?

Bevor wir das „Wie“ klären, kurz das „Warum“.

1.1 Häufige Gründe für Outlines

  • Design-Handoff: Entwickler brauchen ein SVG-Logo oder UI-Asset, das exakt wie im Entwurf aussieht – unabhängig von installierten Fonts.
  • Markenkonsistenz: Wortmarken müssen pixelgenau auf allen Geräten bleiben.
  • Web-Performance: Manchmal ist ein kleines Inline-SVG besser als ein ganzes Webfont.
  • Fertigung & Making: Laser- und Vinyl-Cutter oder CNC-Maschinen erwarten reine Vektorgeometrie (kein Live-Text).

1.2 Risiken der schnellen, naiven Lösung

  • Text rasterisieren
    Sieht nur in einer Größe scharf aus, skaliert schlecht und ist nicht editierbar.

  • Direkt im Design-File zu Pfaden konvertieren
    Figma/Sketch/PS können Text in Vektorformen umwandeln – danach ist der Text aber nicht mehr editierbar. Bei Copy- oder Sprachänderungen musst du neu bauen.

  • Komplette Dateien zu einem beliebigen Online-Konverter hochladen

    • Deine Designs können unveröffentlichte Features, NDA-Content oder persönliche Daten enthalten.
    • Manche Dienste speichern Dateien oder protokollieren Eingaben.
    • Du weißt nicht, wer später Zugriff hat.

Für professionelle Workflows brauchst du Pfade, willst aber auch dein Designsystem und deine Daten schützen.

2. Was „sicher“ hier bedeutet

Beim sicheren Konvertieren von Text zu SVG-Pfaden zählen mehrere Dimensionen:

  1. Privatsphäre & Sicherheit

    • Text (und sensible Inhalte) dürfen dein Gerät nicht verlassen.
    • Keine Uploads, keine Server-Seitenspeicherung.

  2. Visuelle Treue

    • Kerning, Ligaturen und Letterspacing sollen dem Original entsprechen.
    • Kurven brauchen genügend Bezier-Präzision für saubere Kanten.

  3. Lizenzierung

    • Fonts sollen nicht versehentlich so weitergegeben werden, dass Lizenzen verletzt werden.
    • Oft ist „gerenderter Text als Pfad“ lizenztechnisch einfacher als eingebettete Fontdateien.

  4. Kompatibilität

    • SVG soll sauber in Figma, Sketch, Illustrator, Affinity oder CAD-Software importieren.
    • Für Fertigung sind oft DXF oder andere path-only-Formate nötig.

TextToSVG.app ist genau dafür gebaut: komplett im Browser, kein Upload von Text/Fonts, und Output als saubere SVG- und DXF-Pfade, die moderne Design-Tools gut importieren.

3. TextToSVG.app: ein privater Text-zu-Pfad-Generator

TextToSVG.app ist ein kostenloses Online-Tool, das Text in SVG-Vektorpfade (und DXF) mit Live-Vorschau und Typografie-Kontrollen konvertiert.

Wichtige Punkte für Sicherheit und Workflow:

  • 100 % im Browser
    Laut eigener Aussage läuft alles lokal: keine Uploads, keine Speicherung, kein Tracking. Dein Text bleibt auf deinem Gerät.

  • Google Fonts integriert
    Tausende Font-Familien und -Varianten direkt im Tool, ohne manuelle Installation.

  • Typografie-Kontrollen

    • Größe, Tracking (Letterspacing)
    • Kerning und Standardligaturen
    • Zeichen trennen oder als gemeinsame Form behalten
    • Bezier-Genauigkeit
    • Fill-Rule, Füllfarbe, Konturfarbe, Konturstärke, non-scaling stroke

  • Produktionsreifer Output
    SVG und DXF sind optimiert und importieren sauber in Figma, Sketch, Illustrator, Affinity sowie CAD/Fertigungs-Tools.

Damit ist es die ideale „Brücke“ zwischen Design-Tool und sauberem, teilbarem SVG-Pfad.

4. Sicherer Workflow von Figma zum SVG-Pfad

Hier der Ablauf für Figma; die Logik gilt ebenso für Sketch und Photoshop (siehe danach).

4.1 Schritt 1 — Text in Figma prüfen

  1. Textlayer auswählen.
  2. Notiere:
    • Schriftfamilie (z. B. „Inter“, „Roboto“, „Montserrat“)
    • Schriftschnitt (Regular, Medium, Bold …)
    • Letterspacing & Zeilenhöhe (falls du sie matchen willst)
  3. Prüfe, ob die Schrift bei Google Fonts existiert (die meisten UI-Fonts tun das). Wenn sie proprietär ist, dann:
    • eine ähnliche Google-Schrift nehmen oder
    • das SVG in deiner lizenzierten Umgebung (z. B. Illustrator) erzeugen und danach bereinigen.

4.2 Schritt 2 — Text in TextToSVG.app nachbauen

Öffne TextToSVG.app im Browser.

  1. Text eingeben
    Exakten Text aus Figma ins Feld „Text“ einfügen.

  2. Schriftfamilie & Variante wählen

    • Google-Font auswählen, die deiner Figma-Schrift entspricht.
    • Passende Variante (Regular, Medium, Bold etc.) wählen.

  3. Typografie-Optionen anpassen

    • Größe: auf einen bequemen Wert setzen; skalieren kannst du später.
    • Tracking: ans Figma-Letterspacing anpassen.
    • Kerning: einschalten, wenn dein Original darauf baut.
    • Standardligaturen: aktivieren, falls du Ligaturen brauchst (fi, fl etc.).

  4. Vektorqualität feinjustieren

    • Bezier-Genauigkeit: höher für glattere Kurven, niedriger für weniger Punkte.
    • Separate characters:
      • An, wenn du pro Zeichen eigene Pfade willst (für Animation oder Mikro-Adjustments).
      • Aus, wenn du eine kombinierte Form bevorzugst (simpleres SVG).

  5. SVG-Optionen setzen

    • Units:
      • px für Web/UI.
      • mm oder in für Fertigung.
    • Fill rule: nonzero reicht meist; evenodd nur, wenn benötigt.
    • Fill & Stroke:
      • Für typischen Text: Füllung, keine Kontur.
      • Für Outline-Text: Kontur nutzen, Füllung optional aus.
    • Non-scaling stroke: hilfreich bei Icons/UI, wenn Strichstärken beim Skalieren konstant bleiben sollen.

Du siehst eine Live-Vorschau, während du anpasst.

4.3 Schritt 3 — Exportieren und zurück nach Figma

Sobald die Vorschau passt:

  1. SVG-Code mit „Copy to clipboard“ kopieren oder .svg herunterladen.
  2. In Figma gibt es zwei gängige Wege:
    • SVG direkt einfügen:
      • In TextToSVG kopieren → in Figma einfach einfügen (Cmd+V / Ctrl+V).
      • Figma erzeugt daraus ein Vektorobjekt.
    • .svg-Datei importieren:
      • .svg in die Arbeitsfläche ziehen oder
      • File → Place image… nutzen; Figma behandelt es als Vektor.

Jetzt hast du reine Vektorpfade, die:

  • genau wie in der Vorschau rendern
  • keine installierten Fonts benötigen
  • sicher weitergegeben werden können, ohne Font- oder Datenschutzprobleme

Bewahre deine ursprüngliche Figma-Text-Ebene als versteckte Sicherung, falls du später Text anpassen musst.

5. Workflow für Sketch und Photoshop anpassen

Der gleiche TextToSVG-Ansatz funktioniert auch in anderen Tools.

5.1 Sketch

  1. In Sketch Textear auswählen und Font, Gewicht, Spacing notieren.
  2. Text und Typografie in TextToSVG.app wie oben nachbauen.
  3. SVG exportieren:
    • Code kopieren → in einem Editor als .svg speichern oder
    • Datei direkt auf der Seite herunterladen.
  4. In Sketch importieren:
    • .svg auf die Leinwand ziehen oder
    • Insert → Image nutzen; Sketch behandelt es als Vektorformen.

Jetzt kannst du Farbe anpassen, Masken setzen oder es in Symbols/Components nutzen.

5.2 Photoshop (PS)

Photoshop handhabt SVG etwas anders, bleibt aber simpel:

  1. SVG-Pfade in TextToSVG.app erzeugen.
  2. .svg herunterladen.
  3. In Photoshop:
    • File → Place Embedded… (oder Place Linked) und die SVG auswählen.
    • PS fügt es als Vector Smart Object ein – skalierbar ohne Verlust.
  4. Falls du Roh-Pfade brauchst:
    • SVG in Illustrator oder einem anderen Vektor-Editor öffnen.
    • Pfade kopieren und in Photoshop als Shape Layer einfügen.

So vermeidest du fehlende Fonts und behältst skalierbare Vektoren.

6. Best Practices für saubere, zukunftssichere SVG-Pfade

Unabhängig vom Tool helfen diese Tipps:

6.1 Halte Text irgendwo editierbar

  • Zerstöre deine Live-Text-Quelle nicht.
  • Bewahre eine „Master“-Datei (Figma/Sketch/PS), in der der Text editierbar bleibt, und nutze TextToSVG-Pfade nur in exportierten Assets oder separaten Seiten/Artboards.

6.2 Komplexität nur, wenn nötig

  • Nutze nur die Optionen, die du wirklich brauchst: Füllung, ggf. Kontur.
  • Vermeide unnötige Effekte/Filter, die das SVG aufblähen.
  • Bei sehr hoher Bezier-Genauigkeit entstehen viele Punkte – nur erhöhen, wenn du ultra-präzise Kurven brauchst.

6.3 Einheiten bewusst wählen

  • px für Web/UI.
  • mm/in für DXF/Laser/CNC, damit Größen physisch passen.

6.4 Zeichen gezielt trennen

  • Trenne Zeichen, wenn du:
    • Zeichenweise Animationen planst.
    • Ein einzelnes Glyph manuell verschieben oder anpassen willst.
  • Lass sie kombiniert, wenn du:
    • Ein einfaches Logo/Label mit minimalem Markup brauchst.

6.5 Für Produktion optimieren

Für Web-Einsatz:

  • SVG durch einen Optimierer (z. B. SVGO) schicken, um Metadaten/Whitespace zu entfernen.
  • Kleine SVGs inline in HTML nutzen oder in ein Icon-System bündeln.

7. Kurz zu Font-Lizenzen

TextToSVG.app gibt dir Kontrolle über die gerenderten Pfade, aber die Schrift unterliegt weiterhin ihrer Lizenz.

  • Die meisten Google Fonts verwenden die SIL Open Font License (OFL), die meist kommerzielle Nutzung gerenderten Textes erlaubt.
  • Dies ist keine Rechtsberatung. Prüfe immer:
    • die konkrete Font-Lizenz
    • ob dein Use Case (Logo, UI, Fertigung etc.) dazu passt

Der Vorteil von Pfaden: Du lieferst Grafik aus, nicht vollständige Fontdateien – das vereinfacht oft die Compliance.

8. Zusammenfassung: Ein sicherer Text-zu-SVG-Pipeline

Kurzfassung:

  1. Font und Styling in Figma/Sketch/PS identifizieren.
  2. Text in TextToSVG.app nachbauen mit passender Google-Schrift und Typografie-Kontrollen.
  3. Vektorqualität & Styling (Kerning, Ligaturen, Bezier, Fill/Stroke, Units) feinjustieren.
  4. Sauberes SVG (oder DXF) exportieren und als Vektor in dein Design-Tool importieren.
  5. Handoff/Shipping, wissend:
    • keine Abhängigkeit von lokalen Fonts
    • nichts wurde auf einen Server hochgeladen
    • Output ist ready für Web, Print oder Fertigung

So kombinierst du Editierbarkeit und Sicherheit während des Designs mit knackigen, unabhängigen Pfaden für die Auslieferung. Wenn du regelmäßig Logos, UI-Icons oder fertigungstaugliche Labels übergibst, ist TextToSVG.app ein schneller Gewinn für Qualität und Datenschutz.

Zurück