> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG-Dateien bearbeiten: visuell oder direkt im Code > Bearbeite SVG-Formen im visuellen Editor oder ändere den Code. Prüfe Gruppen, Pfade und eingebettete Bilder, danach Farben, Zeichenfläche und gespeicherte Datei. Source: https://perfectvector.com/de/blog/how-to-edit-an-svg Language: de Author: Irene Kim Published: 2026-05-30T08:00:00+09:00 Updated: 2026-10-08T08:00:00+09:00 Öffne zum Bearbeiten einer SVG-Datei eine Kopie in einem **visuellen Editor**, wenn du Formen, Farben und Kurven ändern möchtest, oder in einem **Texteditor** für kleine Änderungen am Markup. Speichere die Datei als SVG und öffne sie erneut, um das Ergebnis zu prüfen. Welche Methode passt, hängt von der gewünschten Änderung und den Objekten in der Datei ab. Bestimme vor einem stärker eingreifenden Befehl, was du ausgewählt hast. Eine Gruppe, ein Pfad aus mehreren Teilen und ein eingebettetes PNG können auf der Zeichenfläche wie ein einziges Objekt aussehen. Sie brauchen jeweils eine andere Lösung. > **Wähle den passenden Bearbeitungsweg** > > * **Farben, Größe, Position und Kurven:** nutze Inkscape, Illustrator oder einen kompatiblen Vektoreditor im Browser. > * **IDs, Klassen, Hex-Farbe oder Zeichenfläche:** bearbeite eine Kopie des SVG-Codes und prüfe die Darstellung. > * **Alles wird gemeinsam ausgewählt:** prüfe den Objekttyp; hebe die Gruppierung nur bei einer tatsächlichen Gruppe auf. > * **Du hast nur ein Rasterbild:** vektorisiere die Vorlage, vergleiche die Vorschau und schalte das PerfectVector-Ergebnis vor Bearbeitung und Export frei. ## Kopie vorbereiten und SVG-Objekte bestimmen Du brauchst die SVG-Datei, eine Arbeitskopie, einen Editor und ein Anzeigeprogramm mit SVG-Unterstützung. Behalte das Original, bis die exportierte Kopie alle Prüfungen bestanden hat. [SVG steht für Scalable Vector Graphics](https://www.w3.org/TR/SVG2/). Das XML-Markup kann Vektorformen und Pfade beschreiben, aber auch eingebettete Bilder enthalten. Ein **Pfad** beschreibt eine Linie oder Form; ein **Knoten** ist ein bearbeitbarer Punkt auf diesem Pfad im Vektoreditor. Die Dateiendung SVG allein sagt nicht, ob das sichtbare Motiv solche Punkte zugänglich macht. Öffne die Kopie und prüfe das ausgewählte Objekt im Ebenen- oder Objektbereich. Sieh bei Bedarf im Texteditor ins Markup. Bestimme zuerst den Objekttyp, bevor du seine Struktur änderst: | Ausgewählter Inhalt | Was du prüfen solltest | Erster Schritt | | --------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------- | | Gruppe | Gruppencontainer, im Code häufig `` | Gruppe betreten oder einmal auflösen; nur bei verschachtelten Gruppen wiederholen | | Pfad mit getrennten Teilen oder Löchern | Ein Pfad mit mehreren Unterpfaden | Knoten bearbeiten; nur auf einer Kopie zerlegen, wenn getrennte Teile nötig sind | | Ein durchgehender Pfad | Bearbeitbare Knoten entlang der Kontur | Knoten- oder Direktauswahlwerkzeug verwenden | | Beschnittenes oder maskiertes Motiv | Beschnitt oder Maske samt Inhalt | Inhalt prüfen, bevor du die Begrenzung aufhebst | | Eingebettetes PNG oder JPEG | Bildobjekt; `` mit Verweis auf Rasterdaten | Rastervorlage bearbeiten oder für benötigte Pfade vektorisieren | Das [``-Element kann auf PNG- oder JPEG-Inhalte verweisen](https://www.w3.org/TR/SVG2/embedded.html). Diese Pixel werden nicht zu Pfaden, nur weil die äußere Datei auf `.svg` endet. Sichtbare Pixelkanten beim Vergrößern sind ein Hinweis; Objektbereich und Quellverweis liefern eine genauere Diagnose. Manche Editoren fügen auch ein gültiges Vektor-SVG als ein einziges Grafikobjekt ein. Eine einzelne Auswahl beweist daher wenig. Ein zusammengesetzter Pfad kann Löcher erhalten, etwa die Mitte eines „O“. Beim Zerlegen können sich diese Löcher ändern. Nutze die [Diagnose der SVG-Objekttypen](https://perfectvector.com/de/blog/svg-wont-ungroup), wenn das Aufheben der Gruppierung nicht verfügbar ist oder nichts bewirkt. ## Visuellen Editor oder Code wählen | Gewünschte Änderung | Geeignete Methode | Anschließend prüfen | | ------------------------------------------ | -------------------------------------------------- | ---------------------------------------------------------------------- | | Form umfärben oder verschieben | Visueller Editor | Nur die vorgesehenen Objekte wurden verändert | | Kontur umformen | Knoten- oder Direktauswahlwerkzeug | Kurven, Ecken und Löcher entsprechen weiterhin dem Motiv | | Einen bekannten Füllwert ändern | Texteditor | Sichtbare Farbe hat sich geändert; kein anderer Stil überschreibt sie | | CSS- oder Animations-Anknüpfungen erhalten | Texteditor | Erforderliche IDs und Klassen bleiben im gespeicherten Markup | | Zusätzliche Ränder entfernen | Seite/Zeichenfläche anpassen oder `viewBox` ändern | Motiv, Kontur und Effekte werden nicht abgeschnitten | | Getrennte Schneideebenen vorbereiten | Ablauf für die Zielanwendung | Geometrie und importierte Ebenen funktionieren in der Schneidesoftware | [Inkscape ist kostenlos und quelloffen](https://inkscape.org/about/), läuft unter macOS, Windows und Linux und verwendet SVG als Hauptformat. Illustrator ist eine weitere Möglichkeit, wenn du ihn bereits nutzt. Figma kann Grafiken als SVG zwischen Designwerkzeugen übertragen, allerdings schließt seine [Importanleitung SVG-Marker und Musterelemente aus](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools). Prüfe einen komplexen Import, bevor du dich für einen Editor entscheidest. Canvas dokumentierter [SVG-Editor-Ablauf](https://www.canva.com/features/svg-editor/) umfasst einfache Farb- und Layoutänderungen. Browsereditoren können für kleinere Aufgaben passen. Prüfe die Unterstützung für Füllungen, Konturen, Text und Effekte deiner Datei sowie die aktuellen Exportbedingungen. Für die engere Aufgabe, unterstützte Volltonfüllungen nach exakter Farbe in ausgerichtete Dateien aufzuteilen, nutze den [SVG-Farbseparator](https://perfectvector.com/de/svg-color-separator). Zum Umformen von Pfaden brauchst du einen Vektoreditor. ## Formen visuell bearbeiten und Export prüfen Die Befehlsnamen unterscheiden sich je nach Editor, der Ablauf bleibt aber gleich: 1. **Arbeitskopie öffnen.** Vergleiche das importierte Motiv mit dem Original. Halte an, wenn Schrift, Muster oder Effekte schon verändert wurden. 2. **Gewünschtes Objekt auswählen.** Betritt oder löse eine Gruppe nur auf, wenn der Objektbereich sie als Gruppe ausweist. Wechsle bei einem Pfad zum Knoten- oder Direktauswahlwerkzeug. 3. **Eine Änderung durchführen.** Ändere eine Füllung, verschiebe ein Teil oder passe einige Knoten an. Behalte beim Skalieren das Seitenverhältnis bei, außer du möchtest bewusst verzerren. 4. **Geänderten Bereich prüfen.** Betrachte Kurven und kleine Lücken aus der Nähe, dann das gesamte Motiv in der vorgesehenen Größe. 5. **Neue SVG-Datei speichern oder exportieren.** Öffne sie erneut in einem Anzeigeprogramm und der späteren Zielanwendung. Prüfe den bearbeiteten Teil, die Gesamtmaße und alle benötigten einzeln auswählbaren Objekte. Unterscheide beim Umfärben zwischen **Füllung**, der Farbe innerhalb einer Form, und **Kontur**, der Farbe entlang ihres Umrisses. Eine sichtbare Farbe kann sich auf viele Objekte verteilen. Die Auswahl nach gleicher Füllung kann helfen; prüfe sie jedoch vor der Änderung, denn andere Teile können dieselbe Farbe haben. Die [Anleitung zum Ändern von SVG-Farben](https://perfectvector.com/de/blog/how-to-change-svg-color) erklärt vererbte Stile und Farben, die sich nicht ändern lassen. Behalte eine bearbeitbare Masterdatei, wenn dein Editor ein eigenes Format oder zusätzliche Metadaten nutzt. Adobes [SVG-Speicheroptionen](https://helpx.adobe.com/illustrator/using/saving-artwork.html) enthalten Einstellungen für Schriften, CSS-Eigenschaften, Rasterbilder und Illustrator-Bearbeitungsdaten. Eine nach dem Export korrekt aussehende Datei kann dennoch anderes Markup oder gerasterte Inhalte haben. Vergleiche neben dem Bild auch die benötigten Objekte und Anknüpfungen. ## Kleine, kontrollierte Änderungen im SVG-Code Öffne die SVG-Kopie in VS Code oder einem anderen Klartexteditor. Lass Namensraum, Elementnamen und Anführungszeichen unverändert. Nimm eine Änderung vor und rendere die Datei vor der nächsten. ### Füllfarbe ändern, ohne den Pfad zu verändern Speichere dieses Beispiel als `triangle.svg` und öffne es in einem Anzeigeprogramm mit SVG-Unterstützung: ```svg ``` 1. Ersetze im `fill`-Attribut des Pfads `#3b82f6` durch `#f97316`. 2. Speichere die Datei und öffne oder aktualisiere sie erneut. 3. Prüfe, dass das Dreieck orange ist und seine Kontur unverändert blieb. Die Pfaddaten `d`, die `id` und die `class` müssen weiterhin dem Original entsprechen. Ändert sich die Farbe nicht, prüfe ein `style`-Attribut, eine Klassenregel, vererbte Farbe oder eine Kontur, die die sichtbare Darstellung steuern könnte. Ändere die verantwortliche Farbregel, statt jeden Farbwert in der Datei zu ersetzen. Methodenhinweis: Wir haben dieses Beispiel vor und nach der Farbänderung mit einem SVG-Renderer dargestellt und die entstandenen Pixel geprüft. Das Dreieck änderte seine Farbe; Pfaddaten, ID und Klasse blieben gleich. Dieses kleine Beispiel testet keinen Import oder Export einer komplexen SVG-Datei in einer Designanwendung. ### Leere Ränder mit der `viewBox` entfernen Die [`viewBox` des Wurzelelements enthält vier Zahlen: minimales x, minimales y, Breite und Höhe](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute). Sie definieren das Rechteck im SVG-Koordinatenraum, das auf den sichtbaren Viewport abgebildet wird. Im Beispiel reicht das Dreieck von x=8 bis 40 und y=8 bis 40. Ändere `viewBox="0 0 48 48"` in `viewBox="8 8 32 32"`, ohne die Pfaddaten anzutasten. Speichere und rendere erneut. Das Dreieck füllt nun mehr vom selben 48-mal-48-Viewport, weil die leeren Ränder entfernt wurden. Diese Änderung betrifft die Zuordnung der Zeichenfläche, nicht die Pfadgeometrie oder `width` und `height` des Wurzelelements. Lass bei echten Motiven Platz für Konturen und Effekte; eine eng um die Geometrie gelegte Box kann sie abschneiden. Oft ist es sicherer, die Seite oder Zeichenfläche visuell an die Zeichnung anzupassen und eine exportierte Kopie zu prüfen. Wird die Datei in der falschen physischen Größe importiert, folge der [Anleitung zu SVG-Abmessungen und `viewBox`](https://perfectvector.com/de/blog/svg-imports-wrong-size). Verschwindet das Motiv, wird es beschnitten oder verzerrt, stelle die ursprüngliche `viewBox` wieder her und prüfe die vier Werte sowie das Seitenverhältnis. Verschiebe nicht alle Knoten, um ein Problem mit der Zeichenfläche zu „beheben“. ## Wenn ein nachgezeichnetes SVG bereinigt werden muss Ein Rasterbild speichert Pixel in einem Gitter. **Vektorisierung** rekonstruiert daraus Geometrie. Eine nachgezeichnete Datei kann Farben und Konturen daher anders organisieren als das Originaldesign. Ein sichtbarer Teil kann über viele kleine Pfade verstreut sein. Eine einzige Farbe kann auch mehrere getrennte Bereiche umfassen. Dichte Knoten, winzige Flecken, Hintergrundformen und überlappende Konturen können eine einfache Änderung aufwendig machen. Prüfe diese konkreten Eigenschaften, statt die Datei allein danach zu bewerten, wie scharf sie bei einer Zoomstufe aussieht. **Fragmentierte Struktur** ![Illustration fragmentierter Vektorformen mit vielen Ankerpunkten](https://perfectvector.com/blog/how-to-edit-an-svg/messy-svg-editing.webp) *Illustration: Viele kleine Teile und dicht gesetzte Knoten erschweren Direktauswahl und Umformung.* **Einfachere Struktur** ![Illustration größerer Vektorformen mit weniger Ankerpunkten](https://perfectvector.com/blog/how-to-edit-an-svg/clean-svg-editing.webp) *Illustration: Größere Formen und sparsamer gesetzte Knoten lassen sich leichter prüfen und bearbeiten.* Diese Illustrationen erklären den Bearbeitungsaufwand. Sie sind keine Konvertierungsbeispiele oder gemessenen Produktvergleiche. Lohnt sich die vorhandene Nachzeichnung, repariere die betroffenen Bereiche und vereinfache nur dort, wo die Kontur genau bleibt. Stammt sie aus einem Rasterbild und wäre die Bereinigung zu aufwendig, versuche das Original erneut zu vektorisieren. Behalte brauchbare native Vektorgeometrie, statt einen Screenshot davon nachzuzeichnen. ## So läuft es mit PerfectVector ab PerfectVector passt zu Aufgaben, bei denen du aus Rasterbildern Pfade erstellen musst, etwa aus einem ursprünglichen PNG oder JPEG oder den Rasterinhalten einer SVG-Datei. Nutze für vorhandene Vektorgrafiken, die du erhalten möchtest, die allgemeinen Bearbeitungsmethoden oben. Gehe bei deiner eigenen Konvertierung so vor: 1. **Rastervorlage hochladen und Vektorvorschau vergleichen.** Suche nach fehlenden Details, unerwünschten Bereichen und Konturen, die von der Vorlage abweichen. 2. **Ergebnis vor Bearbeitung oder Export freischalten.** Konvertierung und Vorschau sind kostenlos und unbegrenzt. Laut [aktueller öffentlicher Preisrichtlinie](https://perfectvector.com/pricing.md) schaltet ein Credit jedes eindeutige Ergebnis frei; erneutes Herunterladen eines freigeschalteten Ergebnisses ist kostenlos. 3. **Freigeschaltete Geometrie prüfen und bearbeiten.** Prüfe die benötigten Formen und Knoten, passe bei Bedarf die Palette an und vergleiche das bearbeitete Ergebnis in der vorgesehenen Größe. 4. **Exportieren und in der nächsten Anwendung prüfen.** Öffne das SVG erneut, wähle die vorgesehenen Teile aus und prüfe Maße und kleine Details. Eine Vorschau allein belegt nicht, dass eine Datei für jeden Editor, Drucker oder jede Schneidemaschine geeignet ist. Schrift aus Rasterbildern wird als Geometrie rekonstruiert. Erwarte daher keinen bearbeitbaren getippten Text. Halte manuelle Korrektur oder Neuzeichnung als Möglichkeit bereit, wenn ein wichtiger Buchstabe, eine Kurve oder eine kleine Lücke die Nachzeichnung nicht übersteht. ## Häufige Fragen **Wie bearbeite ich ein SVG kostenlos?** Nutze Inkscape für visuelle Bearbeitung oder einen Klartexteditor für Markup-Änderungen. Browserwerkzeuge können ebenfalls kostenlose Funktionen bieten. Prüfe die aktuellen Exportbedingungen und ob sie die SVG-Funktionen deiner Datei unterstützen. **Kann ich ein SVG in VS Code bearbeiten?** Ja. Bearbeite das XML-Markup für kleine Füllfarbenänderungen, Maße, viewBox oder erforderliche IDs und Klassen. Speichere eine Kopie und rendere sie anschließend. Zum Umformen von Kurven eignet sich ein visueller Editor. **Warum kann ich keine einzelnen Formen in meinem SVG auswählen?** Prüfe den Objekttyp. Es kann eine Gruppe, ein Pfad mit mehreren Unterpfaden, beschnittenes Motiv oder eingebettetes Bild sein. Betritt oder löse eine echte Gruppe auf; bearbeite Pfadknoten für Geometrie und vektorisiere Rasterinhalt nur, wenn du Pfade brauchst. **Kann ich ein SVG in Canva bearbeiten?** Canvas dokumentierter SVG-Ablauf umfasst einfache Farb- und Layoutänderungen. Prüfe die importierte Datei und die aktuellen SVG-Downloadbedingungen. Für präzise Konturänderungen oder Kontrolle über IDs und Klassen nutze einen Vektoreditor oder das Markup. **Kann ich ein PerfectVector-Ergebnis vor dem Freischalten bearbeiten?** Vergleiche bei deiner eigenen Konvertierung zuerst die Vorschau und schalte das Ergebnis frei, bevor du die Bearbeitungs- und Exportfunktionen nutzt. Prüfe das exportierte SVG in seiner späteren Zielanwendung. ## Quellen 1. [W3C — Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/) — Dokument-, Formen-, Pfad- und Stilmodell von SVG. 2. [W3C — Eingebettete SVG-Inhalte](https://www.w3.org/TR/SVG2/embedded.html) — Rasterbilder können in einem SVG-Dokument eingebettet bleiben. 3. [W3C — SVG-Koordinatensysteme, Transformationen und Einheiten](https://www.w3.org/TR/SVG2/coords.html) — viewBox-Abbildung und Unterschied zwischen Geometrie und Viewport-Maßen. 4. [Inkscape — Über Inkscape](https://inkscape.org/about/) — offizielle Informationen zu Plattformen, SVG-Format und Open Source. 5. [Adobe — Grafiken in Illustrator speichern](https://helpx.adobe.com/illustrator/using/saving-artwork.html) — SVG-Exporteinstellungen und erhaltene Illustrator-Bearbeitungsdaten. 6. [Figma — Grafiken zwischen Designwerkzeugen kopieren](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools) — SVG-Übertragung und Importgrenzen für Marker und Muster. 7. [Canva — SVG-Editor](https://www.canva.com/features/svg-editor/) — dokumentierter Ablauf für einfache Farb-, Größen- und Layoutänderungen. 8. [PerfectVector — Preisrichtlinie](https://perfectvector.com/pricing.md) — aktuelle Bedingungen für Vorschau, Freischalten und erneutes Herunterladen. *** Behalte ein brauchbares SVG und bearbeite seine vorhandene Geometrie. Ist deine Vorlage ein Rasterbild oder muss die Nachzeichnung ersetzt werden, [probiere dein Originalbild in PerfectVector aus](https://perfectvector.com/de/image-to-vector), vergleiche Vorschau und Vorlage, schalte das Ergebnis vor der Bearbeitung frei und prüfe exportierte Formen und Maße in der nächsten Anwendung. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/how-to-edit-an-svg) - [SVG-Begrenzungsrahmen: Die richtigen Koordinaten messen](https://perfectvector.com/de/blog/svg-bounding-box.md) - [SVG-Mustereinheiten: Wiederholte Motive richtig skalieren](https://perfectvector.com/de/blog/svg-pattern-units.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)