Tools 4 All
Startseite
Bildtools

Online-SVG-Editor

Ein schneller, professioneller Vektoreditor im Browser: mit dem Zeichenstift zeichnen, Knoten bearbeiten, Formen kombinieren, mit Verläufen gestalten, animieren und dann optimiertes SVG oder PNG exportieren. Nichts wird hochgeladen.

KostenlosOhne AnmeldungLäuft lokal – Dateien verlassen nie Ihr Gerät

Schnellstart und Tastenkürzel

Wählen Sie links ein Werkzeug (oder drücken Sie seine Taste), ziehen Sie auf der Zeichenfläche, um zu zeichnen, und gestalten Sie die Auswahl im Design-Panel rechts. Drücken Sie jederzeit ? für die vollständige Liste der Tastenkürzel.

  • Navigieren: Scrollen zum Verschieben, Ctrl/⌘ + Scrollen oder Zwei-Finger-Zoom zum Zoomen, Space halten und ziehen zum Verschieben. Shift+1 zoomt auf Seitengröße.
  • Auswählen: Klicken, Shift-Klick oder einen Auswahlrahmen ziehen. Doppelklick auf eine Gruppe, um sie zu betreten, auf einen Pfad, um seine Knoten zu bearbeiten, oder auf Text, um zu tippen.
  • Transformieren: Griffe ziehen zum Skalieren (Shift erhält die Proportionen, Alt skaliert von der Mitte), den runden Knopf ziehen zum Drehen und einen Seitengriff mit Ctrl/⌘ ziehen zum Neigen.
  • Zeichenstift: Klicken für Ecken, Ziehen für Kurven, auf den ersten Knoten klicken, um den Pfad zu schließen, und Enter drücken, um abzuschließen.
  • Dateien: SVGs oder Bilder irgendwo im Editor ablegen, SVG-Code oder Screenshots einfügen – und die automatische Speicherung sichert Ihre Arbeit.
Untitled
Guide, features and FAQ

So verwenden Sie den SVG-Editor

  1. Öffnen oder losgehen

    Legen Sie ein SVG, PNG oder JPEG auf der Zeichenfläche ab, öffnen Sie eine Datei oder beginnen Sie mit einer leeren Seite. Nichts wird hochgeladen: Der Editor läuft vollständig in Ihrem Browser.

  2. Zeichnen und bearbeiten

    Nutzen Sie Zeichenstift, Buntstift und Formwerkzeuge, verfeinern Sie Pfade Knoten für Knoten, kombinieren Sie Formen mit booleschen Operationen und gestalten Sie Füllungen, Konturen und Verläufe.

  3. Organisieren

    Gruppieren, ordnen und sperren Sie Objekte im Ebenenpanel, richten Sie sie aus und verteilen Sie sie, verwenden Sie Grafiken als Symbole wieder und bearbeiten Sie den SVG-Code direkt.

  4. Exportieren

    Laden Sie ein optimiertes SVG, PNG, JPEG oder WebP in jeder Skalierung herunter oder kopieren Sie das Ergebnis als SVG-Code, Data-URI, React-Komponente oder Tailwind-fähiges SVG, das seine Farbe aus CSS übernimmt.

Ein professioneller SVG-Editor, der vollständig in Ihrem Browser läuft

Der SVG-Editor von Tools 4 All ist eine vollständige Vektorgrafik-Anwendung, die sich sofort öffnet – ohne Download, Konto oder Upload. Zeichnen Sie damit Logos, Icons, Illustrationen, Diagramme und UI-Elemente, oder räumen Sie vorhandene SVG-Dateien auf und optimieren Sie sie. Er ist rund um das SVG-Format selbst gebaut, daher ist die exportierte Datei dasselbe Dokument, das Sie bearbeitet haben: kein proprietäres Format, keine versteckte Umwandlung.

