Warum sich deine SVG-Schrift nach Export oder Import ändert

Deine SVG-Schrift ändert sich, weil bearbeitbarer SVG-Text gewöhnlich eine Schrift benennt; er enthält nicht automatisch deren Buchstabenformen. Kann der Browser, Editor, die Schneidesoftware oder der Computer des Empfängers die benannte Schrift nicht verwenden, wählt er eine Ersatzschrift. Andere Zeichenbreiten verändern dann Zeilenumbrüche, Ausrichtung und die Position benachbarter Grafikelemente.

Für die Weitergabe gibt es zwei verlässliche Strategien. Behalte bearbeitbaren Text, wenn das Ziel auswählbare, durchsuchbare oder bearbeitbare Wörter benötigt und du die Schrift korrekt bereitstellen kannst. Wandle Text in Vektorkonturen um, wenn die Darstellung fest bleiben muss und der Wortlaut nicht mehr bearbeitet werden muss. Bewahre in beiden Fällen eine separate bearbeitbare Masterdatei auf.

Für einen automatischen PNG-Export lade Schriftdateien ausdrücklich in resvg und vergleiche die gerenderten Buchstaben vor der Weitergabe mit deiner Quelle.

Für Abbildungen in Dokumenten vergleiche SVG-Illustrationen und gesetzte Beschriftungen in LaTeX. Wenn du Zeichengeometrie und Beschriftungstext trennst, kann das Dokument den Wortlaut setzen, während du die SVG-Masterdatei behältst.

Prüfe zuerst, ob das SVG noch Text enthält

Die Dateiendung allein beantwortet diese Frage nicht. SVG kann Schrift auf mindestens zwei verbreitete Arten darstellen:

<text font-family="Example Sans" font-weight="600">Sample</text>

Das ist bearbeitbarer Text. Das SVG speichert Zeichen und Formatierungsanweisungen. Ein Renderer muss eine passende Schrift finden, um diese Zeichen in sichtbare Glyphen umzusetzen.

In Konturen umgewandelter Text sieht eher so aus:

<path d="M ... Z" />

Hier wurde jeder Buchstabe in Vektorgeometrie umgewandelt. Der Empfänger braucht die Schrift nicht, aber das Wort ist keine gewöhnliche bearbeitbare Zeichenfolge mehr.

Du kannst das prüfen, ohne das gesamte Markup zu verstehen:

1. erstelle eine Kopie des SVG;
2. öffne die Kopie in einem einfachen Texteditor;
3. suche nach <text und <tspan;
4. suche nach dem sichtbaren Namen der Schrift;
5. fehlen diese Angaben, prüfe, ob die Buchstaben aus <path>-Elementen bestehen.

Klicke in einem Vektoreditor mit dem Textwerkzeug auf einen Buchstaben. Ein blinkender Textcursor zeigt bearbeitbaren Text an. Knoten um jede Glyphe zeigen Konturen an.

Drei Zustände der Typografie

Ursache 1: Die vorgesehene Schrift ist nicht installiert

Das SVG-Attribut font-family ist eine nach Priorität geordnete Liste von Familiennamen. Wie die SVG-Referenz zu font-family von MDN erklärt, wählt der Renderer aus dieser Liste. Findet er die erste Familie nicht, geht er zur nächsten über und schließlich zu einer generischen Familie wie sans-serif oder serif.

Das passiert häufig, wenn:

• der Designer eine lokale Schrift verwendet hat, die der Empfänger nicht besitzt;
• eine Schrift über einen Abodienst nur auf einem Rechner aktiviert wurde;
• das SVG aus einem Desktopeditor auf ein Smartphone, Tablet, eine Schneide-App oder ein Office-Paket übertragen wurde;
• der Familienname in der Schrift vom Dateinamen oder dem Namen im Downloadordner abweicht;
• nur ein Schnitt installiert ist, das SVG aber eine andere Stärke oder einen kursiven Schnitt anfordert.

„Etwas Ähnliches“ zu installieren stellt das Layout nicht wieder her. Zwei serifenlose Schriften können unterschiedliche Buchstabenbreiten, Oberlängen, Kerningwerte und Grundlinienmetriken haben. Der Ersatz kann ähnlich aussehen und trotzdem ein zentriertes Wort aus seiner vorgesehenen Position verschieben. Sobald die vorgesehene Schrift verfügbar ist, hilft das Beispiel zur vertikalen Ausrichtung von SVG-Text, die Grundlinienposition von Textfeld- und visueller Zentrierung zu unterscheiden.

