Warum ändern sich die Schriften meines SVG-Logos?

Warum ein SVG weiterhin von einer Schrift abhängen kann

SVG kann neben Vektorformen auch bearbeitbaren Text speichern. Ein Textobjekt kann eine Schrift benennen, ohne sie einzubetten. Kann das Anzeigeprogramm nicht darauf zugreifen, wird möglicherweise eine andere Schrift verwendet. Das verändert Buchstabenformen und kann auch die Breite der Wortmarke ändern.

Der Browser wählt aus verfügbaren Schriftfamilien; einzelne Zeichen können auf Ersatzschriften ausweichen, wenn eine benötigte Glyphe fehlt. Deshalb kann ein Akzent, Symbol oder einzelner Buchstabe falsch aussehen, obwohl der Rest korrekt wirkt. CSS kann außerdem ein SVG-Attribut font-family überschreiben.

Das Umwandeln der freigegebenen Schrift in Pfade speichert ihre sichtbaren Formen als Vektorpfade. Der Empfänger benötigt diese Schrift nicht mehr, um die Buchstaben darzustellen. Das ist eine nützliche Lieferoption für ein festes Logo, während die bearbeitbare Quelle für spätere Änderungen verfügbar bleibt.

Weiterführende Artikel: MDN: Wie font-family Schriften auswählt · MDN: SVG font-family und CSS · Adobe: Schrift in Vektorpfade umwandeln

Finde heraus, wo sich die Schrift zuerst ändert

Halte die freigegebene Logoreferenz neben Quelldokument und exportierter Datei bereit. Vergleiche dieselbe Variante in ähnlicher Größe. Verfolge die Datei von der Quelle über den Export zum Einsatzort, um das Problem einzugrenzen, bevor du Einstellungen änderst.

Prüfe die richtige Schrift vor der Pfadumwandlung

Beginne mit einer bearbeitbaren Masterdatei und einer bekannten freigegebenen Referenz. Meldet die Anwendung eine fehlende Schrift, behebe dies zuerst. Die Umwandlung einer Ersatzschrift friert deren Formen ein; sie kann das beabsichtigte Design nicht wiederherstellen.

Wenn das freigegebene Logo beispielsweise einen bestimmten halbfetten Schnitt verwendet, die Quelle aber nun normal angezeigt wird, bewahrt die Pfadumwandlung dieses normalen Textes das falsche Gewicht. Der Umwandlungsbefehl hat seine Aufgabe erfüllt, doch die Grafik muss weiterhin korrigiert werden.

• ✓Gleiche Schriftfamilie, Stil und mögliche Variable-Font-Einstellungen mit der freigegebenen Quelle ab.
• ✓Prüfe Schreibweise, Akzente, Satzzeichen, individuelle Buchstabenänderungen und Ligaturen.
• ✓Vergleiche Buchstabenabstände, Grundlinie und Abstand zwischen Symbol und Wortmarke.
• ✓Speichere die bearbeitbare Masterdatei separat. Verwende Pfadumwandlung beim Export oder eine klar benannte Übergabekopie.
• ✓Wandle jedes zum festen Logo gehörende Textelement um, einschließlich eines freigegebenen Slogans, falls vorhanden.

Illustrator: Pfadumwandlung beim Export oder in einer Übergabekopie

Wähle den für deine Übergabe passenden Ansatz. Die Umwandlung beim Export erlaubt dir, bearbeitbaren Text in der Masterdatei zu behalten.

1. Öffne die richtige Quelldatei, wähle File → Export → Export As und dann SVG.
2. Setze in SVG Options die Option Font auf Outlines und exportiere.
3. Öffne das gespeicherte SVG im Browser und vergleiche es mit dem freigegebenen Logo.

Wenn du eine Arbeitskopie mit Pfaden benötigst, dupliziere das Dokument, wähle den Logotext und dann Type → Create Outlines. Erhalte die Buchstabenformen und ihre Innenräume; für den Export einer normalen Wortmarke musst du zusammengesetzte Pfade nicht auflösen.

