Vom Briefing zur Produktions-SVG: Ein kompletter Textlogo-Workflow

Ein Textlogo ist schnell begonnen und erstaunlich leicht zu frueh beendet. Schrift waehlen und herunterladen erzeugt eine gueltige SVG, beweist aber nicht, dass die Wortmarke in einer kleinen mobilen Navigation, im Dark Mode, beim Figma-Handoff oder auf einem physischen Schild funktioniert.

Dieses Arbeitsbeispiel verwendet das erfundene Produkt Northline. Der Name ist fiktiv, damit alle Entscheidungen offen beschrieben werden koennen. Die Pruefungen entsprechen trotzdem denen eines realen Produktionsassets.

Das Ziel ist eine Master-Wortmarke fuer:

• einen Website-Header mit 120–180 Pixel Breite;
• eine React-Komponente mit vererbbarer Farbe;
• hochaufloesende Praesentationen;
• einen Folientest mit etwa 80 Millimetern Breite;
• einen Design-Handoff ohne notwendige Schriftinstallation.

1. Das Briefing in messbare Grenzen uebersetzen

„Modern“ ist keine Produktionsanforderung. Vor dem Generator braucht der Wunsch klare Bestehen-oder-Durchfallen-Kriterien.

Fuer Northline gelten:

1. Unter 140 Pixel Breite bleibt der Name lesbar.
2. Die Silhouette wirkt ruhig und technisch, nicht verspielt.
3. Die Innenraeume von o, e und dem kleinen h bleiben offen.
4. Das Zeichen funktioniert einfarbig.
5. Eine Kontur ist nicht zur Rettung der Lesbarkeit noetig.
6. Entwickler koennen die Farbe ohne Pfadbearbeitung aendern.

Damit fallen fragile Scripts und kontrastreiche Serifenschriften frueh heraus. Auch sehr leichte Schnitte sind kein sinnvoller Start.

2. Schriften mit dem echten Namen vergleichen

Eine Entscheidung nur mit Text To SVG oder einem Schriftmuster ist zu abstrakt. Gib den wirklichen Namen ein und beurteile seine konkreten Buchstabenpaare.

Fuer das Beispiel werden Inter, Roboto, Montserrat und Open Sans verglichen:

• Inter wirkt kompakt und produktorientiert.
• Roboto ist neutral und vertraut.
• Montserrat hat mehr Displaywirkung, benoetigt aber mehr Breite.
• Open Sans ist freundlich und gut lesbar, erschwert durch ihre Breite jedoch das Header-Ziel.

Inter 700 wird zur Arbeitsrichtung. Nicht, weil Inter immer die beste Logoschrift ist, sondern weil sie diese Anforderungen mit weniger Korrekturen erfuellt.

3. Abstaende vor der Pfadumwandlung festlegen

Spacing muss in der erwarteten Anzeige, nicht nur auf einer grossen Arbeitsflaeche beurteilt werden.

Starte mit aktivem Kerning und Laufweite null. Pruefe den Namen dann bei ungefaehr 140 Pixel Breite. Bei Northline kann der Uebergang thl dichter als line wirken. Eine sehr kleine globale Korrektur ist denkbar, eine grosse wuerde das Wort auseinandernehmen.

Einstellung	Wert	Grund
Schrift	Inter	Kompakter Produktton
Gewicht	700	Stabil in kleiner Navigation
Kerning	An	Erhaelt entworfene Buchstabenpaare
Laufweite	0	Vermeidet kuenstliche Luecken
Ligaturen	An	Fuer diesen Ausdruck unkritisch
Fuellung	Voll	Haelt das Asset einfach
Kontur	Aus	Vermeidet Ueberlappung
Kurvengenauigkeit	Mittel	Saubere Form ohne Punktueberfluss

Optische Einzelpaare koennen spaeter in einem Vektorprogramm korrigiert werden. Ein globaler Wert loest nicht jedes lokale Spacingproblem.

4. Eine Master-SVG statt vieler „finaler“ Varianten

Die Masterdatei soll die Gestaltung bewahren und Anpassungen erlauben. Exportiere:

• eine enge, aber nicht beschnittene viewBox;
• gefuellte Pfade;
• kein Hintergrundrechteck;
• keine unnoetige Kontur;
• keine eingebettete Bitmap;
• keine vermeidbaren Transformationen;
• das vollstaendige Wort als visuelle Einheit.

Die erzeugte Umrissdatei herunterladen

