SVG-Editor online kostenlos — Formen & Text zeichnen, SVG herunterladen

Zeichne Formen, Pfeile, Freihandlinien und Text auf einer Leinwand und lade ein sauberes SVG oder PNG herunter. Kostenlos, im Browser, ohne Anmeldung.

Klicke auf eine Form, um sie auszuwählen, ziehe zum Verschieben und ziehe an einem Anfasser, um die Größe zu ändern. Pfeiltasten verschieben in kleinen Schritten (mit Shift um 10 px).

Tastenkürzel

V Auswählen / verschieben
R Rechteck
E Ellipse
G Dreieck
S Stern
L Linie
A Pfeil
P Freihandstift
T Text
Ctrl/⌘ Z rückgängig, mit Shift wiederholen
Ctrl/⌘ D duplizieren
Del Auswahl löschen
Pfeiltasten um 1 px verschieben, mit Shift um 10 px
Shift beim Zeichnen: Quadrat, Kreis, 45°-Linie
Esc Auswahl aufheben oder Ziehen abbrechen

Alles passiert in deinem Browser: Nichts wird hochgeladen, und deine Zeichnung wird lokal automatisch gespeichert, sodass ein Neuladen sie nicht löscht. Du brauchst statt einer schnellen Skizze ein Logo, ein illustriertes Diagramm oder ein komplettes Markensystem? Hier geht's weiter: Weitere kostenlose Tools entdecken.

Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.

Mit diesem kostenlosen SVG-Editor zeichnest du eine Vektorgrafik im Browser und lädst sie als sauberes SVG oder PNG herunter – ohne Konto und ohne Upload. Wähle ein Formwerkzeug, zieh auf der Leinwand, stelle Füllung und Kontur ein, füge einen Pfeil und eine Beschriftung hinzu, und die Datei ist fertig. Er ist für den 30-Sekunden-Job gebaut: ein Diagramm für eine Folie, ein einfaches Icon, ein Platzhalter-Logo, ein beschrifteter Kasten für eine Dokumentation.

Er ist bewusst kein Illustrator-Klon. Es gibt kein Ebenenbedienfeld, keine booleschen Operationen und keine Bearbeitung von Bézier-Knoten, denn genau das macht vollwertige Vektorprogramme zu einer Sache, die man einen Nachmittag lang lernen muss. Stattdessen bekommst du jedes Werkzeug, das eine schnelle Zeichnung braucht, Tastenkürzel für alle, ein Rückgängig, das so funktioniert, wie du es erwartest, und einen Export, der nur deine Formen enthält: keine Editor-Metadaten, keine eingebetteten Schriften, keine Überraschungen, wenn du die Datei anderswo öffnest.

So funktioniert’s

Wähle eine Leinwandgröße aus den Vorlagen (Icon, quadratischer Post, Full HD) oder gib eine eigene ein und wähle einen transparenten oder farbigen Hintergrund.
Wähle ein Werkzeug: Rechteck (R), Ellipse (E), Dreieck, Stern, Linie (L), Pfeil (A), Freihandstift (P) oder Text (T). Zieh auf der Leinwand, um zu zeichnen; halte Shift für ein perfektes Quadrat, einen Kreis oder eine 45°-Linie.
Klicke mit dem Auswahlwerkzeug (V) auf eine Form, um sie zu verschieben, zieh an einem Anfasser, um die Größe zu ändern, und bearbeite Füllung, Kontur, Deckkraft oder Eckenradius im Bedienfeld. Pfeiltasten verschieben um 1 px, mit Shift um 10 px.
Dupliziere mit Ctrl/⌘ D, lösche mit Entf, ändere die Reihenfolge mit den Buttons „Nach vorne“ / „Nach hinten“ und mache alles mit Ctrl/⌘ Z rückgängig.
„SVG herunterladen“ für eine skalierbare Datei, „PNG herunterladen“ (1× bis 3×) für eine Bitmap oder „Code kopieren“, um das SVG direkt in HTML einzufügen. Deine Zeichnung wird automatisch in diesem Browser gespeichert, falls du später weitermachen willst.

