SVG-Pfad erstellen
Baue einen SVG-Pfad, indem du Punkte und Kurven setzt, und lies das d-Attribut, das dabei entsteht. So lernst du am direktesten, was die einzelnen Befehle bedeuten.
Browser-Tool
Zeichenfläche
Klicke, um mit dem gewählten Werkzeug einen Punkt hinzuzufügen. Ziehe Punkte und Anfasser, oder wähle einen aus und nutze die Pfeiltasten (Umschalt für 10 Einheiten).
6 Befehle · Begrenzung 40, 40 bis 160, 171.4
Befehle
Jede Zahl lässt sich per Tastatur bearbeiten. Die Zeilen sind in Pfadreihenfolge nummeriert.
- 1. MZiel
- 2. Cc1c2Ziel
- 3. Cc1c2Ziel
- 4. QcZiel
- 5. QcZiel
- 6. Z
Exportieren
viewBox 0 0 200 200
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<path d="M 40 120 C 40 60 100 40 100 40 C 100 40 160 60 160 120 Q 160 160 100 170 Q 40 180 40 120 Z" fill="#b5a0ff" stroke="#6544c9" stroke-width="2"/>
</svg>
Über SVG-Pfad-Generator
Das d-Attribut eines SVG-Pfads ist eine dichte kleine Sprache aus Befehlen mit einzelnen Buchstaben, und am direktesten lernst du sie, indem du etwas zeichnest und liest, was aus den Buchstaben geworden ist. Kostenlos und online, ohne Wasserzeichen auf dem Ergebnis und ohne Anmeldung. Der Pfad entsteht direkt in der Seite.
So nutzt du SVG-Pfad-Generator
- Punkte setzenJeder wird beim Zeichnen zu einem Befehl in den Pfaddaten.
- Kurven hinzufügen, wo du sie brauchstQuadratische und kubische Kurven haben Kontrollpunkte, und wenn du einen ziehst, siehst du genau, was er steuert.
- Das d-Attribut lesenEs aktualisiert sich beim Zeichnen, und genau das bringt dir die Notation bei.
- Den Pfad kopierenBereit für ein SVG-Element oder eine Komponente.
Großbuchstaben sind absolut, Kleinbuchstaben relativ
M bewegt zu einer Koordinate; m bewegt um einen Versatz von dort, wo der Stift gerade ist. Dieselbe Unterscheidung gilt für jeden Befehl, also L und l, C und c und so weiter. Ein Pfad aus relativen Befehlen lässt sich verschieben, indem du nur seinen ersten Befehl änderst. Deshalb nutzen erzeugte Pfade sie oft, und deshalb führt das Mischen beider von Hand zu so verwirrenden Ergebnissen.
Was das Tool nicht kann
- Komplexe Grafiken gehören in ein Zeichenprogramm. Diese Seite ist für einfache Formen und zum Verstehen der Syntax gedacht, nicht für Illustrationen.
- Ein Pfad hat für sich genommen weder Kontur noch Füllung: Das sind eigene Attribute des Elements, das ihn darstellt.
SVG-Pfad-Generator: häufige Fragen
- Was ist der Unterschied zwischen Q- und C-Kurven?
- Eine quadratische Kurve hat einen Kontrollpunkt, eine kubische zwei. Kubisch gibt dir an beiden Enden feinere Kontrolle über die Form und ist das, was die meisten Zeichenprogramme ausgeben; quadratisch ist einfacher und reicht für einen sanften Bogen.
- Warum verschwindet mein Pfad, wenn ich die viewBox ändere?
- Weil Pfadkoordinaten im Benutzerkoordinatensystem des SVG liegen, und das legt die viewBox fest. Eine geänderte viewBox ändert, welcher Ausschnitt dieses Raums sichtbar ist, und so kann ein Pfad vollständig außerhalb des Rahmens landen und trotzdem völlig gültig sein.
- Kann der SVG-Pfad-Generator einen Pfad aus einem Bild oder Text erzeugen?
- Nein, er zeichnet keine Fotos nach und wandelt keine Buchstaben in Umrisse um. Du zeichnest mit Werkzeugen für Linien sowie quadratische und kubische Kurven, oder du importierst Pfaddaten oder eine SVG-Datei, deren erstes path-Element bearbeitbar wird. Das Ergebnis kannst du als d-Attribut kopieren oder als SVG herunterladen.
Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.
Ähnliche Tools
Die Tools, die man zusammen mit SVG-Pfad-Generator am häufigsten braucht.
Du findest das passende Tool nicht?
Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.