SVGs sind superflexibel – sie lassen sich skalieren, animieren, einfärben. In meinem letzten Artikel habe ich gezeigt, wie man sie erstellt. Heute geht’s darum, wie man sie direkt im Code bearbeitet – und wie du dabei sogar mit ChatGPT wie mit einem Designpartner sprechen kannst.
Was ist eigentlich ein SVG Code?
SVG steht für Scalable Vector Graphics – es ist also nicht wie PNG oder JPG ein Pixelbild, sondern ein kleines Textdokument, das genau beschreibt, was gezeichnet werden soll.
Ein Kreis zum Beispiel sieht im SVG-Code so aus:
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="red" />
</svg>
Hinweis: Manche Tools (z. B. Canva oder Figma) interpretieren SVGs unterschiedlich – ohne viewBox kann ein eigentlich runder Kreis wie eine Ellipse aussehen. Dieses Beispiel nutzt daher viewBox, um die Darstellung stabil zu halten.
SVG Code Öffnen und bearbeiten – so geht’s
SVG-Dateien lassen sich mit jedem Texteditor öffnen – aber nicht durch Doppelklick! Da startet meist Illustrator, Inkscape, ein anderes Vektor Grafikprogramm oder ein Browser.
So geht’s richtig:
Mit Windows
- Rechtsklick → Öffnen mit… → z. B. Notepad, Visual Studio Code, Notepad++
Mit macOS
- Rechtsklick → Öffnen mit… → z. B. TextEdit, CotEditor, BBEdit, VS Code
Mit Linux
- Rechtsklick → Öffnen mit… → z. B. Subline oder ein anderer Texteditor
Jetzt siehst du den Code deines Bildes und kannst ihn ändern. Natürlich kannst du auch ein leeres txt Dokument erstellen und direkt Code reinschreiben und dann als SVG speichern.
Und jetzt wird’s cool: Design per Dialog
Du musst nicht selbst coden, sondern kannst mit ChatGPT sprechen wie mit einem Design-Kollegen.
Beispiel:
Du sagst: „Erstelle mir ein SVG mit einem roten Kreis in der Mitte.“
Chat GPT kann dir direkt eine Datei zum Download anbieten oder ein Textfenster mit Code.
Darstellung in ChatGPT
Im Chat wird der Code gleich schon gerendert und du siehst ein Bild eines roten Kreises. Klickst du aber auf „Bearbeiten“ siehst du den Code. Klickst du auf „Kopieren“ wird der Code kopiert.
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="red" />
</svg>
Du kopierst das in deinen Texteditor, speicherst es als kreis.svg, und kannst es direkt in Figma, inkscape, Illustrator oder Canva importieren.
Code anpassen – oder anpassen lassen
Du kannst:
- selbst im Code Dinge ändern, z. B.
fill="blue"stattred - oder ChatGPT sagen: „Mach die Ecken rund, vergrößere den Kreis, gib ihm einen Schatten“
Und es gibt dir den fertigen SVG-Code oder die Datei zurück.
SVGs für Canva optimieren
Manche SVGs funktionieren in Canva nicht gut, wenn sie z. B. fill="none" oder Farbnamen wie black enthalten, lässt sich die Farbe nicht nachträglich ändern. Wenn du also z.B. ein SVG irgendwo herunter geladen oder exportiert oder selbst geschrieben hast und es läuft in Canva nicht wie erwartet, dann kann dir KI helfen.
Hier ist ein Beispiel-Prompt, den du an ChatGPT weitergeben kannst, um dein SVG Canva-freundlich zu machen:
Bitte optimiere dieses SVG für die Verwendung in Canva:
- Ersetze Farbnamen wie "black" durch HEX-Codes
- Entferne `fill="none"`, wenn möglich
- Verwende keine CSS-Styles
- Entferne Namespaces wie ns0
- Gib mir den korrigierten Code zurück
Du kannst dann einfach das SVG in den Chat hochladen und bekommst eine neue Version zurück.
Dein Take-Away
Du brauchst kein Illustrator-Profi zu sein, um mit SVGs kreativ zu arbeiten.
Ein einfacher Texteditor + ein Gespräch mit ChatGPT reichen – und schon gestaltest du Vektor-Grafiken, die sich nahtlos in dein Design-Tool einfügen lassen.
Hast du Lust, SVGs auf neue Weise zu entdecken? Dann probier’s aus – sprich mit ChatGPT über Formen, Farben und Kurven.
Es ist keine Raketenwissenschaft, nur ein bisschen XML.