Ursache 2: Das SVG erwartet eine Webschrift, die nicht geladen wurde

Ein SVG in einer Webseite kann Schriften aus dem CSS der Seite erhalten. Es kann auch einen Stilblock mit einer @font-face-Regel enthalten; SVG 2 verlangt Unterstützung für herunterladbare Schriften über das CSS-Fonts-Modell. Das scheitert, wenn die Schrift-URL falsch ist, die Datei nicht bereitgestellt wurde, der Zugriff blockiert ist, das angeforderte Format nicht unterstützt wird oder das SVG allein statt in der Seite mit seinen Stilen geöffnet wird.

Öffne die Entwicklerwerkzeuge des Browsers und lade die Seite neu. Filtere im Netzwerkfenster nach Schriftdateien und suche nach einer fehlgeschlagenen Anfrage. Prüfe in den berechneten Stilen des <text>-Elements, welche Schrift tatsächlich gerendert wurde, statt dich auf den deklarierten Familiennamen zu verlassen.

Ein SVG, das nur eingebettet in einer bestimmten Website funktioniert, ist nicht zwangsläufig eine eigenständige Weitergabedatei. Teste das exportierte SVG direkt in einem privaten Browserfenster und auf einem anderen Gerät. So werden versteckte Abhängigkeiten von einem Schriftendienst mit Anmeldung, einer zwischengespeicherten Schrift oder einem Website-Stylesheet sichtbar.

Das Einbetten einer Schriftressource kann ein Web-SVG portabler machen, vergrößert aber die Datei, kann an App-spezifische Unterstützungsgrenzen stoßen und muss durch die Schriftlizenz erlaubt sein. Prüfe die tatsächliche Lizenz, statt anzunehmen, dass eine Desktoplizenz die Weitergabe der Schriftdaten erlaubt.

Ursache 3: Familie oder Stärke stimmen nicht genau überein

Die CSS-Schriftauswahl verwendet mehr als den sichtbaren Familiennamen. Das SVG kann Folgendes anfordern:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Enthalten die verfügbaren Dateien nur die Stärken 400 und 700, kann der Renderer eine Stärke synthetisieren oder einen ähnlichen Schnitt wählen. Variable Schriften bringen Achsen und Instanznamen mit, die eine importierende Anwendung anders interpretieren kann. Ältere Design- oder Schneidesoftware ignoriert möglicherweise bestimmte OpenType-Funktionen, Ligaturen oder Variationseinstellungen.

Vergleiche das Originaldokument und das SVG nebeneinander:

• genauer Familienname;
• Schnitt und numerische Schriftstärke;
• Zeichenabstand;
• Groß- und Kleinschreibung sowie die tatsächlichen Zeichen;
• OpenType-Funktionen wie Ligaturen;
• Achsenwerte variabler Schriften;
• Verhalten von Text auf einem Pfad oder vertikalem Text.

Behebe eine falsche Schriftfamilie nicht durch manuelles Skalieren jedes Wortes. Das verdeckt das Symptom, behält aber die falschen Glyphen bei.

Ursache 4: Der Export erhält Text, aber die importierende App behandelt ihn anders

SVG-Textlayout ist nicht mit einem Desktop-Publishing-Dokument identisch. Ein Exporter kann verschachtelte <tspan>-Elemente, einzelne Koordinaten, text-anchor oder <textPath> verwenden. Die importierende App kann diese Funktionen reduzieren, neu gruppieren oder anders interpretieren. Wenn du ein Abzeichen rekonstruierst, trennt die Anleitung zu bearbeitbarem SVG-Text auf einem Pfad das Emblem, die Führungskurve und den bearbeitbaren Schriftzug, damit du jeden Teil testen kannst.

Für die Platzierung in Dokumenten nutze den Workflow für SVG-Abbildungen und Inline-Grafiken in Typst. Bildunterschriften als nativen Dokumenttext zu behalten erlaubt dir, die Schrift in der Illustration getrennt von Abbildungsnummern und Absatztypografie zu prüfen.

Adobes aktuelle Dokumentation zum SVG-Export weist darauf hin, dass Text auf einem Pfad nicht in jedem SVG-Betrachter identisch dargestellt werden muss. Sie unterscheidet außerdem die Ausgabe mit bearbeitbarer Schrift von Convert To Outlines, das Schrift in Vektorpfade umwandelt, um das Erscheinungsbild zu erhalten.

