Entwickler-Werkzeug / 28

Online-SVG-Vektoreditor und Zeichenprogramm

SVG-Vektorgrafiken visuell oder per Live-SVG-XML-Code zeichnen, gestalten, in Ebenen anordnen und bearbeiten.

Online-SVG-Vektoreditor und Zeichenprogramm: Zeichne Rechtecke, Kreise, Ellipsen, Linien, Pfade und Text auf einer SVG-Zeichenfläche. Verschiebe Objekte, ändere Füllung, Kontur und Deckkraft und ordne ihre Ebenen an. Du kannst außerdem eine SVG-Datei importieren oder ihren Code im Code-Tab bearbeiten und anschließend eine SVG- oder PNG-Datei herunterladen oder den SVG-Text kopieren. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie: Entwicklerwerkzeuge
Ausführungen: In deinem Browser
Kosten: Kostenlos · ohne Anmeldung
Verfügbarkeit: Einsatzbereit

Form hinzufügen:

Transparenzraster

Hintergrund:

Elementinspektor & Stile

Typ & ID

rect (rect_1)

Ausrichtung der Zeichenfläche

Füllfarbe

Konturfarbe & Strichstärke

Deckkraft (100%)

Breite

Höhe

Ebenenaktionen

Ebenen (3)

text (text_1)

circle (circle_1)

rect (rect_1)

Formen, Pfade und Text zeichnen

Füge Rechtecke, Kreise, Ellipsen, Linien, Sterne, Dreiecke, Herzen, Pfade oder Text hinzu. Wähle ein Objekt aus, um Füllung, Linienfarbe, Linienstärke und Deckkraft zu ändern, oder verwende die Ebenensteuerung, um es zu duplizieren, zu löschen und neu anzuordnen. In den Leinwandeinstellungen legst du Zeichnungsgröße und Hintergrund fest.

Verschiebe einen Pfad auf der Leinwand und bearbeite seine Form im Tab Code. Pfadbefehle wie M, L und C beschreiben Bewegungen, Linien und Kurven. Dies ist kein visueller Knoten-Editor: Es gibt keine verschiebbaren Kurvengriffe. Bearbeitete XML wird angewendet, sobald du das Codefeld verlässt.

Beschränkungen beim Export und Import

SVG behält Vektorformen und bearbeitbaren Text bei; PNG rastert die Zeichnung in der Größe der Leinwand. Beim Kopieren des Markups erhältst du SVG-Text zur Verwendung auf einer Seite oder in einem anderen Editor. Text wird nicht in Pfade umgewandelt, daher hängt sein Erscheinungsbild von der am Öffnungsort verfügbaren Schriftart ab.

Importierte Dateien werden auf unterstützte Grundformen, Pfade und Text reduziert. Farbverläufe, Filter, Beschneidung, eingebettete Bilder und das Verhalten von Gruppen werden nicht vollständig übernommen. Bewahre das Original auf und vergleiche die importierte Zeichnung, bevor du einen Ersatz exportierst.

So benutzt du es

Füge ein Rechteck, einen Kreis, eine Ellipse, eine Linie, einen Stern, einen Pfad oder Text hinzu und ziehe das Element an die gewünschte Stelle.
Lege Füllung, Kontur, Deckkraft, Eckenradius und Ebenenreihenfolge fest.
Lade die SVG- oder PNG-Datei herunter oder kopiere den Code.

Datenschutz & Einschränkungen

Die Zeichnung verlässt deinen Browser nie – es gibt keinen Upload, keine automatische Speicherung und keinen Server. Beim Schließen des Tabs wird sie verworfen. Lade die Datei daher herunter, bevor du die Seite verlässt.

Häufige Fragen

Kann ich Pfade zeichnen und bearbeiten?

Du kannst einen Pfad hinzufügen, ihn auf der Zeichenfläche verschieben sowie seine Füllung und Kontur ändern. Bearbeite die Pfadbefehle im Code-Tab, um seine Form zu ändern. Einen visuellen Editor für Kontrollpunkte gibt es nicht. Änderungen am Code werden übernommen, sobald du das Textfeld verlässt.

Kann ich Text und einfache Formen hinzufügen?

Ja. Füge über die Symbolleiste Rechtecke, Kreise, Ellipsen, Linien, Sterne, Dreiecke, Herzen, Pfade oder Text hinzu. Für Text gibt es Einstellungen für Inhalt und Schriftgröße. Du kannst Objekte ausrichten, duplizieren, löschen und neu anordnen sowie Füllung, Konturfarbe, Konturstärke und Deckkraft ändern.

Welche Dateien kann ich exportieren?

Lade eine SVG-Datei herunter, um Vektorformen und bearbeitbaren Text beizubehalten, oder eine PNG-Datei als Rasterbild in den Abmessungen der Zeichenfläche. Du kannst außerdem den SVG-Code kopieren. Text wird nicht in Pfade umgewandelt.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig