Bild in SVG für Illustrator umwandeln: editierbare Konturen für technische Strichzeichnungen

Eine Dokumentationsdesignerin erhält einen Satz Strichzeichnungen für ein Produkthandbuch. Der Kunde hat nur einen Wunsch: alle Linien etwas kräftiger, damit die Abbildungen den Zeitungsdruck überstehen. Die Dateien sind SVGs — eigentlich eine Sache von dreißig Sekunden: alles auswählen, Konturstärke erhöhen, fertig. Doch als die erste Datei in Illustrator aufgeht, gibt es keine Konturen zum Anpassen. Jede „Linie" ist in Wahrheit eine dünne gefüllte Form: zwei parallele Kanten mit Schwarz dazwischen. Die Stärke zu ändern hieße, jeden Pfad einzeln zu versetzen — aus dreißig Sekunden wird ein Nachmittag.

Wenn Sie nach Bild in SVG umwandeln gesucht und solche Dateien erhalten haben: Das Problem liegt weder an Illustrator noch an Ihnen, sondern daran, wie das SVG nachgezeichnet wurde.

Warum manche SVGs in Illustrator trotzdem schwer editierbar sind

„SVG" beschreibt nur den Container und sagt nichts darüber, was darin steckt. Die meisten kostenlosen Bild-zu-SVG-Konverter — und auch die Standardeinstellung von Illustrators Bildnachzeichner — suchen die Kanten dunkler Bereiche und packen jeden Bereich in einen gefüllten Pfad. Genau das beschreibt Adobes Dokumentation zum Bildnachzeichner: Rastergrafik wird zu Vektor-Formen. Für ein Logo oder eine Silhouette ist das die richtige Antwort.

Für technische Strichzeichnungen ist es die falsche. Eine gezeichnete Linie wird beim Umriss-Tracing zu einem langen, dünnen, schwarz gefüllten Polygon. Skalieren und drucken lässt sich das problemlos — aber die eine Operation, die man an technischen Zeichnungen am häufigsten braucht, das Ändern der Linienstärke, ist keine editierbare Eigenschaft mehr. Illustrator-Nutzer stolpern ständig darüber; die Foren sind voller Threads mit der Frage, warum die nachgezeichnete Zeichnung als Umrisse zurückkommt statt als Pfade entlang der Linienmitte.

Was Sie für Handbücher, IFUs und Montageanleitungen wirklich brauchen, ist konturbasiertes SVG: Jede sichtbare Linie ist ein einzelner Pfad mit fill: none und einer stroke-width, der entlang der Mittellinie der gezeichneten Linie verläuft. Dann ist die Linienstärke eine einzige Zahl — und Illustrator ändert sie global mit einem Klick.

Gefüllter Umriss vs. Kontur/Centerline auf einen Blick

Illustrators Bildnachzeichner hat zwar einen Mittellinien-Modus, doch der ist auf einfache Artwork mit einheitlicher Strichstärke abgestimmt; bei realistischen Produktzeichnungen zerfallen Kurven gern in Fragmente und benachbarte Linien verschmelzen. Zuverlässiger ist es, konturbasiertes SVG direkt bei der Erzeugung zu produzieren, statt es nach dem Tracing zu reparieren.

Workflow 1 — einfache Abbildungen: SVG direkt generieren

Ist die Abbildung ein überschaubares Objekt — ein Werkzeug, ein Bedienfeld, ein Gestendiagramm, eine einzelne Produktansicht — beschreiben Sie sie und generieren Sie SVG als natives Ausgabeformat. ManualFig übergibt den Prompt an ein konturnatives SVG-Modell: Die Pfade entstehen von Anfang an als centerline-artige Konturen und werden nicht nachträglich getract.

Die Schreibtischlampe unten wurde mit SVG als Ausgabemodus direkt aus diesem Prompt generiert:

In dieser Datei (SVG herunterladen, 4,3 KB) stecken 38 Elemente — 28 Pfade, 7 Kreise, 2 Linien, 1 Polylinie — und jedes einzelne ist fill: none mit Kontur. Die ganze Zeichnung nutzt effektiv eine Strichstärke (2,5 bei einer 1000×750-viewBox) und öffnet sich in Illustrator als Satz sauberer, einheitlicher Konturen.

Workflow 2 — komplexe Abbildungen: erst Bild generieren, dann konvertieren

Die direkte SVG-Generierung hat eine Komplexitätsgrenze. Abbildungen mit feinen mechanischen Details, dichter innerer Struktur oder realistischen Proportionen gelingen als Rasterbild nach wie vor besser — dort kann das Modell frei zeichnen. Für solche Fälle sind zwei Schritte der bessere Weg: Rasterstrichzeichnung generieren (oder hochladen), inhaltlich perfektionieren, dann in SVG konvertieren.