Northline-SVG-Beispiel herunterladen. Die Datei wurde mit Inter 700, 96 px, aktivem Kerning und Standardligaturen, schwarzer Füllung und ohne Kontur erzeugt. Sie enthält ein path-Element und eine viewBox von 439.047 × 120.156. Öffne sie im Browser oder Vektorprogramm, um die tatsächlichen Konturen zu prüfen. Es bleibt eine Entwurfsstudie; die unten vorgeschlagenen Header- und Folientests wurden nicht als bestanden dokumentiert.

Notiere daneben Familie, Quelle, Gewicht, Generatorwerte und Datum. Im Pfad steht kein editierbarer Text mehr; diese kleine Dokumentation verhindert spaeteres Raten.

northline-wordmark-master.svg ist ein nuetzlicher Name. logo-final-final-2.svg behauptet nur einen Zustand, ohne die Rolle der Datei zu erklaeren.

5. Den Pfad in drei Zoomstufen pruefen

Normale Ansichtsweite

Ist das Wort sofort erkennbar und wirkt der Abstand gleichmaessig? Teste dunkel auf hell und hell auf dunkel. Verschwindet eine Punze auf einem Hintergrund, bleibt sie ein Problem.

Kleinste reale Groesse

Rendere bei 120, 140 und 180 Pixel Breite. Verlasse dich nicht auf Browser-Zoom, sondern setze die echte CSS-Breite. Pruefe besonders o, e und enge Verbindungen.

Starke Vergroesserung

Suche nach:

• Selbstueberschneidungen;
• doppelten Konturen;
• Spitzen an Kurvenverbindungen;
• unnoetig dichten Punktgruppen;
• Formen ausserhalb der viewBox;
• abgeschnittener Kantenglaettung.

Mehr Punkte bedeuten nicht automatisch mehr Qualitaet. Es braucht nur genug Geometrie fuer eine saubere Form.

6. Die React-Version themefaehig machen

Bei einer einfarbigen Komponente ist der Ersatz einer festen Fuellung durch currentColor meist die wertvollste Anpassung.

Die Komponente sollte:

• className annehmen;
• die viewBox behalten;
• aria-label="Northline" verwenden, wenn nur das Logo den Namen zeigt;
• nur bei bereits sichtbarem identischem Text aria-hidden="true" sein;
• Breite und Hoehe nur festsetzen, wenn das Designsystem es verlangt.

Der Pfad ist Bild, nicht semantischer Text. Die Umwandlung loest Schriftlieferung, aber keine Zugaenglichkeit.

7. Den Design-Handoff vorbereiten

Der Empfaenger erhaelt:

1. die Master-SVG;
2. eine PNG-Vorschau;
3. Schrift- und Gewichtsdokumentation;
4. die kleinste getestete Breite;
5. freigegebene Farbregeln;
6. den Hinweis, Proportionen nicht zu strecken.

Nach dem Import in Figma muessen Grenzen und Erscheinung der Browservorschau entsprechen. Veraendert das Programm den Frame, korrigiere den Frame und nicht die Pfadgeometrie.

8. Vor „produktionsreif“ einen physischen Test machen

Fuer Folie wird die Ausgabe auf 80 Millimeter gesetzt. Pruefe kleinste Innenraeume gegen Messer- und Materialtoleranz und schneide zuerst nur ein Muster.

Der Test beantwortet Fragen, die ein Monitor nicht klaert:

• Lassen sich kleine Punzen entgittern?
• Heben sich schmale Verbindungen?
• Wirkt das Material schwerer als der Bildschirm?
• Ist der Name aus der Zielentfernung lesbar?

Bei einem Fehlschlag geht es zurueck zu Gewicht, Groesse oder Abstand. Immer staerkere Konturen zerstoeren nur die urspruengliche Buchstabenform.

Abschliessende Pruefliste

• Echter Name statt Mustertext getestet;
• kleinste digitale Groesse lesbar;
• viewBox ohne Beschnitt;
• Farbverhalten dokumentiert;
• korrekter zugaenglicher Name im Code;
• Darstellung ohne installierte Schrift;
• Schriftquelle und Gewicht nachvollziehbar;
• physische Nutzung in Realgroesse getestet;
• eine eindeutig benannte Masterdatei.

Die Umwandlung ist nur ein Schritt. Erst wenn Spacing, Geometrie, Zugaenglichkeit, Integration und Zielmedium geprueft sind, ist die Produktions-SVG wirklich fertig.