Was Sie tun können

  • Präzise zeichnen: Zeichenstift mit Bézierkurven, Freihand-Buntstift mit Glättung, Rechtecke mit unabhängig abgerundeten, abgeschrägten oder umgekehrten Ecken, Ellipsen, Linien, Tropfenpinsel, Radiergummi, Messer und Schere sowie bearbeitbare Formen: Polygone, Sterne, Dreiecke, Kreuze, Rahmen, Ringe, Tortenstücke, Mondsicheln, Pfeile, Sprechblasen, Zahnräder, Herzen, Wolken, Blumen und Spiralen – und Text.
  • Pfade Knoten für Knoten bearbeiten: Knoten und Griffe verschieben, zwischen Eck-, Glättungs- und symmetrischen Knoten umwandeln, Knoten hinzufügen und löschen, Pfade verbinden und trennen, Segmente direkt biegen und Griffe an Tangenten einrasten.
  • Formen kombinieren: Vereinigen, Subtrahieren, Schnittmenge, Ausschließen und Teilen sowie Kontur umwandeln, Pfad versetzen, Vereinfachen und Umkehren – alles berechnet von unserer eigenen kurvenerhaltenden Geometrie-Engine in einem Hintergrund-Worker.
  • Alles gestalten: Volltonfarben, lineare und radiale Verläufe mit Griffen auf der Zeichenfläche, Muster, Deckkraft je Füllung und Kontur, Strichelungen, Linienenden, Ecken, Pfeilspitzen, Füllmethoden, Weichzeichner- und Schlagschatten-Effekte, Beschneidungspfade und Masken.
  • Den Überblick behalten: ein Ebenenpanel mit Neuordnen per Ziehen, Umbenennen und Verschachteln, Sperren und Ausblenden, Gruppieren und Gruppierung aufheben, Ausrichten und Verteilen an Auswahl, Zeichenfläche oder Basisobjekt, Dokument-Farbfelder und wiederverwendbare Symbole.
  • Arbeiten wie ein Profi: intelligente Hilfslinien mit Abstandsangaben und Hinweisen auf gleiche Abstände, Einrasten an Raster, Pixeln, Linealhilfslinien, Knoten und Pfaden, numerische Felder für X/Y/B/H/Drehung, unbegrenztes Rückgängigmachen und Tastenkürzel wie in Figma und Illustrator.
  • Code und Export: eine bidirektionale SVG-Code-Ansicht, ein optimierter SVG-Export mit Größenanzeige, PNG/JPEG/WebP in jeder Skalierung sowie Kopieren als SVG, Data-URI, React (JSX oder TSX), Tailwind-SVG oder CSS-Hintergrund.
  • Für die Webproduktion gemacht: Dokumentfarben mit Ersetzen per Klick und In currentColor umwandeln, Text in Pfade, Kontur umwandeln, Transformationen anwenden und Gruppierung aufheben, Zeichenfläche an Inhalt anpassen und unruhige Pfade vereinfachen.
  • Ein echter Arbeitsbereich: mehrere Zeichnungen in Tabs, jede mit eigenem Rückgängig-Verlauf, kurze Menüs mit Untermenüs, ein einklappbares Seitenpanel (Ctrl/⌘+B) und Vollbildbearbeitung auf Handy und Desktop.

Warum ein SVG-nativer Editor wichtig ist

Viele Designtools behandeln SVG als Exportformat: Sie zeichnen in deren eigenem Modell, und das SVG wird am Ende erzeugt. Für einfache Icons funktioniert das. Es versagt, wenn Sie eine vorhandene Datei bearbeiten, die IDs erhalten müssen, auf die Ihr CSS oder JavaScript angewiesen ist, oder verstehen wollen, warum eine Datei zehnmal größer ist als nötig. Dieser Editor arbeitet direkt am SVG-Dokument. Gruppen bleiben Gruppen, Verläufe bleiben Verläufe, und ein fünfmal verwendetes <symbol> bleibt ein Symbol. Wenn Sie eine Ebene umbenennen, setzen Sie das id des Elements.

