So bearbeitest du ein SVG (und warum ein sauberes so viel einfacher ist)

Es gibt zwei Möglichkeiten, ein SVG zu bearbeiten. Du kannst es in einem visuellen Editor öffnen und Formen anklicken, um sie umzufärben, zu skalieren oder zu verschieben. Oder du öffnest den Code und änderst ihn von Hand, denn ein SVG ist im Grunde nur eine Textdatei. Die meisten möchten den ersten Weg: meist eine Farbe austauschen oder ein Icon skalieren. Ein visueller Editor erledigt das in Sekunden.

Was kaum ein Tutorial erwähnt: Wie einfach das alles ist, hängt davon ab, wie das SVG erstellt wurde. Eine saubere Datei mit ein paar ordentlich aufgebauten Formen lässt sich in Sekunden bearbeiten. Eine chaotische Datei, wie sie ein schneller Converter ausspuckt, kann Tausende verstreute Punkte enthalten und eine einzige Farbe in Hunderte Splitter zerlegen. Dann funktioniert „klick einfach die Form an und färb sie um“ nicht mehr. Dieser Leitfaden zeigt beide Bearbeitungsmethoden und wie du erkennst, welche Art Datei du vor dir hast.

Die Kurzfassung

• Zwei Wege zum Bearbeiten: visuell in einem Editor (umfärben, skalieren, umformen) oder direkt im SVG-Code (es ist nur Text).
• Kostenloser visueller Editor: Inkscape. Profi-Tool: Illustrator. Im Browser: Figma oder ein kostenloser Online-SVG-Editor. Code: VS Code oder jeder Texteditor.
• Der typische Job, Umfärben: Form auswählen, Füllung ändern. Schnell bei einer sauberen Datei, mühsam bei einer fragmentierten.
• Bearbeite den Code, wenn Klassennamen und IDs erhalten bleiben müssen, du die viewBox ändern willst oder schnell etwas anpassen möchtest, ohne eine App zu öffnen.
• Wenn du die gewünschte Form nicht auswählen kannst, liegt es an der Datei, nicht am Editor. Eine sauberere Konvertierung ist oft die eigentliche Lösung.

Zuerst: Was steckt eigentlich in einem SVG?

Ein SVG ist bearbeitbar, weil es aus mathematisch beschriebenen Formen besteht, die als Klartext geschrieben sind (genauer gesagt: XML). Ein Kreis wird als Mittelpunkt und Radius gespeichert, ein Logo als Reihe von Pfaden, jeweils mit eigener Füllfarbe. (Hier ist die längere Erklärung, falls Vektoren neu für dich sind.)

Deshalb kannst du ein SVG umfärben oder skalieren, ohne dass es jemals unscharf wird. Und deshalb öffnet es die Tür zu zwei völlig unterschiedlichen Arten der Bearbeitung. Öffnest du es in einem visuellen Editor, arbeitest du mit den Formen. Öffnest du es in einem Texteditor, arbeitest du mit dem Code, der diese Formen beschreibt. Dieselbe Datei, zwei Zugänge.

Prüfe zuerst eines: Öffne das SVG und versuche, eine einzelne Form anzuklicken. Wenn du sie separat auswählen und verschieben kannst, ist es ein echter, bearbeitbarer Vektor. Wenn alles als ein Block ausgewählt wird und beim Reinzoomen verpixelt, ist es wahrscheinlich ein Rasterbild in einer .svg-Datei, also ein „Fake“-Vektor, den du nicht wirklich bearbeiten kannst. Kein Editor behebt das; die Datei muss zuerst korrekt konvertiert werden.

Die zwei Wege, ein SVG zu bearbeiten, und wann du welchen nutzt

Du möchtest…	Beste Methode
Formen umfärben, skalieren oder verschieben	Visueller Editor (Inkscape, Illustrator, Figma)
Text bearbeiten oder ein paar Farben schnell austauschen	Visueller Editor oder der Code für Einzelanpassungen
Klassennamen / IDs für CSS oder Animation behalten	Code direkt bearbeiten
Die viewBox, Abmessungen oder einen Hex-Wert ändern	Code direkt bearbeiten
Pfade von Hand neu zeichnen oder umformen	Visueller Editor

Die meiste Bearbeitung passiert visuell. Zum Code greifst du, wenn du entwickelst und das Markup exakt so bleiben muss, wie es geschrieben ist. Das respektiert ein visueller Editor nicht immer (mehr dazu gleich).

Ein SVG visuell bearbeiten

Das ist der Weg, den die meisten wollen. Er deckt Umfärben, Skalieren, Umformen und das Löschen von Teilen ab.

Wähle einen Editor