Häufige Fragen

Ist dieser SVG-Editor wirklich kostenlos und ohne Anmeldung?

Ja. Es gibt kein Konto, kein Wasserzeichen, kein Exportlimit und kein Upselling. Der Editor läuft komplett in deinem Browser; du kannst nach dem Laden der Seite die Internetverbindung trennen, und er funktioniert weiter. Wir bauen diese Tools, weil sie Menschen auf die Website bringen, und manche davon brauchen später die Design-, Web- oder Softwarearbeit, die wir für Kunden machen.

Was kann ich damit zeichnen?

Rechtecke (mit abgerundeten Ecken), Ellipsen und Kreise, Dreiecke, fünfzackige Sterne, gerade Linien, Pfeile, Freihandstriche und Text in drei Schriftfamilien. Jede Form hat eigene Füllung, Kontur, Konturstärke und Deckkraft, lässt sich verschieben, skalieren, duplizieren und in der Reihenfolge ändern und rastet auf Wunsch an einem 10-px-Raster ein. Das deckt Diagramme, einfache Icons, Anmerkungen und Platzhalter-Logos ab. Nicht abgedeckt sind Bézier-Knotenbearbeitung, Verläufe, Ebenen und boolesche Operationen; dafür brauchst du Inkscape oder Figma.

Kann ich eine vorhandene SVG-Datei öffnen und bearbeiten?

Teilweise – und der Editor sagt dir genau, wie weit. „SVG öffnen“ importiert Rechtecke, Kreise, Ellipsen, Linien, Polylinien, Polygone, Pfade und Text und behält dabei Farben und Positionen. Alles, was er nicht originalgetreu darstellen kann, wird übersprungen statt verstümmelt, und eine Meldung nennt, was übersprungen wurde: Elemente mit einem transform-Attribut, Gruppen mit Transformationen, <use>- und <image>-Verweise, Verlaufsfüllungen und CSS-Stylesheets. Einfache Icons und Diagramme öffnen sich sauber; eine komplexe, aus Illustrator exportierte Illustration in der Regel nicht – und das sagen wir lieber, als etwas vorzutäuschen.

Soll ich SVG oder PNG herunterladen?

SVG, wenn die Grafik skaliert, später bearbeitet oder auf einer Website verwendet wird: Sie bleibt in jeder Größe scharf, ist meist deutlich kleiner als ein PNG und lässt sich mit CSS gestalten. PNG, wenn du eine feste Bitmap brauchst: zum Einfügen in ein Dokument oder eine Folie, die mit SVG schlecht umgehen, zum Hochladen auf eine Plattform, die SVG ablehnt, oder für jemanden, der einfach ein Bild will. Die Optionen 2× und 3× liefern ein scharfes PNG für hochauflösende Bildschirme. Im Zweifel lade beides herunter; es kostet nichts.

Wird meine Zeichnung irgendwo hochgeladen?

Nein. Zeichnen, Bearbeiten und Exportieren passieren alle in deinem Browser mit den Standard-APIs für SVG und Canvas. Nichts wird an unseren Server gesendet. Die Zeichnung wird automatisch im lokalen Speicher deines Browsers gesichert, damit ein Neuladen oder ein versehentlich geschlossener Tab sie nicht verliert; diese Kopie bleibt auf deinem Gerät und wird gelöscht, wenn du auf „Neu“ klickst.

Darf ich die SVG-Dateien kommerziell nutzen?

Ja. Was du zeichnest, gehört dir, ohne Lizenz und ohne Namensnennung, für private oder kommerzielle Nutzung. Die exportierte Datei enthält nur deine Formen und Standard-SVG-Markup, es steckt also nichts von uns darin, was lizenziert werden müsste.

Warum sieht der Export etwas anders aus als die Leinwand?

Der Editor zeichnet mit demselben SVG, das dein Browser darstellt, die Formen stimmen also exakt überein. Zwei Dinge können abweichen: das Raster, das es nur im Editor gibt und nie exportiert wird, und Text, der generische Schriftfamilien verwendet (Arial, Georgia, Courier New), damit die Datei auf jedem Rechner gleich dargestellt wird, ohne Schriften einzubetten. Fehlt einem Viewer eine dieser Schriften, ersetzt er sie durch eine ähnliche, was die Textbreite um ein paar Pixel verschieben kann.