Verwendest du stattdessen Save As oder Save a Copy? In diesem SVG-Dialog heißt die Schriftoption Convert To Outlines. Die Bezeichnungen unterscheiden sich zwischen Exportabläufen.

Weiterführende Artikel: Adobe: SVG-Exportoptionen · Adobe: Create Outlines · Adobe: Optionen für Save As SVG

Figma: Outline text für das SVG aktiviert lassen

Figma dokumentiert die Umwandlung von SVG-Text in Pfade als Standard. Prüfe die Einstellung des Exports, den du tatsächlich verwendest.

1. Wähle den freigegebenen Logo-Frame oder die Ebenen und dann SVG im Exportbereich.
2. Öffne die formatspezifischen Exporteinstellungen und lasse Outline text aktiviert.
3. Exportiere das SVG und prüfe die heruntergeladene Datei.

Dadurch wird Text im Export umgewandelt, während dein Quelltext bearbeitbar bleibt. Wenn du Outline text deaktivierst, bleibt der exportierte Text bearbeitbar; dann muss die Schriftverfügbarkeit am Einsatzort geprüft werden.

Weiter mit: Vollständiger Logoexport-Ablauf für Figma

Weiterführende Artikel: Figma: SVG- und Outline-text-Einstellungen

Affinity: Eine Kopie mit in Kurven umgewandeltem Text verwenden

Affinity verwendet den Begriff Convert to Curves für die Umwandlung ausgewählter Objekte in bearbeitbare Vektorpfade. Bewahre den Text in deiner Masterdatei auf, wandle die freigegebene Schrift in einer Übergabekopie um und prüfe das exportierte SVG. Die Exporteinstellungen unterscheiden sich zwischen der aktuellen Affinity-App und Affinity Designer 2; folge dem Ablauf für deine Version.

Weiter mit: Affinity-Logoexport-Leitfaden

Weiterführende Artikel: Affinity: Move Tool und Convert to Curves

Prüfe das tatsächliche SVG und dann seinen Einsatzort

Öffne die gespeicherte oder heruntergeladene Datei, statt dich auf die Designfläche oder Exportvorschau zu verlassen. Wenn eine Website Uploads verarbeitet oder SVGs optimiert, prüfe auch die tatsächlich ausgelieferte Datei.

Teste das SVG in seiner vorgesehenen Platzierung, auch als Bildelement oder CSS-Hintergrund. Browser können externe Ressourcen einschränken, wenn SVG als Bild verwendet wird. Eine Datei, die im eigenen Browser-Tab richtig aussieht, kann daher auf der Website anders erscheinen.

• ✓Vergleiche charakteristische Buchstaben, Akzente, Ligaturen und Innenräume von Buchstaben wie A, B und O.
• ✓Prüfe Wortmarkenbreite, Buchstabenabstände, Grundlinie und Symbolausrichtung.
• ✓Betrachte das Logo in seiner vorgesehenen kleinen Anzeigegröße und vergrößert zur Prüfung.
• ✓Prüfe jede freigegebene Farbvariante auf ihrem vorgesehenen Hintergrund.
• ✓Stelle sicher, dass Slogans und kleine Zeichen enthalten sind und keine Buchstaben abgeschnitten werden.
• ✓Bitte den Empfänger, genau diese Datei in der Anwendung oder Website zu prüfen, in der sie verwendet wird.

Weiterführende Artikel: MDN: SVG in Bildkontexten · MDN: Textelemente in SVG

Wenn Schrift als Pfad weiterhin falsch aussieht

Prüfe zuerst, ob die betroffenen Buchstaben in der verwendeten Datei wirklich Pfade sind. Ist das der Fall, ändert font-family ihre Geometrie nicht. Vergleiche den ersten Pfadexport mit der Quelle und gehe dann Schritt für Schritt weiter.