Schnell bei großen Dateien

Geschwindigkeit war von der ersten Codezeile an ein Designziel. Die Zeichnung wird nativ von Ihrem Browser in einer isolierten Ebene gerendert. Auswahlgriffe, Hover-Umrisse und Hilfslinien werden auf einer separaten Überlagerung gezeichnet, sodass Mausbewegungen Ihr Dokument nie berühren. Ein räumlicher Index (ein R-Baum) findet in Mikrosekunden, was unter dem Zeiger liegt – selbst bei Zehntausenden Formen. Bei schweren Dokumenten übernimmt der GPU-Compositor Verschieben und Zoomen, und die Vektoren werden scharf neu gerendert, sobald Sie anhalten. Aufwendige Arbeiten wie boolesche Operationen, Pfadversatz und SVG-Optimierung laufen in einem Web Worker, sodass die Oberfläche reaktionsschnell bleibt.

Präzisionswerkzeuge für Vektorarbeit

Mit dem Zeichenstift klicken Sie Ecken und ziehen glatte Kurven. Halten Sie Shift, um 45°-Winkel beizubehalten, und Alt, um einen Griff zu brechen. Mit dem Knotenwerkzeug ziehen Sie an einem Segment, um es zu biegen, doppelklicken, um einen Knoten hinzuzufügen, oder wählen mehrere Knoten und richten sie aus. Intelligente Hilfslinien zeigen, wenn ein Objekt an den Kanten oder Mitten seiner Nachbarn ausgerichtet ist und wenn die Abstände zwischen Objekten gleich sind. Sie können auch Hilfslinien aus den Linealen ziehen. Für exakte Werte geben Sie X, Y, Breite, Höhe und Drehung im Design-Panel ein. Felder akzeptieren Rechenausdrücke wie 120+16 oder 200/3.

Saubere, kleine Exporte

Editoren hinterlassen in ihren gespeicherten Dateien oft Metadaten, ungenutzte Definitionen, überflüssige Gruppen und übergenaue Zahlen. Der Exportdialog führt im Hintergrund einen Optimierer im Stil von SVGO aus. Er rundet Zahlen auf die gewählte Genauigkeit, bringt Pfaddaten in die kürzeste Form, entfernt Editor-Metadaten und ungenutzte Definitionen, kürzt IDs und Farben und löst nutzlose Gruppen auf. Jede Optimierung lässt sich abschalten, und der Dialog zeigt die Dateigröße vorher und nachher. Für Rasterausgabe wählen Sie PNG, JPEG oder WebP in 1×, 2×, 4× oder einer exakten Pixelgröße, mit oder ohne transparenten Hintergrund.

Für die Webproduktion gebaut

SVGs für Websites und Apps brauchen anderes als Druckgrafiken. Die Liste Dokumentfarben zeigt jede Farbe der Datei: Ändern Sie eine, und alles, was sie teilt, folgt – oder wandeln Sie sie in currentColor um, damit ein React- oder Tailwind-Icon seine Farbe aus CSS übernimmt. Importierte Dateien enthalten oft verschachtelte Gruppen und Transformationen, die Pfade schwer bearbeitbar machen: Transformationen anwenden & Gruppierung aufheben schreibt sie in einem Schritt in die Koordinaten, und An Inhalt anpassen beschneidet die viewBox auf die Grafik, Konturen eingeschlossen. Text in Pfade und Kontur umwandeln machen aus Schrift und Linienstärken einfache Pfade, die überall gleich aussehen, und Vereinfachen entfernt die Hunderte Punkte aus einer nachgezeichneten oder freihändigen Form.

Ihre Dateien bleiben auf Ihrem Gerät

Hinter dem Editor steht kein Server. Beim Öffnen wird eine Datei von Ihrer Festplatte in die Seite gelesen, und beim Exportieren entsteht die Datei auf Ihrem Gerät. Die automatische Speicherung schreibt in den privaten IndexedDB-Speicher Ihres Browsers, der auch die Liste zuletzt verwendeter Dateien enthält. Wenn Sie den Tab versehentlich schließen, wird Ihr letztes Dokument beim nächsten Besuch wiederhergestellt.

Weitere Bildtools entdecken

Häufig gestellte Fragen

Ist dieser SVG-Editor wirklich kostenlos und privat?
Ja. Er ist kostenlos, braucht kein Konto und läuft zu 100 % in Ihrem Browser. Ihre Zeichnungen werden nie hochgeladen: Dateien werden lokal gelesen, die automatische Speicherung landet im eigenen Speicher Ihres Browsers (IndexedDB), und Exporte entstehen auf Ihrem Gerät.
Kann es SVG-Dateien aus Illustrator, Inkscape, Figma oder Icon-Bibliotheken öffnen?
Ja. Der Editor arbeitet direkt am SVG-Dokument, sodass reale Dateien ihre Struktur, IDs, Styles, Verläufe, Symbole, Beschneidungspfade und Masken behalten. Unordentliche oder ungültige Dateien werden beim Öffnen repariert, Skripte sind während der Bearbeitung deaktiviert, und .svgz-Dateien werden automatisch entpackt.
Hat es einen Zeichenstift und boolesche Operationen wie Illustrator?
Ja. Der Zeichenstift zeichnet Bézierpfade mit Eck-, Glättungs- und symmetrischen Knoten, und mit dem Knotenwerkzeug fügen Sie Knoten hinzu, löschen, wandeln um, verbinden, trennen und richten sie aus. Vereinigen, Subtrahieren, Schnittmenge, Ausschließen und Teilen arbeiten auf Kurven und erhalten sie als Kurven; außerdem können Sie Konturen umwandeln sowie Pfade versetzen und vereinfachen.
Kann ich ein SVG animieren?
Ja. Öffnen Sie den Arbeitsbereich Animieren, bewegen Sie den Abspielkopf und ändern Sie Position, Drehung, Skalierung, Deckkraft oder Farben eines Objekts: Jede Änderung wird zu einem Keyframe mit Beschleunigungskurve, und bereits animierte Eigenschaften erhalten automatisch einen neuen Keyframe. Animationen werden als Standard-SVG (SMIL) gespeichert und laufen daher in jedem Browser ohne Skript.
Kann ich den SVG-Code direkt bearbeiten?
Ja. Das Code-Panel zeigt den Live-SVG-Quelltext mit Syntaxhervorhebung. Wenn Sie den Code bearbeiten, aktualisiert sich die Zeichnung, und umgekehrt. Jede Änderung, von beiden Seiten, lässt sich rückgängig machen.
Welche Exportformate werden unterstützt?
Ein optimiertes SVG, erzeugt von einem integrierten Optimierer im Stil von SVGO mit Größenanzeige vorher/nachher, sowie PNG, JPEG und WebP in 1×, 2×, 4× oder eigener Größe, optional mit Transparenz. Sie können die Auswahl auch als SVG-Code, als Data-URI oder als JSX für React kopieren.
Verliere ich meine Arbeit, wenn der Browser geschlossen wird?
Nein. Ihr Dokument wird nach jeder Änderung nach einem Moment automatisch im lokalen Browserspeicher gesichert. Beim nächsten Öffnen stellt der Editor Ihre letzte Sitzung wieder her, und ältere Dokumente bleiben unter Datei → Zuletzt verwendete Dateien verfügbar.
Kann ich ein Icon für React oder Tailwind auf currentColor umstellen?
Ja. Der Bereich Dokumentfarben listet jede Farbe der Zeichnung auf (jede Schreibweise einer Farbe zählt einmal). Klicken Sie auf ein Farbfeld, um alles auszuwählen, was sie nutzt, und sie überall gleichzeitig zu ändern, oder wählen Sie In currentColor umwandeln: Das Icon übernimmt dann seine Farbe aus CSS, etwa aus einer Tailwind-Klasse text-…, und behält im Editor sein Aussehen. Kopieren Sie es über das Menü Bearbeiten oder das Kontextmenü als React-Komponente oder Tailwind-SVG.
Wie wandle ich Text in Pfade oder eine Kontur in eine gefüllte Form um?
Wählen Sie den Text und dann Text in Pfade (Ctrl/⌘+Shift+O): Jede Glyphe wird genau dort zu einem Pfad, wo der Browser sie gezeichnet hat, einschließlich Text auf Pfad und formatierter Abschnitte. Bei Konturen wandelt Kontur umwandeln die Kontur in eine gefüllte Form um, die ihrer Breite, ihren Linienenden, Ecken und Strichelungen entspricht – so behält ein Logo seine Stärke in jeder Größe.
Kann es importierte SVGs mit Transformationen und verschachtelten Gruppen aufräumen?
Ja. Transformationen anwenden & Gruppierung aufheben schreibt jede Transformation in die Pfadkoordinaten und löst die Gruppen in einem Rückgängig-Schritt auf; erhalten bleibt nur, was sonst das Aussehen ändern würde (beschnittene, maskierte oder referenzierte Gruppen). An Inhalt anpassen beschneidet die Zeichenfläche (viewBox, Breite und Höhe) auf die Grafik, Konturen eingeschlossen, optional mit Rand, und Vereinfachen verringert die Anzahl der Punkte auf unruhigen Pfaden.
Kann ich an mehreren Zeichnungen gleichzeitig arbeiten?
Ja. Jede Zeichnung öffnet sich in einem eigenen Tab über der Zeichenfläche, mit eigenem Rückgängig-Verlauf, eigener Auswahl und eigenem Zoom. Wechseln Sie frei zwischen ihnen; beim Schließen eines Tabs bleibt die Datei unter Datei → Zuletzt verwendete Dateien, und Ihre offenen Tabs kehren beim nächsten Besuch zurück.
Wo sind all die Befehle? Die Menüs sind kurz.
Verwandte Befehle stehen in Untermenüs (Anordnen, Transformieren, Pfad, Beschneiden & Maskieren, Kopieren als, Ausrichten & verteilen…). Fahren Sie darüber, tippen Sie darauf oder nutzen Sie die Pfeiltasten. Jeder Befehl hat auch ein Tastenkürzel: Drücken Sie ? für die vollständige Liste. Am Desktop können Sie das Seitenpanel mit Ctrl/⌘+B einklappen, um der Zeichenfläche mehr Platz zu geben.
Funktioniert es auf Handys und Tablets?
Ja. Auf kleinen Bildschirmen wandern die Werkzeuge in eine untere Werkzeugleiste und die Panels öffnen sich als Blätter. Mit zwei Fingern zoomen und verschieben, lange drücken für das Kontextmenü.
Wie groß dürfen meine Zeichnungen sein?
Der Editor ist für schwere Dateien gebaut. Er nutzt einen räumlichen Index für Treffertests und Auswahl, eine separate Überlagerungsebene für Griffe und Hilfslinien, reines Compositor-Verschieben und -Zoomen bei großen Dokumenten und Web Worker für Geometrie und Optimierung. Dokumente mit Zehntausenden Elementen bleiben reaktionsschnell.
Alle Bildtools →
Bildkomprimierer Dateigröße von Bildern verringern und die Bildqualität erhalten. Bildkonverter Bilder zwischen PNG, JPEG, WebP, GIF, BMP, ICO, TIFF und mehr konvertieren. Bildgrößenänderung Bilder auf exakte Abmessungen bringen – ideal für Passfotos. Bild zu PDF Ein oder mehrere Bilder zu einem einzigen PDF-Dokument zusammenfügen.