SVG-Dateien bearbeiten: visuell oder direkt im Code

Ö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.

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. 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:

Das <image>-Element kann auf PNG- oder JPEG-Inhalte verweisen. 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, wenn das Aufheben der Gruppierung nicht verfügbar ist oder nichts bewirkt.

Visuellen Editor oder Code wählen

Inkscape ist kostenlos und quelloffen, 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. Prüfe einen komplexen Import, bevor du dich für einen Editor entscheidest.

Canvas dokumentierter SVG-Editor-Ablauf 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. 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 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 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 xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</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. 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.

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

Einfachere Struktur

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 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 — Dokument-, Formen-, Pfad- und Stilmodell von SVG.
2. W3C — Eingebettete SVG-Inhalte — Rasterbilder können in einem SVG-Dokument eingebettet bleiben.
3. W3C — SVG-Koordinatensysteme, Transformationen und Einheiten — viewBox-Abbildung und Unterschied zwischen Geometrie und Viewport-Maßen.
4. Inkscape — Über Inkscape — offizielle Informationen zu Plattformen, SVG-Format und Open Source.
5. Adobe — Grafiken in Illustrator speichern — SVG-Exporteinstellungen und erhaltene Illustrator-Bearbeitungsdaten.
6. Figma — Grafiken zwischen Designwerkzeugen kopieren — SVG-Übertragung und Importgrenzen für Marker und Muster.
7. Canva — SVG-Editor — dokumentierter Ablauf für einfache Farb-, Größen- und Layoutänderungen.
8. PerfectVector — Preisrichtlinie — 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, vergleiche Vorschau und Vorlage, schalte das Ergebnis vor der Bearbeitung frei und prüfe exportierte Formen und Maße in der nächsten Anwendung.