Was ist SVG-Editor?

Zeichnen Sie Formen, Pfade und Text auf einer visuellen Leinwand, passen Sie Linien- und Füllfarben an und exportieren Sie den SVG-Code. Ohne Desktop-Software.

Zu den Werkzeugen gehören Rechteck, Ellipse, Linie, Freihandpfad, Text sowie eine Formbibliothek (Dreieck, Sechseck, Stern, Pfeil). Text wird direkt auf der Zeichenfläche eingegeben — Textwerkzeug wählen und tippen, oder bestehenden Text doppelt anklicken, um ihn zu ändern. Jedes Element hat eigene Füllung, Konturfarbe, Konturstärke und Deckkraft, und du kannst exakte X-, Y-, Breiten- und Höhenwerte im Eigenschaftenfeld eingeben. Importiere ein vorhandenes SVG mit einem Klick, raste die Zeichnung an einem 10-Pixel-Raster ein und nutze Rückgängig oder Wiederholen über fünfzig Schritte. Exportiere das Ergebnis als reines SVG-Markup für HTML und React-JSX oder als gerastertes PNG für Orte, die SVG nicht akzeptieren.

Anleitung

1. Wählen Sie ein Zeichenwerkzeug (Rechteck, Ellipse, Linie, Pfad oder Text) und zeichnen Sie auf der Leinwand.
2. Wählen Sie Elemente aus, um sie zu verschieben, zu skalieren, zu drehen oder Füllung, Linie und Deckkraft zu ändern.
3. Exportieren Sie die fertige Grafik als SVG-Datei oder kopieren Sie den SVG-Quellcode.

Wann verwenden

• Eine einmalige Logo-Marke, Trennlinie oder Hero-Form für eine Landingpage skizzieren.
• Eine vorhandene SVG-Datei nachjustieren, ohne ein schweres Desktop-Programm zu öffnen.
• SVG-Grundlagen unterrichten und beim Zeichnen den Code live mitlaufen lassen.

Ergebnis

Ein Webentwickler braucht ein einfaches Logo-Symbol — zwei überlappende Kreise mit Verlaufsfüllung. Er zeichnet die Formen auf der Leinwand, wendet Farben an und kopiert den SVG-Code direkt in seinen HTML-Code.

Häufige Fragen

Kann ich das kopierte SVG ohne Umwege in mein React-JSX einfügen?

Ja, mit einer Einschränkung: Attribute wie stroke-width und stop-color müssen in JSX als strokeWidth und stopColor stehen. Das hier kopierte SVG ist im kebab-case korrekt für reines HTML und lässt sich mit Suchen und Ersetzen schnell umstellen.

Kann ich ein vorhandenes SVG importieren und weiter bearbeiten?

Ja — über die Schaltfläche SVG importieren lädst du jede .svg-Datei von deinem Gerät. Rechtecke, Ellipsen, Kreise, Linien, Pfade und Texte werden zu bearbeitbaren Elementen auf der Zeichenfläche. Farbverläufe, Filter und verschachtelte Gruppen werden übersprungen, weil der Editor jede Form als einzelne Grundform speichert.

Warum sieht meine SVG in Illustrator oder Figma anders aus?

Verschiedene Renderer behandeln Konturausrichtung, Verläufe und Filter etwas anders. Die Ausgabe hier entspricht dem, was alle modernen Browser zeigen, also der spezifikationsgemäßen Anzeige; Abweichungen sind meist die Auslegung des anderen Programms.

Unterstützt das Path-Werkzeug Bezier-Steuerpunkte?

Der Freihandpfad nimmt die gezeichneten Punkte auf und gibt sie als Polylinie aus. Für echte kubische Bezierkurven exportieren Sie das SVG und passen das d-Attribut von Hand an, oder öffnen das Ergebnis in einem Vektorprogramm, das die Griffe anzeigt.

Wie viele Elemente kann ich hinzufügen, bevor der Canvas träge wird?

Ein paar hundert Formen laufen auf jedem aktuellen Gerät rund. Bei Tausenden (etwa komplexe Karten oder Icon-Gitter) wird es spürbar zäh, weil jedes Ziehen den gesamten Canvas neu zeichnet. Fassen Sie die Grafik in weniger zusammengesetzte Pfade zusammen, wenn Sie dort landen.

Ähnliche Tools