SVG mit Claude zu erzeugen klingt erstmal nach einem Umweg. Das Modell malt keine Bilder, also lässt man es den Bauplan schreiben. Genau darin liegt der Vorteil. Wer ein Icon als Text beschreibt, bekommt keine fertige Grafik zurück, sondern etwas Nützlicheres. Eine Datei, die sich öffnen, ändern und weiterverwenden lässt.
SVG mit Claude zu erzeugen klingt erstmal nach einem Umweg. Das Modell malt keine Bilder, also lässt man es den Bauplan schreiben. Genau darin liegt der Vorteil. Wer ein Icon als Text beschreibt, bekommt keine fertige Grafik zurück, sondern etwas Nützlicheres. Eine Datei, die sich öffnen, ändern und weiterverwenden lässt.
Sozusagen Rohmaterial statt Endprodukt. Das ist der ganze Trick.
Inhaltsverzeichnis
Warum Text die bessere Ausgabeform ist
Sprachmodelle sind gut in Text. Nicht nur in Prosa, sondern auch in strukturiertem Text mit festen Regeln. HTML, Markdown, Mermaid, JSON. SVG gehört in dieselbe Familie. Es ist eine Auszeichnungssprache, in der Kreise, Linien, Rechtecke und Pfade als Zahlen und Attribute stehen. Kein Pixelbrei, sondern Geometrie.
SVG steht für Scalable Vector Graphics und ist ein offener Grafikstandard des W3C. Eine SVG-Datei enthält keine Bildpunkte, sondern eine Textbeschreibung aus geometrischen Formen. Sie lässt sich beliebig skalieren, ohne unscharf zu werden, und in jedem Texteditor öffnen.
Der Unterschied zu einem generierten Pixelbild ist praktischer Natur. Ein PNG aus einem Bildgenerator ist fertig. Wer die Farbe ändern will, muss neu generieren und hoffen. Ein SVG öffnest du in Inkscape, Affinity oder Illustrator und schiebst die Elemente dahin, wo sie hingehören. Oder du änderst im Texteditor einen Hex-Wert und bist fertig.
SVG und PNG im direkten Vergleich
| SVG aus dem Sprachmodell | PNG aus dem Bildgenerator | |
|---|---|---|
| Was entsteht | Textdatei mit Formbeschreibung | Raster aus Bildpunkten |
| Skalierung | verlustfrei, jede Größe | fest, wird unscharf |
| Nachbearbeitung | jedes Element einzeln änderbar | nur global oder per Neugenerierung |
| Dateigröße | meist wenige Kilobyte | oft mehrere hundert Kilobyte |
| Stärke bei | Icons, Symbole, Diagramme, Logos | Fotorealismus, Texturen, Szenen |
| Schwäche bei | alles Organische und Detailreiche | alles, was später geändert werden muss |
Claude selbst erzeugt bekanntlich keine Fotos oder Illustrationen im klassischen Sinn. Wie sich diese Lücke umgehen lässt, haben wir an anderer Stelle durchgespielt. Der SVG-Weg ist dabei der eleganteste, weil er nicht nach einem Ersatz aussieht, sondern nach einer eigenen Disziplin.
SVG mit Claude, der erste Versuch
Der Einstieg ist unspektakulär. Du beschreibst, was du sehen willst, und sagst dazu, dass die Ausgabe SVG sein soll. Claude rendert das Ergebnis direkt im Artefakt-Fenster, du siehst also sofort, ob die Sache aufgeht.
Erzeuge ein Icon als SVG-Code.
- Motiv: Lupe
- Stil: Outline, nur Konturen, keine Flächen
- Strichstärke gleichmäßig, abgerundete Enden
- viewBox 0 0 24 24
- Farbe über currentColor, damit ich sie per CSS steuern kannHeraus kommt so etwas. Zwanzig Zeilen, die man versteht, auch ohne Programmierkenntnisse.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round">
<circle cx="11" cy="11" r="7" />
<line x1="16" y1="16" x2="21" y2="21" />
</svg>Ein Kreis, eine Linie. Mehr braucht eine Lupe nicht. Und weil die Farbe auf currentColor steht, nimmt das Icon automatisch die Textfarbe der Umgebung an. Dunkelmodus inklusive, ohne zweite Datei.
Bei einfachen Motiven funktioniert das erstaunlich zuverlässig. Der Schweizer Journalist Matthias Schüssler hat zwölf Sprachmodelle mit derselben Icon-Aufgabe konfrontiert und kam zu einem klaren Ergebnis. Alle zwölf lieferten syntaktisch korrektes SVG, zehn davon verstanden die Aufgabe auf Anhieb. Claude landete in seiner Wertung knapp hinter Copilot auf einem der vorderen Plätze, ChatGPT musste erst zur SVG-Ausgabe überredet werden und produzierte zunächst ein Pixellogo.
Die schwächeren Ergebnisse in seinem Test kamen von Mistral, Perplexity und dem Schweizer Modell Apertus. Bei den chinesischen Modellen lag Kimi im brauchbaren Mittelfeld. Was DeepSeek, Qwen und Kimi sonst so können, ist ein Kapitel für sich, bei SVG spielen sie jedenfalls mit.
Was im Code steht, und warum du das lesen solltest
Man muss SVG nicht schreiben können, um damit zu arbeiten. Aber wer drei Begriffe kennt, kann das Ergebnis selbst reparieren, statt fünfmal nachzuprompten.
Die viewBox ist das Koordinatensystem einer SVG-Datei. Sie besteht aus vier Zahlen für Startpunkt und Größe der sichtbaren Fläche, etwa 0 0 24 24. Alle Elemente im SVG beziehen sich auf diese Werte. Wer die viewBox versteht, versteht, warum ein Element aus dem Bild rutscht.
Der zweite Begriff ist path. Pfade sind die freien Formen, alles, was kein Kreis, Rechteck oder Polygon ist. Sie stehen als Buchstaben-Zahlen-Ketten im Code und sehen aus wie Kauderwelsch. Hier machen Sprachmodelle die meisten Fehler, weil sie Koordinaten schätzen statt konstruieren.
Der dritte ist stroke gegen fill. Kontur oder Fläche. Ein Icon-Set wirkt genau dann uneinheitlich, wenn die KI zwischen beiden hin und her springt. Wer das im Prompt festnagelt, spart sich die Nacharbeit.
Das reicht schon. Alles Weitere lernt man beim Hinsehen.
Wo Claude an seine Grenzen kommt
Je komplexer das Motiv, desto schneller bricht die Qualität ein. Das ist kein Eindruck, das ist gemessen. Ein Forschungsteam der Zhejiang-Universität hat mit SVGenius einen Benchmark aus 2377 Aufgaben gebaut, aufgesetzt auf 300 echten SVG-Dateien aus 24 Anwendungsbereichen, und damit 22 Modelle geprüft. Das Ergebnis fällt in drei Richtungen aus. Kommerzielle Modelle schlagen offene Modelle deutlich, und der Abstand wächst mit der Komplexität. Alle getesteten Modelle verlieren an Genauigkeit, je verschachtelter die Vorlage wird. Und Stiltransfer, also ein bestehendes SVG in eine andere Optik zu überführen, bleibt für alle die härteste Disziplin.
In der Praxis heißt das ungefähr Folgendes. Ein Schloss-Symbol, ein Warndreieck, ein Zahnrad, ein Diagrammrahmen, all das gelingt zuverlässig. Ein sitzender Fuchs mit Schwanz und Ohren wird technisch gültiges SVG, sieht aber aus wie von jemandem gezeichnet, der einen Fuchs nur beschrieben bekommen hat.
Beides ist gültiges SVG aus demselben Modell. Links das Motiv, bei dem geschätzte Koordinaten sichtbar werden, rechts dieselbe Detaildichte als Konstruktion.
Typische Fehlerbilder, die immer wieder auftauchen, sind Elemente, die aus der viewBox ragen, Symmetrien, die nur fast stimmen, uneinheitliche Strichstärken innerhalb desselben Icons und überlappende Pfade, die beim Rendern seltsame Löcher erzeugen. Nichts davon ist dramatisch. Alles davon kostet Zeit, wenn man es übersieht.
Eine zweite Grenze ist womöglich wichtiger. Kein Sprachmodell vektorisiert ein vorhandenes Bild. Wer ein PNG hochlädt und ein sauberes SVG zurückerwartet, wird enttäuscht. Dafür gibt es Nachzeichnen-Funktionen in Grafikprogrammen oder spezialisierte Dienste. Das Modell generiert aus Beschreibung, nicht aus Vorlage.
Sieben Regeln für Prompts, die brauchbare Icons liefern
Der Unterschied zwischen einem unbrauchbaren und einem verwendbaren Ergebnis liegt fast immer im Prompt. Nicht in der Länge, sondern in der Genauigkeit.
- Stil benennen. Outline, gefüllt, zweifarbig, isometrisch, flach. Ohne Angabe rät das Modell, und es rät bei jedem Icon neu.
- viewBox vorgeben. 0 0 24 24 für Interface-Icons, 0 0 64 64 für alles Größere. Damit sitzen die Proportionen von Anfang an im richtigen Raster.
- Strichstärke festlegen. Ein Wert für alles, kein »etwa«. Sonst wandert die Stärke zwischen den Elementen.
- Farben als Liste liefern. Zwei bis drei Hex-Werte reichen. Ohne Palette entsteht ein Farbmix, der sich über ein Set hinweg nie deckt.
- Ein ganzes Set auf einmal anfordern. Fünf Icons in einer Antwort werden untereinander konsistent. Fünf Icons in fünf Anfragen werden fünf Einzelstücke.
- Ränder ausdrücklich verlangen. Ein Satz wie »halte zwei Einheiten Abstand zum Rand der viewBox« verhindert das häufigste Fehlerbild überhaupt.
- Korrigieren, nicht neu starten. »Die rechte Taste ragt heraus, verschiebe sie um zwei Einheiten nach links« funktioniert besser als ein zweiter Anlauf von null.
Zwölf Icons aus einem einzigen Prompt, alle sieben Regeln befolgt. Ein Raster, eine Strichstärke, eine Farbe, gemeinsamer Randabstand. Genau das unterscheidet ein Set von zwölf Einzelstücken.
Sechs Bausteine, die in jeden SVG-Prompt gehören
Das Motiv. So konkret wie möglich. Nicht »Sicherheit«, sondern »geschlossenes Vorhängeschloss von vorn«.
Die Stilfamilie. Outline, Solid, Duotone. Ein Wort, das über alle Icons gleich bleibt.
Das Raster. viewBox plus gewünschter Abstand zum Rand.
Die Linienführung. Strichstärke, runde oder eckige Enden, Ecken abgerundet oder nicht.
Die Farbregel. Entweder currentColor für CSS-Steuerung oder eine feste Hex-Palette.
Die Ausgabeform. Reiner SVG-Code, keine Erklärung drumherum, wenn du die Datei direkt weiterverarbeiten willst.
Wer keine Lust hat, diese Bausteine selbst zusammenzusetzen, lässt sie sich schreiben. Metaprompting funktioniert bei Grafikaufgaben besonders gut, weil das Modell die eigenen Schwächen kennt und den Prompt entsprechend eng zieht.
Und wenn ein Stil sitzt, gehört er in ein Projekt oder einen Style, damit er nicht bei jedem neuen Chat verloren geht. Das ist einer der Handgriffe, die im Alltag am meisten sparen, und einer der am seltensten genutzten.
Vom Chatfenster in die echte Datei
Der Weg aus dem Chat heraus ist banal, wird aber oft umständlich gemacht. Wenn Claude das SVG als Artefakt rendert, gibt es einen Download-Knopf. Damit hast du die Datei.
Falls nicht, geht es auch von Hand. Code markieren, kopieren, in einen beliebigen Texteditor einfügen, als icon.svg speichern. Wichtig ist nur, dass der Editor reinen Text schreibt und keine Formatierung mitschickt. Word ist dafür der falsche Ort, Notepad, TextEdit im Reinmodus oder VS Code sind die richtigen.
Ab da ist es eine normale Grafikdatei. Inkscape öffnet sie kostenlos, Affinity und Illustrator ebenfalls, jeder Browser zeigt sie an, Figma importiert sie, WordPress nimmt sie nach kurzer Freischaltung in die Mediathek. Und weil es Text ist, versteht sie auch die Versionsverwaltung, falls jemand so arbeitet.
Dasselbe Prinzip trägt übrigens weit über Icons hinaus. Balken, Torten, Zeitstrahlen, Organigramme, alles, was aus Formen und Beschriftungen besteht, lässt sich so erzeugen. Diagramme mit KI zu bauen ist im Kern dieselbe Übung, nur mit Daten statt Motiv.
Wann sich ein Spezialwerkzeug mehr lohnt
Bei aller Begeisterung, es gibt eine klare Linie. Sobald das Motiv aus vielen Elementen besteht, künstlerischen Anspruch hat oder wirklich hübsch aussehen soll, ist ein spezialisierter Vektorgenerator die bessere Wahl. Anbieter wie Recraft sind genau dafür trainiert und liefern Ergebnisse, die ein Sprachmodell nicht erreicht.
Umgekehrt gilt aber auch etwas. Für ein Interface-Icon, ein Symbol im Blogartikel, ein schnelles Schaubild oder einen Platzhalter, der morgen ohnehin wieder anders aussieht, ist der Weg über Claude schneller als jedes Werkzeug. Kein Konto, kein Export, kein Abo. Ein Prompt, dreißig Sekunden, fertig.
Die ehrliche Einordnung ist also weniger spektakulär, als die Screenshots im Netz nahelegen. Claude ersetzt keinen Grafiker und keinen Vektorgenerator. Es liefert Rohmaterial, schnell und in einem Format, an dem man weiterarbeiten kann. Und das ist meistens genau das, was fehlt.