Ist die richtige Schrift vorhanden, ändert sich aber die Platzierung, prüfe die Struktur, statt die Schriftart zu wechseln:

1. vergleiche die Browserdarstellung mit dem Quelleditor;
2. prüfe, ob jedes Zeichen seine eigene x-Position hat;
3. untersuche verschachtelte Transformationen der Textgruppe;
4. prüfe, ob der Importer text-anchor, Kerning oder Grundlinieneinstellungen entfernt hat;
5. teste eine Kopie mit einfachem horizontalem Text, um das Verhalten von Text auf einem Pfad zu isolieren.

Bei einem Logo, Abzeichen oder einer einzeiligen Überschrift, deren Erscheinungsbild wichtiger als die Bearbeitbarkeit ist, sind Konturen meist das sicherere Weitergabeformat.

Ursache 5: Du hast den Text in Konturen umgewandelt und erwartest weiterhin bearbeitbaren Text

In Konturen umgewandelter Text kann keiner Schriftersetzung unterliegen, weil er keine Schrift mehr referenziert. Beim Import kann er dich trotzdem überraschen:

• Buchstaben können als zusammengesetzte Pfade statt als ein bearbeitbares Wort ankommen;
• Innenräume von Buchstaben können sich füllen, wenn ein zusammengesetzter Pfad aufgelöst wird;
• viele Glyphen können gemeinsam gruppiert sein;
• eine eingeschränkte Ziel-App kann Pfade zusammenführen oder vereinfachen;
• die Datei kann größer als die Variante mit bearbeitbarem Text werden.

Das sind Änderungen an Geometrie und Bearbeitbarkeit, keine Schriftänderungen. Stimmen die Formen selbst mit der Quelle überein, hat der Konturexport seine Aufgabe erfüllt.

Bewahre immer zwei Dateien auf:

• Bearbeitbare Masterdatei: bearbeitbarer Text, ursprüngliche Schriftinformationen, benannte Ebenen und das Format der Quellanwendung.
• Weitergabekopie: SVG, EPS oder PDF mit Konturen für Übergaben, bei denen das Erscheinungsbild entscheidend ist.

Wandle niemals die einzige Masterdatei in Konturen um. Eine Schreibkorrektur, Übersetzung oder neue Tagline wird zum langsamen manuellen Neuzeichnen, sobald der Text aus Pfaden besteht.

Welche Lösung solltest du verwenden?

Das Ziel bestimmt den Kompromiss. Bearbeitbarer Text erhält Bedeutung und Bearbeitung. Konturen erhalten das Erscheinungsbild. Eine Datei kann nicht beides maximieren, ohne zusätzliche Abhängigkeiten oder Quelldaten mitzuführen.

Ein sicherer Workflow für Textkonturen

Für die Weitergabe mit festem Erscheinungsbild:

1. speichere das Quelldokument mit bearbeitbarem Text;
2. dupliziere es und ergänze -outlined oder -delivery im Dateinamen;
3. wähle den Text und nutze Create Outlines, Convert to Curves, Object to Path oder den entsprechenden Befehl;
4. prüfe Löcher in Buchstaben und überlappende Formen;
5. exportiere SVG;
6. öffne das SVG in einem Browser und einem zweiten Editor;
7. vergleiche es bei normaler Größe und starkem Zoom mit der Quelle;
8. versende die Datei mit Konturen und archiviere die bearbeitbare Masterdatei samt Schriftlizenzinformationen.

Rasterisiere den Text nicht lediglich, um eine fehlende Schrift zu umgehen. Ein PNG im SVG verhindert die Ersetzung, verwirft aber skalierbare Pfadgeometrie. Die Umwandlung in Konturen erhält echte Vektoren.

Wenn vom Logo nur noch ein Rasterbild übrig ist

Manchmal ist weder der bearbeitbare Text noch eine Masterdatei mit Konturen erhalten. Vielleicht hast du nur ein kleines PNG, JPG oder einen Screenshot des Logos. Der Entscheidungsleitfaden zur Logo-Vektorisierung erklärt, wann du dieses Rasterbild nachzeichnen und wann du es neu zeichnen solltest. Schriften zu installieren repariert kein Rasterbild, und eine ähnliche Schrift zu finden reproduziert möglicherweise keine individuell veränderten Buchstaben.