• Falsche Buchstabenformen direkt nach der Umwandlung: Vergleiche die Quelle mit der freigegebenen Referenz und prüfe, ob bereits eine Schrift ersetzt worden war.
• Fehlende Innenräume oder beschädigte Formen: Prüfe zusammengesetzte Pfade, Füllungen, Beschnitt und nach der Umwandlung vorgenommene Bereinigungen.
• Veränderte Geometrie nach Optimierung: Vergleiche mit dem unoptimierten Export und prüfe Koordinatengenauigkeit oder Pfadvereinfachung.
• Änderung nur auf der Website: Prüfe die ausgelieferte Datei und Seitenstile einschließlich Füllungen und Konturen sowie die Anzeigegröße.
• Farbschrift oder Spezialeffekte: Prüfe die Schrift- und App-Dokumentation. Adobe nennt konkrete Export- und Pfadprobleme bei OpenType-SVG-Farbschriften.

Weiterführende Artikel: Adobe: SVG-Präzisionseinstellungen · Adobe: Probleme mit OpenType-SVG-Farbschriften

Berücksichtige Bearbeitbarkeit und Barrierefreiheit

In Pfade umgewandelte Schrift bleibt Vektorgrafik, ihre Zeichen sind aber kein normal bearbeitbarer Text mehr. Bewahre die Masterdatei mit Text für Wortlautänderungen, Lokalisierung und spätere Typografiearbeiten auf. Pfadumwandlung kann außerdem die Pfaddaten vergrößern; vergleiche daher die endgültige Dateigröße, statt einen kleineren Export anzunehmen.

Gib dem Entwickler einen passenden zugänglichen Namen zum Asset. Für ein Logo als einzigen Inhalt eines Startseitenlinks wäre „Morrow Quay Startseite“ ein Beispiel. Enthält derselbe Link bereits gleichwertigen sichtbaren Text, vermeide eine doppelte Ansage. Die W3C-Anleitung zu funktionalen Bildern erklärt diesen Unterschied.

Lass gewöhnliche Überschriften, Fließtext und Oberflächenbeschriftungen möglichst echten Text bleiben. Die Pfadumwandlung des Logos liefert nicht automatisch seinen zugänglichen Namen und macht die Website nicht barrierefrei.

Prüfe die geltende Schriftlizenz, bevor du Schriftdateien übergibst. Adobe Fonts unterscheidet beispielsweise die Lieferung fertiger Grafiken von der Notwendigkeit einer eigenen Kundenlizenz für direkten Schriftzugriff und Bearbeitung. Für andere Schriften gelten eigene Bedingungen.

Weiter mit: Schriften und Lizenzbedarf für die Kundenübergabe dokumentieren

Weiterführende Artikel: W3C WAI: Barrierefreie verlinkte Logos · Adobe Fonts: Lizenzierungs-FAQ

Stelle die geprüfte Grafik zum Paket zusammen

Sobald die exportierte Schrift dem freigegebenen Design entspricht, verwende dieses geprüfte SVG als Ausgangspunkt für die Kunden-Assets. In logopack.app kannst du kostenlos eine Paketvorschau ansehen; der Download der Logopaket-ZIP erfordert Pro. Exportdetails findest du in den aktuellen Tarifen.

Wenn logopack.app vor Text im SVG warnt, kehre in deine Design-App zurück und wandle die freigegebene Schrift in Pfade oder Kurven um. Schriftkorrekturen gehören in den Quelldesign-Schritt: Ein Paketgenerator kann die vorgesehene Schrift aus einer ersetzten Wortmarke nicht wiederherstellen.

Weiter mit: Lieferdateien für den Kunden auswählen · Logodateiformate vergleichen

Häufige Fragen zu SVG-Schriften

Weiterführende Artikel: MDN: Schriften in SVG verwenden