Softonic

SVG-Pfad-Builder

Schritt 1 / 2

Klicken Sie auf eine leere Fläche, um Punkte hinzuzufügen. Ziehen Sie Punkte, um sie zu verschieben. Den letzten Punkt können Sie mit der Schaltfläche entfernen.

Weiter

Das d-Attribut auf einem SVG <path> ist eine kleine domänenspezifische Sprache: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Jeder Buchstabe ist ein Befehl (moveto, lineto, kubischer Bézier, Pfad schließen), jede Zahl ist eine Koordinate oder ein Kontrollpunkt. Mit diesem Builder klicken Sie Ankerpunkte auf die Leinwand und ziehen sie zum Umformen, während der Pfad in Echtzeit gezeichnet wird. Aktivieren Sie die Glättung, um gerade Segmente in kubische Bézier-Kurven umzuwandeln, schließen Sie die Form und kopieren Sie dann das erzeugte d-Attribut oder das komplette SVG.

So erstellen Sie einen Pfad

  1. 1

    Klicken, um Punkte hinzuzufügen

    Jeder Klick setzt einen Ankerpunkt auf die Leinwand; der Pfad verbindet sie der Reihe nach, beginnend mit einem `M` (moveto).

  2. 2

    Ziehen zum Umformen

    Ziehen Sie einen beliebigen Punkt, um ihn zu verschieben, und entfernen Sie den zuletzt gesetzten mit der Schaltfläche. Das Minimum sind zwei Punkte.

  3. 3

    Gerade oder glatt

    Lassen Sie die Punkte durch gerade `L`-Segmente verbunden, oder aktivieren Sie Glätten, um sie in kubische Bézier-Kurven `C` umzuwandeln.

  4. 4

    Schließen oder offen lassen

    Aktivieren Sie Pfad schließen, um ein `Z` zurück zum Start hinzuzufügen, oder lassen Sie ihn offen für eine Polylinie/Strecke.

  5. 5

    Kopieren Sie das d-Attribut

    Die erzeugte `d`-Zeichenfolge ist sauber und durch Leerzeichen getrennt, bereit zum Einfügen in jedes SVG; Sie können auch das komplette SVG kopieren oder herunterladen.

SVG-Pfad-Befehl Cheatsheet

Der visuelle Builder oben erzeugt die Befehle M, L, C und Z (moveto, gerade Linie, kubischer Bézier und Pfad schließen). Der Rest des Befehlssatzes unten dient als Referenz zum Lesen und manuellen Bearbeiten jeder d-Zeichenfolge, die Sie anderswo einfügen. Großbuchstaben verwenden absolute Koordinaten; Kleinbuchstaben verwenden relative Offsets von der aktuellen Stiftposition.

Cmd Name Syntax
M / m Moveto M x y
L / l Lineto L x y
H / h Horizontale Lineto H x
V / v Vertikale Lineto V y
C / c Kubischer Bézier C x1 y1 x2 y2 x y
S / s Glatter kubischer Bézier S x2 y2 x y
Q / q Quadratischer Bézier Q x1 y1 x y
T / t Glatter quadratischer Bézier T x y
A / a Bogen A rx ry x-axis-rot lg sweep x y
Z / z Pfad schließen Z

Ein Beispiel: ein abgerundetes Häkchen

M 4 12 L 10 18 L 20 6

Drei Befehle: gehe zu (4, 12), linie zu (10, 18), linie zu (20, 6). Fügen Sie stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" zum Pfad hinzu und Sie haben ein sauberes Häkchen-Glyph.

Der Bogenbefehl ist der schwierigste

A rx ry x-axis-rotation large-arc-flag sweep-flag x y benötigt sieben Zahlen:

  • rx, ry, Ellipsenradien
  • x-axis-rotation, Rotation der Ellipse in Grad
  • large-arc-flag, 0 für den kurzen Bogen, 1 für den langen
  • sweep-flag, 0 für gegen den Uhrzeigersinn, 1 für im Uhrzeigersinn
  • x, y, Endpunkt

Ändern Sie die Flags nacheinander, um zu sehen, wie die gleichen beiden Endpunkte auf vier verschiedene Arten verbunden werden können.

Tipps

  • Halten Sie die Zahlen klein und rund. Rasten Sie Koordinaten auf das Pixelraster oder halbe Pixel; vermeiden Sie 17 Dezimalstellen.
  • Bevorzugen Sie Großbuchstabenbefehle, wenn Ihr Pfad eigenständig ist. Kleinbuchstaben (relativ) sind praktisch, wenn Sie den Pfad später übersetzen möchten.
  • Schließen Sie nur, wenn Sie füllen. Wenn ein Pfad ausschließlich gestrichen ist, fügt Z keine visuelle Änderung hinzu und spart ein Byte.
  • Durchlaufen Sie SVGO. Nachfolgende Nullen, doppelte Leerzeichen und wiederholte Befehle werden schön zusammengefasst.

Häufig gestellte Fragen

Koordinaten in d sind in denselben Einheiten wie die viewBox. Ein Pfad, der für viewBox="0 0 24 24" entworfen wurde, der auf viewBox="0 0 100 100" platziert wird, erscheint im oberen linken Viertel. Entweder skalieren Sie die Koordinaten oder ändern Sie die Größe der viewBox.

Wenn Sie planen, den Pfad zu übersetzen oder zu wiederholen. Relative Befehle halten die Form portabel, Sie können überall ein neues M hinzufügen und alles downstream bewegt sich mit.

Ja. <polyline points="0,0 10,10 20,0"> wird zu <path d="M 0 0 L 10 10 L 20 0" />. Ein Polygon fügt ein finales Z hinzu. Die meisten Optimierer tun dies automatisch, da Pfade besser komprimiert werden.

Für Zeicheneffekte verwenden Sie CSS stroke-dasharray + stroke-dashoffset. Um ein Element entlang des Pfades zu bewegen, verwenden Sie SMIL <animateMotion> mit href, das auf die Pfad-ID zeigt.

Nein. Pfadbefehle werden im Browser berechnet und niemals irgendwohin gesendet.

Verwandte Tools

Material Design Farbpicker

Durchsuchen Sie die Material Design Farbpalette. Kopieren Sie jeden Farbton (50 bis A700) als HEX, RGB oder HSL mit einem Klick.

GIF komprimieren

Reduziere die Größe animierter GIFs direkt im Browser, indem du Abmessungen verkleinerst, weniger Frames behältst und die Kodierungsqualität anpasst. Vorschau vor dem Download inklusive.

Vision Board erstellen

Verwandeln Sie Ihre Ziele in ein visuelles Board: Bilder hochladen, persönlichen Titel und Bildunterschriften ergänzen, Farben und Layout wählen und ein druckbares PNG herunterladen. Alles bleibt in Ihrem Browser.

Kontaktbogen erstellen

Ordnen Sie Fotos auf druckbaren A4- oder Letter-Kontaktbögen an, ergänzen Sie Beschriftungen und laden Sie die Seiten als JPEG oder PDF herunter.

Bildrahmen hinzufügen

Fügen Sie um jedes Foto einen einfarbigen Rahmen mit einstellbarer Dicke, einer kontrastierenden Innenlinie und Live-Vorschau hinzu, alles in Ihrem Browser.

Liniertes Papier Generator

Erstellen Sie kostenlos druckbares liniertes Papier. Wählen Sie College-, breite oder schmale Linierung, legen Sie den Zeilenabstand in mm, das Papierformat und eine Randlinie fest und drucken Sie das Blatt oder laden Sie es als SVG herunter.

Tool in anderen Sprachen verfügbar