Das ist die zuerst generierte Rasterlampe — eine normale PNG-Strichzeichnung:

Und das ist dasselbe Bild nach der Ein-Klick-Konvertierung zu SVG in ManualFig:

Die konvertierte Datei (SVG herunterladen, 3,8 KB) enthält 33 Elemente. Die Linienführung — Armsegmente, Gelenke, Fußellipsen — ist konturbasiert, die Strichstärken sind einmalig in sechs CSS-Klassen definiert, sodass Illustrator sie klassenweise oder per Auswahl umstylen kann. Zwei Elemente sind gefüllte Formen: die massive Pfeilspitze. Das verdient eine präzise Formulierung:

Dieser Kompromiss ist der ehrliche Stand der Technik. Pfeilspitzen und andere bewusst massive Zeichen sollen gefüllt bleiben; entscheidend ist, dass die Zeichnung selbst — die Linien, die Sie umstylen wollen — als Konturen ankommt.

Dieselbe Lampe, zwei Wege: Was sich tatsächlich unterscheidet

Laden Sie beide Dateien herunter und öffnen Sie sie nebeneinander in Illustrator — der Unterschied beim Auswählen und Umstylen sagt mehr als jeder Screenshot.

Konturstärken in Illustrator anpassen

Mit konturbasiertem SVG dauert der Zeitungsdruck-Auftrag aus dem ersten Absatz wirklich nur dreißig Sekunden:

1. SVG in Illustrator öffnen (Datei → Öffnen, nicht Platzieren, wenn Sie editieren wollen).
2. Auswahl → Alles auswählen, dann im Steuerungs- oder Konturbedienfeld eine neue Konturstärke setzen — alle Pfade mit Kontur aktualisieren sich gleichzeitig.
3. Für gezielte Änderungen mit Auswahl → Gleich → Konturstärke eine Stärkeklasse greifen (etwa Gelenkdetails vs. Hauptumrisse) und separat anpassen.
4. Vor dem Skalieren „Konturen und Effekte skalieren" (Voreinstellungen → Allgemein) prüfen, damit Linienstärken bewusst mitskalieren — oder bewusst fix bleiben.

Weil konvertierte Dateien ihre Stärken in wenigen Klassen bündeln, funktioniert Schritt 3 besonders gut: Die sechs Stärken der Lampe oben verhalten sich wie sechs benannte Ebenen der Linienhierarchie.

Muss der Hintergrund vorher entfernt werden?

Für die Konvertierung gibt ein sauberer weißer oder einfarbiger Hintergrund dem Tracer eine eindeutige Figurgrenze — von ManualFig generierte Strichzeichnungen konvertieren daher unverändert gut. Wollen Sie ein Foto oder einen Screenshot mit unruhigem Hintergrund konvertieren, wandeln Sie es zuerst in Strichzeichnung um (siehe unseren Leitfaden Foto zu Strichzeichnung), statt das Foto direkt zu vektorisieren — vektorisierte Fotoschattierung ergibt genau die Suppe aus gefüllten Flächen, die dieser Artikel vermeiden will.

PNG oder SVG für die finale Lieferung?

Kurzfassung: PNG, wenn die Abbildung an genau einer Stelle in genau einer Größe lebt; SVG, wenn sie in zwei oder mehr Größen erscheint oder stromabwärts jemand umstylen können muss. Die ausführliche Entscheidungshilfe steht in unserem Leitfaden zu Produkt-Strichzeichnungen. Für Handbücher, die in Druck und Web gehen, ist konturbasiertes SVG das sicherere Archivformat: Der Export zu PNG ist ein Klick, und die Linienstärken bleiben eine einzige Bearbeitung entfernt.

Selbst ausprobieren

Beide Lampen in diesem Artikel stammen ohne manuelle Nacharbeit aus demselben Werkzeug:

1. ManualFig öffnen und die Abbildung beschreiben — oder ein vorhandenes Bild hochladen.
2. Für die direkte Generierung SVG als Ausgabemodus wählen; oder ein Bild generieren und am Ergebnis In SVG konvertieren drücken.
3. Das exportierte SVG in Illustrator öffnen und die Konturen nach Bedarf umstylen.

Einfache Abbildungen direkt als SVG generieren; detailreiche erst als Bild perfektionieren und dann konvertieren. Auf beiden Wegen kommen die Linien als Linien an — nicht als Umrisse, die sich als Linien ausgeben.

Verwandte Tools: Anleitungs-Generator mit Bildern, Foto zu Strichzeichnung für Handbücher.