• Inkscape ist kostenlos, Open Source und läuft auf Mac, Windows und Linux. Es ist die übliche Antwort auf „Womit bearbeite ich SVGs?“ und das zu Recht.
• Adobe Illustrator ist der kostenpflichtige professionelle Standard und gibt dir die meiste Kontrolle, falls du es bereits nutzt.
• Figma läuft im Browser und eignet sich gut für leichte Bearbeitungen und Umfärbungen. Deshalb greifen viele Produktteams darauf zurück.
• Kostenlose Online-Editoren wie Boxy SVG oder ein schneller Web-SVG-Editor reichen für kleine Änderungen, ohne dass du etwas installieren musst.

Nimm die Änderung vor

Die Schritte sind überall gleich:

1. Öffne die Datei in deinem Editor (Datei → Öffnen oder per Drag-and-drop hineinziehen).
2. Hebe die Gruppierung bei Bedarf auf. Konvertierte und exportierte SVGs kommen oft als eine gesperrte Gruppe an. Wähle alles aus und hebe die Gruppierung auf (in Illustrator und Inkscape), damit du einzelne Formen erreichst.
3. Wähle die Form aus, die du bearbeiten möchtest, mit dem Auswahl- oder Direktauswahlwerkzeug.
4. Ändere sie. Lege eine neue Füllfarbe fest, ziehe an einem Griff zum Skalieren, verschiebe sie, bearbeite den Text oder lösche einen Teil, den du nicht brauchst.
5. Speichere oder exportiere als SVG, wenn du fertig bist.

Die häufigste Änderung: Farben ändern

Die meisten Fragen zu „Wie bearbeite ich ein SVG?“ bedeuten eigentlich „Wie färbe ich das um?“. Bei einer sauberen Datei geht das schnell: Form anklicken, neue Füllung wählen, fertig. Jede Farbe ist eine eigene bearbeitbare Form, also wird aus deinem Markenblau mit einem Klick pro Form Grün.

Genau hier fällt eine chaotische Datei aber auseinander. Darum geht es im nächsten Abschnitt.

Den SVG-Code direkt bearbeiten

Weil ein SVG Text ist, kannst du es in VS Code, Notepad oder jedem Texteditor öffnen und von Hand ändern. Das ist der Entwicklerweg, und für manche Aufgaben ist er schneller und sicherer als jede visuelle App:

• Umfärben: Suche das fill="#3b82f6" der Form und ändere den Hex-Wert.
• Arbeitsfläche skalieren: Bearbeite width, height oder viewBox.
• Deine Hooks intakt halten: Das ist der wichtige Punkt. Visuelle Editoren wie Illustrator schreiben das Markup beim Speichern oft um, benennen also class- und id-Attribute um oder entfernen sie, auf die dein CSS oder JavaScript angewiesen ist. Wenn dein SVG für Styling oder Animation verdrahtet ist, ist das Bearbeiten des Codes von Hand die einzige zuverlässige Methode, diese Hooks zu behalten.

Der Kompromiss ist einfach: Codebearbeitung ist ideal für kleine, präzise Änderungen und alles, was Klassen, IDs oder Animation betrifft. Für das Umformen einer Kurve oder das Umfärben einer komplexen Illustration ist sie das falsche Werkzeug. Dafür sind visuelle Editoren da.

Warum manche SVGs ein Albtraum beim Bearbeiten sind (und wie du das behebst)

Das sagt dir keine Tool-Seite: Selten ist der Editor das Problem. Meist ist es die Datei.

Öffnest du ein sauberes SVG, bleibt die Bearbeitung entspannt. Es gibt eine Handvoll benannter Formen, eine Füllung pro Form und wenige Knoten. Du klickst also genau das an, was du meinst, und färbst es in einer Sekunde um.

Öffnest du ein chaotisches SVG, meist etwas, das ein schneller kostenloser Converter automatisch nachgezeichnet hat, wird dieselbe Änderung mühsam:

• Eine einzelne Farbe wird in Hunderte winzige Splitter aufgeteilt, sodass es keine einzelne „blaue Form“ gibt, die du anklicken kannst. Es gibt Hunderte davon.
• Glatte Kurven werden mit Tausenden Ankerpunkten vollgestopft, sodass Umformen aussichtslos ist und der Editor langsam wird. (Das ist das Problem mit zu vielen Knoten in voller Länge.)
• Verstreute Hintergrundrechtecke und abgeschnittene Kanten stehen im Weg.

Wenn du an diesem Punkt bist, ist die Lösung meist kein besserer Editor und nicht mehr Geduld. Du brauchst eine sauberere Ausgangsdatei. Wenn du das Originalbild erneut in ein ordentliches SVG konvertierst, bekommst du etwas, das du tatsächlich bearbeiten kannst.

Wie das mit PerfectVector aussieht