Hier kann PerfectVector unter bestimmten Bedingungen helfen: Die Logo-Vektorisierung kann sichtbare Rasterbuchstaben als Vektorformen rekonstruieren. Das Ergebnis ist eine Grafik aus Konturen und kein wiederhergestellter bearbeitbarer Text. Es identifiziert nicht die ursprüngliche Schrift, stellt keine Kerningeinstellungen wieder her und macht den Wortlaut nicht erneut eintippbar. Nutze es zur Wiederherstellung der sichtbaren Logogeometrie und halte diese Rekonstruktion anschließend von einer neu gesetzten Masterdatei getrennt.

Für eine umfassendere Weitergabestrategie erklärt die Anleitung zu Logo-Dateiformaten, welche Master- und Ausgabeformate du aufbewahren solltest.

FAQ

Warum verwendet mein SVG auf einem anderen Computer eine andere Schrift? Das SVG enthält wahrscheinlich bearbeitbaren Text, der eine auf dem anderen Computer nicht verfügbare Schrift benennt. Der Renderer verwendet eine andere Familie aus der Ersatzschriftenliste. Dadurch ändern sich Glyphenformen, Breite, Abstände und manchmal die Ausrichtung.

Bettet ein SVG seine Schrift automatisch ein? Nein. Ein SVG kann eine Schrift benennen, sie aus dem Seiten-CSS erhalten oder eine Schriftressource enthalten. Gewöhnlicher bearbeitbarer Text verpackt die Desktop-Schriftdatei aber nicht automatisch mit. Verfügbarkeit, Browserunterstützung und Schriftlizenz müssen weiterhin geklärt werden.

Sollte ich SVG-Text in Konturen umwandeln? Wandle eine Weitergabekopie in Konturen um, wenn das Erscheinungsbild fest bleiben muss, insbesondere bei Logos, dekorativen Schriftzügen, Druck und Makersoftware. Erhalte bearbeitbaren Text in der Masterdatei, wenn Wortlaut, Barrierefreiheit, Durchsuchbarkeit oder Lokalisierung wichtig sind.

Warum ist Text nach dem Import nicht mehr bearbeitbar, nachdem ich ihn in Konturen umgewandelt habe? Die Umwandlung ersetzt Zeichen durch Vektorpfade. Der Empfänger kann Knoten und Formen bearbeiten, aber keinen Textcursor setzen oder die Schrift ändern. Das ist erwartetes Verhalten. Bewahre deshalb eine Masterdatei mit bearbeitbarem Text auf und gib sie weiter, wenn künftig Wortlautänderungen nötig sind.

Kann PerfectVector die ursprüngliche Schrift aus einem Rasterlogo wiederherstellen? Nein. PerfectVector kann sichtbare Rasterbuchstaben als Vektorkonturen rekonstruieren, identifiziert aber weder die ursprüngliche Schrift noch stellt es bearbeitbare Zeichen, Kerning und Schrifteinstellungen wieder her. Nutze es, wenn du die sichtbare Geometrie des Logos wiederherstellen möchtest.

Quellen

1. W3C — SVG-Text — bearbeitbare <text>- und <tspan>-Inhalte, Schrifteigenschaften, Layout und Unterstützung für herunterladbare Schriften.
2. W3C — CSS Fonts Module Level 3 — Abgleich von Schriftfamilien, Schnittauswahl, fehlende Familien und Systemersatzschriften.
3. MDN — SVG-font-family — priorisierte Familienlisten und generische Ersatzschriften in SVG.
4. Adobe Illustrator — Textkonturen erstellen — Text in Pfade umwandeln und der daraus folgende Verlust der Textbearbeitbarkeit.
5. Adobe Illustrator — Grafiken speichern — SVG-Textexport, Konturen und Kompatibilitätseinschränkungen bei Text auf einem Pfad.

Wenn die Masterdatei fehlt und dir nur ein Rasterlogo bleibt, rekonstruiere seinen sichtbaren Schriftzug mit PerfectVector als Vektorkonturen und prüfe die Formen anschließend in einem zweiten Editor. Ist bearbeitbarer Text noch vorhanden, behebe die Schriftabhängigkeit oder erstelle eine Weitergabekopie mit Konturen, statt ihn erneut nachzuzeichnen.