SVG oder PNG: was der Unterschied wirklich bedeutet

Ein SVG ist eine Textdatei, die Formen beschreibt: ein Rechteck an diesen Koordinaten, so breit, in dieser Farbe. Ein PNG ist ein Raster aus Pixeln. Dieser eine Unterschied erklärt jede praktische Folge. SVG skaliert ohne Unschärfe auf jede Größe, hat bei einem einfachen Diagramm oft nur ein paar Hundert Byte, lässt sich nachträglich bearbeiten und auf einer Webseite per CSS umfärben. PNG ist auf die exportierte Größe festgelegt, wird mit dem Bild größer und lässt sich nur noch als Pixel bearbeiten.

SVG ist die richtige Standardwahl für Logos, Icons, Diagramme und alles auf einer Website. PNG ist richtig, wenn das Ziel mit SVG nicht umgehen kann (viele E-Mail-Programme, manche Dokument-Tools, die meisten sozialen Plattformen) oder wenn der Empfänger einfach ein Bild will, das er überall ablegen kann. Der Editor exportiert beides aus derselben Zeichnung, die Wahl kostet also nichts.

Wofür dieser Editor gut ist und wofür nicht

• Schnelle Diagramme: Kästen, Pfeile und Beschriftungen für eine Folie, ein README oder ein Support-Ticket. Raster und Einrasten halten alles ohne Gefummel ausgerichtet.

• Einfache Icons und Favicons: in 256 × 256 oder 512 × 512 mit transparentem Hintergrund zeichnen, das SVG herunterladen und dann durch den Favicon-Generator schicken, um jede Größe zu bekommen, die eine Website braucht.

• Platzhalter-Logos und Zeichen: eine Form, ein Buchstabe, eine Farbe. Genug, um einen Prototyp oder ein Pitch-Deck über das Stadium der leeren Fläche hinauszubringen.

• Anmerkungen: ein einfaches SVG-Diagramm öffnen, einen Kreis und einen Pfeil um den besprochenen Teil ergänzen, exportieren.

Er ist nicht das Werkzeug für Illustrationen, typografielastiges Design oder alles mit Kurven, die du Punkt für Punkt formen musst. Freihandstriche werden automatisch geglättet, lassen sich danach aber nicht bearbeiten. Für diese Art von Arbeit ist Inkscape kostenlos und hervorragend, und die kostenlose Stufe von Figma reicht für UI-Grafiken. Zu wissen, wann man umsteigen sollte, gehört dazu, ein kleines Werkzeug gut zu nutzen.

Tipps für saubere SVG-Dateien

Zeichne in der Größe, die du meinst. Ein Icon, das auf einer Leinwand von 1920 × 1080 gezeichnet wurde, wird mit dieser viewBox exportiert, und jeder Nutzer muss es skalieren. Stelle die Leinwand zuerst auf die beabsichtigten Maße ein; die Vorlagen decken die gängigen ab.

Ziehe bei Strichzeichnungen Konturen den Füllungen vor und halte die Konturstärken einheitlich; gemischte Stärken lassen ein Diagramm am schnellsten amateurhaft wirken. Zwei oder drei Farben reichen fast immer, und die Farbfelder im Bedienfeld sind so gewählt, dass sie gut zusammenpassen.

Lass Text Text sein. Dieser Editor exportiert echte <text>-Elemente, statt sie in Pfade umzuwandeln – das hält die Datei winzig und durchsuchbar und lässt dich den Wortlaut später ändern. Besteht ein nachgelagertes Tool auf Konturen, mach die Umwandlung dort, im letzten Schritt.

Lass den Hintergrund transparent, es sei denn, du brauchst ausdrücklich eine Farbe. Ein transparentes SVG passt in jede Seite und jede Folie; ein weißes Rechteck hinter einem Logo nicht.