SVG Pfade visuell erstellen:
Bezier Editor online
SVG Paths per Klick und Drag & Drop erstellen. Kubische und quadratische Bezier-Kurven live bearbeiten. Code sofort kopieren.
Klicken Sie auf die Zeichenfläche, um den ersten Punkt zu setzen (M-Befehl).
SVG Path Code
So funktioniert der SVG Path Editor
Pfad erstellen
Wählen Sie ein Werkzeug (Linie, Kubisch, Quadratisch) und klicken Sie auf die Zeichenfläche, um Punkte zu setzen.
Kontrollpunkte bearbeiten
Ziehen Sie Anker- und Kontrollpunkte per Drag & Drop, um die Kurvenform in Echtzeit anzupassen.
Code exportieren
Kopieren Sie den generierten SVG Path Code (d-Attribut) und fügen Sie ihn direkt in Ihr Projekt ein.
SVG Pfade verstehen und erstellen
SVG (Scalable Vector Graphics) ist das Standard-Format für skalierbare Vektorgrafiken im Web. Das zentrale Element vieler SVG-Grafiken ist der Path – ein universelles Zeichenelement, das über das d-Attribut beliebige Formen beschreiben kann. Von einfachen Linien über komplexe Kurven bis hin zu detaillierten Icons: Alles lässt sich mit SVG Paths abbilden.
Unser SVG Path Editor ermöglicht es Ihnen, Pfade visuell zu erstellen und zu bearbeiten, ohne die Koordinaten manuell berechnen zu müssen. Durch die intuitive Drag & Drop-Bedienung sehen Sie in Echtzeit, wie sich Änderungen an Kontrollpunkten auf die Bezier-Kurven auswirken.
Anwendungsbereiche für SVG Paths
- ✓ Icon-Design: Erstellen Sie pixelperfekte Icons, die auf jeder Bildschirmgröße scharf dargestellt werden
- ✓ Web-Animationen: SVG Paths können mit CSS und JavaScript animiert werden – ideal für Morph-Effekte und Zeichenanimationen
- ✓ Clip-Paths & Masken: Definieren Sie benutzerdefinierte Formen für CSS clip-path oder SVG-Masken
- ✓ Datenvisualisierung: Zeichnen Sie benutzerdefinierte Graphen, Charts und Diagramme mit präziser Kontrolle über jede Kurve
Der Editor funktioniert vollständig im Browser, erfordert keine Anmeldung und ist DSGVO-konform – alle Daten bleiben lokal auf Ihrem Gerät. Ob Sie als Designer schnell eine Form prototypen oder als Entwickler einen Path-Code generieren möchten: Dieser Editor macht die Arbeit mit SVG Paths einfach und effizient.
Häufig gestellte Fragen
Was ist ein SVG Path und wozu brauche ich ihn?
Ein SVG Path ist ein Grundelement in SVG-Grafiken, das über das d-Attribut komplexe Formen beschreibt. Pfade können Linien, Kurven, Bögen und beliebige Konturen darstellen. Sie werden in Webdesign, Icon-Design, Animationen und Datenvisualisierungen eingesetzt. Mit einem visuellen Editor können Sie SVG Paths intuitiv erstellen, statt die Koordinaten manuell zu berechnen.
Was bedeuten die Buchstaben M, L, C und Q im SVG Path?
M (moveTo) setzt den Startpunkt des Pfads, ohne eine Linie zu zeichnen. L (lineTo) zeichnet eine gerade Linie zum angegebenen Punkt. C (curveTo) erstellt eine kubische Bezier-Kurve mit zwei Kontrollpunkten, die die Krümmung bestimmen. Q (quadratic curveTo) erzeugt eine quadratische Bezier-Kurve mit einem Kontrollpunkt. Diese vier Befehle bilden die Basis für nahezu jede SVG-Form.
Was sind Bezier-Kurven und wie funktionieren sie?
Bezier-Kurven sind mathematisch definierte Kurven, die über Kontrollpunkte gesteuert werden. Bei einer quadratischen Bezier-Kurve (Q) bestimmt ein einzelner Kontrollpunkt die Krümmung zwischen Start- und Endpunkt. Bei einer kubischen Bezier-Kurve (C) gibt es zwei Kontrollpunkte, die unabhängig voneinander die Kurvenform beeinflussen. Durch Verschieben der Kontrollpunkte per Drag & Drop können Sie die Krümmung in Echtzeit anpassen.
Wie verwende ich den SVG Path Editor?
Wählen Sie zunächst ein Werkzeug: Linie (L), Kubische Bezier (C) oder Quadratische Bezier (Q). Klicken Sie dann auf die Zeichenfläche – der erste Klick setzt automatisch den Startpunkt (M). Jeder weitere Klick fügt einen neuen Pfad-Befehl hinzu. Ziehen Sie die Ankerpunkte (orange Kreise) und Kontrollpunkte (gelbe Kreise), um die Form anzupassen. Der SVG Path Code wird live aktualisiert und kann mit einem Klick kopiert werden.
Kann ich bestehende SVG Paths importieren und bearbeiten?
Ja, über die Import-Funktion können Sie einen bestehenden SVG Path-Code (das d-Attribut) einfügen. Der Editor parst die Befehle M, L, C und Q und visualisiert den Pfad mit allen Kontrollpunkten auf der Zeichenfläche. So können Sie vorhandene Pfade visuell optimieren, ohne den Code manuell ändern zu müssen.
Ist der SVG Path Editor kostenlos?
Ja, der SVG Path Editor ist vollständig kostenlos und ohne Anmeldung nutzbar. Alle Funktionen – Pfade erstellen, Bezier-Kurven bearbeiten, Import und Export – stehen unbegrenzt zur Verfügung. Die gesamte Verarbeitung findet lokal in Ihrem Browser statt. Ihre Daten werden nicht an Server übermittelt.
Wie kann ich den erzeugten SVG Path in mein Projekt einbinden?
Kopieren Sie den generierten Path-Code über den Kopieren-Button. Fügen Sie ihn dann als d-Attribut in ein <path>-Element innerhalb Ihres SVG ein, z.B.: <svg viewBox='0 0 500 400'><path d='IHR_CODE' fill='none' stroke='black'/></svg>. Der Code ist kompatibel mit allen gängigen Browsern, Design-Tools (Figma, Illustrator) und Frontend-Frameworks.
Welche Vorteile haben SVG Pfade gegenüber Rasterbildern?
SVG Pfade sind vektorbasiert und daher verlustfrei skalierbar – sie sehen auf jedem Bildschirm scharf aus, egal ob Smartphone oder 4K-Monitor. Sie haben extrem kleine Dateigrößen im Vergleich zu PNGs oder JPEGs. Außerdem können SVG Pfade per CSS und JavaScript animiert werden, was sie ideal für interaktive Webdesigns, Icons und Illustrationen macht.