SVG Editor
Formen und Code nebeneinander
Fügen Sie SVG-Code ein oder beginnen Sie mit einer Form. Mit diesem SVG Editor verschieben und gestalten Sie sie auf einer Live-Fläche und kopieren oder laden dann den sauberen Code. Kein Konto, kein Upload, nichts auf einem Server.
- KostenlosPreis
- FünfFormen
- Sauberes SVGErgebnis
- KeineUploads
SVG Editor
Formen einfügen oder zeichnen, verschieben, skalieren und sauberen Code speichern
Nichts ausgewählt. Klicken Sie auf eine Form auf der Fläche oder in der Ebenenliste.
Bereit. Eine Beispielzeichnung ist geladen. Fügen Sie unten Ihren eigenen SVG-Code ein und drücken Sie Code laden.
Was ein SVG Editor macht
Mit diesem SVG Editor bearbeiten Sie Vektorgrafiken direkt im Browser. Sie fügen SVG-Code ein oder beginnen mit einer einfachen Form. Danach verschieben, skalieren und gestalten Sie die Teile auf einer Live-Fläche. Da alles auf Ihrem Gerät läuft, verlässt der Code nie die Seite. Zudem bleibt nirgendwo eine Kopie.
Das Bearbeiten geht in wenigen Schritten. Zuerst fügen Sie Ihren SVG-Code ein oder legen eine Form an, etwa ein Rechteck, einen Kreis, eine Linie oder einen Text. Danach klicken Sie ein Teil an, ziehen es an seinen Platz oder ändern am Eckpunkt seine Größe. Zudem setzen Sie Füllung und Rahmen, tippen exakte Zahlen und sortieren die Ebenen, damit das richtige Teil oben liegt.
Sie brauchen kein Konto, und es gibt keinen Upload, deshalb ist eine Zeichnung sofort bereit. Alles ändert sich beim Bearbeiten, also sehen Sie das Ergebnis vor dem Speichern. Passt es, kopieren Sie den Code oder laden ihn als SVG-Datei. Dann geht er in eine Seite, ein Icon-Set oder eine Designdatei.
Dieser SVG Editor passt für alle, die mit Vektorgrafik arbeiten. Zum Beispiel räumen Entwickler ein Icon auf, Designer ändern eine Logofarbe, und Autoren passen ein kleines Diagramm ohne schweres Programm an. Da das Ergebnis reiner SVG-Text ist, bleibt es in jeder Größe scharf. Zudem bleibt es lesbar, wenn Sie es in ein Projekt einfügen.
Eine Zeichnung, Formen und Code
Das Bild unten zeigt links die Zeichenfläche. Rechts steht der saubere SVG-Code, den der Editor dafür hält.
Klicken Sie eine Form auf der Fläche an, dann markiert sie ein gestrichelter Rahmen. Verschieben oder gestalten Sie sie, und der passende Code ändert sich sofort. So stimmen beide immer überein.
Auswählen, ziehen, feinjustieren
Klicken Sie eine Form auf der Fläche oder in der Ebenenliste an. Ein gestrichelter Rahmen markiert sie, und der Eckpunkt skaliert Rechteck, Kreis, Ellipse, Linie, Text oder Bild. Pfade und Gruppen verschieben Sie per Ziehen, ihre Größe ändern Sie im Code.
Das Seitenpanel setzt Füllung, Rahmen und Deckkraft. Darunter steht jedes Attribut der Form in einem eigenen Feld, also tippen Sie eine exakte Zahl. Zudem schieben die Pfeiltasten die ausgewählte Form, und Rückgängig geht durch Ihre letzten Änderungen zurück.
Videoanleitung: SVG Editor
Ein kurzes Video zeigt jeden Schritt. Wählen Sie dann unten Ihre Sprache und schalten Sie bei Bedarf Untertitel ein.
So bearbeiten Sie ein SVG
Sechs Schritte, und der Code verlässt nie den Tab.
- 1
Code einfügen oder Form anlegen
Fügen Sie SVG-Code ein und drücken Sie Code laden. Oder beginnen Sie mit Rechteck, Kreis, Ellipse, Linie oder Text, wenn Sie neu anfangen.
- 2
Ein Teil auf der Fläche auswählen
Klicken Sie eine Form an, um sie zu wählen. Ein gestrichelter Rahmen und ein Eckpunkt erscheinen, also wissen Sie immer, welches Teil aktiv ist.
- 3
Verschieben und skalieren
Ziehen Sie die Form an einen neuen Platz oder ändern Sie am Eckpunkt ihre Größe. Halten Sie Umschalt, um die Proportionen von Rechteck, Ellipse oder Bild zu behalten.
- 4
Füllung und Rahmen gestalten
Wählen Sie eine Füllfarbe, fügen Sie einen Rahmen hinzu, ändern Sie seine Breite und die Deckkraft. Die Fläche zeichnet sich bei jedem Wert neu.
- 5
Ebenen umsortieren
Mit Nach vorn und Nach hinten verschieben Sie eine Form im Ebenenstapel. So liest sich die Zeichnung, wie Sie es wollen.
- 6
Ergebnis kopieren oder laden
Kopieren Sie den sauberen Code in die Zwischenablage oder speichern Sie ihn als SVG-Datei. Nichts geht an einen Server, deshalb bleibt der Code privat.
Warum SVG im Browser bearbeiten
Drei Gründe, warum ein Browser-Editor hier ein schweres Designprogramm schlägt.
Form und Code zugleich sehen
SVG ist Vektorgrafik als reiner Text, also leicht von Hand zu bearbeiten, aber schwer vorzustellen. Da Zahlen die Formen beschreiben, verschiebt eine kleine Wertänderung eine ganze Form. In der Praxis zeigt dieser Editor Zeichnung und Zahlen zusammen. So ändern Sie einen Wert und sehen das Ergebnis sofort.
Ihr Code bleibt privat
Dieser SVG Editor spart sich den üblichen Upload. Viele Vektorwerkzeuge schicken Ihre Datei an einen Server und geben einen Link zurück. Hier entsteht die Zeichnung dagegen auf Ihrem Gerät. Daher bleibt ein privates Icon oder ein unveröffentlichtes Logo privat, und Sie bearbeiten einen Kundenentwurf ohne Risiko.
Das Ergebnis ist sauberes, scharfes SVG
Das Ergebnis zählt so viel wie die Bearbeitung. Da es reiner SVG-Text ist, passt es ohne Plugin in eine Webseite oder ein Designprogramm. So erhalten Sie eine Datei, die in jeder Größe scharf bleibt, schnell lädt und sich für Entwickler sauber liest.
So arbeitet der Editor
Drei Dinge entscheiden das Ergebnis. Jedes sollten Sie vor dem Speichern kennen.
- Jeder Klick trifft eine Form Der Editor liest Ihren SVG-Code, zeichnet ihn und ordnet jeden Klick der Form unter dem Zeiger zu. Da die Grafik aus Formen mit Koordinaten besteht, ändert das Verschieben eines Teils nur dessen Zahlen. Der Rest bleibt unberührt. Zudem listet das Panel die Attribute der ausgewählten Form, also tippen Sie einen exakten Wert, wenn Ziehen nicht genau genug ist.
- Die Ebenenfolge entscheidet, was sichtbar ist Die Ebenenfolge entscheidet, was oben liegt. SVG malt Formen in ihrer Reihenfolge, deshalb verdeckt eine spätere Form die früheren. Daher ändert das Verschieben eines Teils, was man zuerst sieht. Eine kleine Umsortierung behebt eine verdeckte Kante oder Beschriftung.
- Der Export bleibt sauber und portabel Der Export hält den Code sauber. Der Editor schreibt beim Arbeiten ordentlichen Code, deshalb ist die Kopie lesbares SVG statt einer langen Zeile. Zudem enthält die Datei nur Ihre Formen, also öffnet sie sich in jedem Browser ohne weiteres.
Häufige Fehler beim SVG-Bearbeiten
Jeder davon lässt die Zeichnung richtig aussehen, aber falsch funktionieren, und das fällt spät auf.
Die viewBox verlieren
Ohne viewBox wird die Grafik auf einer Seite abgeschnitten oder seltsam skaliert. Behalten Sie also die viewBox und ändern Sie Breite und Höhe nur für eine feste Größe.
Nur eine Achse skalieren
Eine einseitig gestreckte Form wirkt kaputt. Da sich ein Vektor frei strecken lässt, halten Sie beim Skalieren Umschalt, damit die Form ihre Proportionen behält.
Füllung an einer Umrisslinie lassen
Eine Form, die nur Umriss sein soll, flutet mit Füllung eine ganze Fläche. Wählen Sie daher Keine Füllung, wenn eine Form ein Umriss sein soll.
Eine Kopie bearbeiten und das Original verlieren
Der Editor arbeitet mit dem eingefügten Code, deshalb bleibt die Originaldatei sicher. Behalten Sie trotzdem eine Sicherung, um beide Versionen zu vergleichen.
Die Rahmenbreite vergessen
Ein haarfeiner Rahmen verschwindet auf einem hochauflösenden Bildschirm. Da Vektorgrafik hochskaliert, prüfen Sie die Rahmenbreite in großer Ansicht, bevor Sie die Datei ausliefern.
Die Barrierefreiheit vergessen
Ein dekoratives Bild braucht keinen Titel, ein bedeutungsvolles schon. Fügen Sie also ein kurzes title-Element in den Code ein, dann kann ein Screenreader die Grafik benennen.
Häufige Fragen zum SVG Editor
Lädt der SVG Editor meine Datei hoch?
Nein. Die ganze Zeichnung bleibt in Ihrem Browser. Daher erreicht Ihr Code nie einen Server, denn der Editor braucht keinen, um die Zeichnung zu bearbeiten.
Was ist SVG?
SVG steht für Scalable Vector Graphics, ein Textformat, das Formen mit Zahlen statt Pixeln beschreibt. Da es Vektorgrafik ist, bleibt sie in jeder Größe scharf. Zudem liest sie sich als Code, deshalb ist sie leicht zu bearbeiten und klein.
Muss ich eine SVG-Datei hochladen?
Nein. Der Editor nimmt eingefügten Code, also öffnen Sie Ihre Datei, kopieren den SVG-Text und fügen ihn ein. Danach bearbeiten Sie auf der Fläche, und die Datei auf Ihrer Festplatte bleibt unverändert.
Welche Formen kann ich hinzufügen?
Der Editor fügt Rechteck, Kreis, Ellipse, Linie und Text hinzu. Diese decken die meisten Icons und Diagramme ab, deshalb bauen Sie eine einfache Grafik ohne großes Designprogramm.
Kann ich den Pfad einer komplexen Form bearbeiten?
Ja. Das Panel zeigt die rohen Attribute, also bearbeiten Sie einen Pfad von Hand. In der Praxis nutzen Sie die Fläche für schnelle Bewegungen und das Attributfeld, wenn ein Wert exakt sein muss.
Kann ich Füllung und Rahmen ändern?
Ja. Der Editor schreibt Farbwerte in den Code, also setzen Sie Füllung, Rahmenfarbe und Rahmenbreite pro Form. Zudem können Sie Keine Füllung wählen, praktisch für ein Umriss-Icon.
Hält der Editor meinen Code sauber?
Ja. Er schreibt beim Bearbeiten ordentliche Attribute, deshalb bleibt der kopierte Code lesbar statt einer langen Zeile. Jedoch lädt er keine externen Dateien oder Skripte, also enthält der Export nur, was Sie gezeichnet haben.
Ist der SVG Editor kostenlos?
Ja, vollständig. Es gibt kein Konto, keine Testphase und kein Wasserzeichen. Zudem läuft alles in Ihrem Browser, also entstehen keine Serverkosten. Daher bleibt jede Funktion kostenlos.
Funktioniert er offline?
Ja. Sobald die Seite geladen ist, passiert jede Änderung lokal. Deshalb können Sie die Verbindung trennen, und der Editor läuft weiter, denn er kontaktiert nie einen Server.
Kann ich das Ergebnis als Datei laden?
Ja. Das Ergebnis ist reiner SVG-Text, also kopieren Sie es in die Zwischenablage oder speichern es als Datei. Eine gespeicherte Datei öffnet sich in jedem Browser und passt direkt in ein Webprojekt.
Kann ich das SVG in PNG umwandeln?
Nicht auf dieser Seite. Dieses Werkzeug bearbeitet Vektorcode, Pixelbilder macht ein Konverter. Nutzen Sie stattdessen die Seite SVG zu PNG, wenn Sie ein Bild in fester Größe brauchen.
Kann ich ein Logo bearbeiten?
Ja, wenn Sie den SVG-Code haben. Ein Logo besteht aus Formen, also verschieben und färben Sie die Teile um und ändern ihre Zahlen. Jedoch kann dieser Editor ein Logo nicht ändern, das als flaches Bild kommt, denn es enthält keine Formdaten.
Kann ich die Größe der Zeichenfläche festlegen?
Ja. Die Felder unter der Fläche enthalten Breite, Höhe und viewBox, also ändern Sie sie dort. In der Praxis behalten Sie die viewBox und ändern die Größe nur, wenn Sie eine feste brauchen.
Speichert der Editor meine Zeichnung?
Nein. Kein Server und kein lokaler Speicher behält etwas, also überlebt keine Kopie die Sitzung. Schließen Sie den Tab, ist die Zeichnung weg. Kopieren oder laden Sie das Ergebnis daher, bevor Sie gehen.
Kann ich den Editor auf dem Handy nutzen?
Ja. Die Seite passt sich kleinen Bildschirmen an, also bearbeiten Sie auf Handy oder Tablet. Feines Ziehen geht jedoch am Computer leichter, deshalb passt das Handy für eine schnelle Farb- oder Größenänderung.
Kann ich eine Änderung rückgängig machen?
Ja. Der Editor merkt sich einen kurzen Verlauf, also geht Rückgängig zurück, wenn eine Bewegung misslingt. Der Verlauf umfasst nur die letzten Schritte dieser Sitzung.
Ist das SVG sicher für eine Seite?
Das hängt von der Datei ab. Manche SVG-Dateien enthalten Skripte, Ereignisse oder externe Links, deshalb entfernt der Editor diese Teile und behält die Zeichnung. Danach sagt er Ihnen, wie viele Teile er entfernt hat.
Kann ich die Formen umsortieren?
Ja. SVG malt Formen in ihrer Reihenfolge, also ändert das Verschieben in der Ebenenliste, was was verdeckt. Legen Sie den Hintergrund zuerst und die Beschriftungen zuletzt an, damit alles sichtbar bleibt.
Fügt der Editor ein Wasserzeichen hinzu?
Nein. Der Export ist eine saubere Kopie Ihrer Zeichnung als SVG-Code. Der Editor fügt nichts und kein Branding hinzu, denn er schreibt nur die Formen, Farben und Texte, die Sie setzen.
Kann ich Formen gruppieren?
Eine Gruppe aus Ihrer Datei bleibt eine Gruppe. Sie erscheint als eine Ebene, also wählen, verschieben und färben Sie sie als ein Stück. Dieser Editor baut jedoch keine neuen Gruppen, deshalb setzen Sie Formen im Code in ein g-Tag, wenn Sie eine brauchen.
Verfolgt mich der Editor oder liest er meinen Code?
Nein. Ihr Code wird nirgendwohin gesendet, und kein Analyse-Skript liest ihn. Daher entsteht die Zeichnung auf Ihrem Gerät, denn nichts von Ihrer Datei verlässt die Seite.
Kann ich das Ergebnis auf einer Website nutzen?
Ja. Das Ergebnis ist reines SVG, also passt es als Bild oder als Inline-Code in eine Seite. Inline-SVG lässt sich mit CSS gestalten und animieren, ein Bild-Tag hält den Seitencode dagegen kürzer.
Mehr Werkzeuge für Bilder und Vektoren
Ein paar Seiten, zu denen diese Aufgabe oft führt.
Exportieren Sie den fertigen Vektor als Bild in fester Größe.
Tool öffnen →Wandeln Sie zwischen PNG, JPG, WebP und mehr um.
Tool öffnen →Betten Sie ein kleines Bild direkt in Ihren Code ein.
Tool öffnen →Bauen Sie eine Palette für Füllungen und Rahmen.
Tool öffnen →Machen Sie aus einem Bild Text-Kunst aus Zeichen.
Tool öffnen →
Bearbeiten Sie jetzt Ihr erstes SVG
Öffnen Sie den SVG Editor, fügen Sie Ihren Code ein oder legen Sie eine Form an, und verschieben und gestalten Sie sie auf der Fläche. Passt alles, kopieren Sie den sauberen Code oder laden die Datei. Nichts verlässt Ihr Gerät.