Das am einfachsten zu bearbeitende SVG ist ein sauberes, und genau dafür ist PerfectVector gebaut. Es rekonstruiert dein Bild als saubere Pfade mit niedriger Knotenzahl und hält jede Farbe als eigene bearbeitbare Form, damit du das Ergebnis in Illustrator, Figma oder Inkscape öffnen und Dinge so auswählen und umfärben kannst, wie Tutorials es voraussetzen.

Außerdem gibt es einen integrierten Farbeditor, mit dem du Farben direkt nach der Konvertierung umfärben oder zusammenführen kannst: nach Farbe statt durch mühsames Suchen einzelner Pfade. Weniger Farben bedeuten weniger Formen, die du verwalten musst, und eine Datei, die später einfacher zu bearbeiten ist. Du kannst ein Bild in ein sauberes, bearbeitbares SVG konvertieren und die Pfade selbst prüfen. Konvertiere deine ersten Bilder kostenlos, keine Kreditkarte erforderlich.

Nach Farbe umfärben, nicht nach Pfad

Eine kurze Checkliste, bevor du bearbeitest

• Bestätige, dass es ein echter Vektor ist. Klicke eine einzelne Form an. Wenn sie separat auswählbar ist, bist du bereit. Wenn das ganze Bild als ein Block ausgewählt wird und beim Zoomen unscharf wird, konvertiere es zuerst in ein echtes SVG.
• Behalte das Original. Speichere eine Kopie, bevor du anfängst, besonders wenn du den Code anfasst.
• Wähle die Methode. Visueller Editor für Formen und Farben; Code für Klassen, IDs, viewBox und kleine Anpassungen.
• Hebe die Gruppierung auf, wenn die Datei als eine gesperrte Gruppe ankommt.
• Wenn du nicht auswählen kannst, was du brauchst, hör auf, dagegen anzukämpfen. Die Datei ist zu fragmentiert, und eine sauberere Konvertierung spart dir mehr Zeit als manuelles Aufräumen.

FAQ

Wie kann ich ein SVG kostenlos bearbeiten? Nutze Inkscape, einen kostenlosen Open-Source-Editor für Mac, Windows und Linux, für vollständige visuelle Bearbeitung. Für schnelle Änderungen kannst du einen kostenlosen Online-SVG-Editor im Browser verwenden oder die Datei in einem Texteditor wie VS Code öffnen und den Code direkt ändern. Alle drei kosten nichts.

Wie ändere ich die Farbe eines SVG? In einem visuellen Editor wählst du die Form aus und legst eine neue Füllfarbe fest. Im Code suchst du den Füllwert der Form (zum Beispiel fill="#3b82f6") und änderst den Hex-Wert. Wenn eine Farbe auf viele Formen aufgeteilt ist, färbe nach Farbe um, statt jedes Teil einzeln anzuklicken, mit einem Tool, das Farben für dich gruppiert.

Kann ich ein SVG in VS Code bearbeiten? Ja. Ein SVG ist XML-Text, daher kann VS Code oder jeder Texteditor es problemlos öffnen. Das ist der richtige Weg, um Hex-Farben, die viewBox oder Abmessungen zu ändern und class- und id-Attribute für CSS oder Animation intakt zu halten. Zum manuellen Umformen von Kurven eignet es sich nicht.

Warum kann ich in meinem SVG keine einzelnen Formen auswählen? Meistens hat es einen von zwei Gründen. Die Formen sind gruppiert, also wähle alles aus und hebe zuerst die Gruppierung auf. Oder die Datei ist ein Rasterbild in einer .svg-Datei, das keine separaten Formen zum Auswählen enthält. Wenn es beim Reinzoomen verpixelt, ist es der zweite Fall, und du musst es in einen echten Vektor konvertieren.

Kann ich ein SVG in Canva bearbeiten? Ja, für einfache Änderungen. Canva lässt dich ein SVG umfärben, skalieren und neu positionieren, was für die meisten leichten Anforderungen reicht. Für präzise Pfadbearbeitung, das Aufheben komplexer Gruppierungen oder Änderungen auf Code-Ebene nutzt du Inkscape, Illustrator oder einen Texteditor.

Wie bearbeite ich ein SVG unter Windows oder Mac? Dieselben Tools funktionieren auf beiden Systemen. Inkscape läuft auf Windows, Mac und Linux; Figma und Online-Editoren laufen in jedem Browser; VS Code bearbeitet den Code auf beiden. Du brauchst keine unterschiedliche Software für verschiedene Betriebssysteme.

---

Bearbeiten läuft reibungslos, wenn die Datei von Anfang an sauber ist. Wenn deine ein Gewirr aus verstreuten Pfaden ist, konvertiere das Original in ein sauberes, bearbeitbares SVG und starte mit etwas, womit du wirklich arbeiten kannst.