Softonic

SVG-pathbyggare

Steg 1 / 2

Klicka i ett tomt område för att lägga till punkter. Dra punkter för att flytta dem. Ta bort den senaste med knappen.

Nästa

d-attributet på en SVG-<path> är ett pyttelitet domänspecifikt språk: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Varje bokstav är ett kommando (moveto, lineto, kubisk Bézier, close-path), varje tal är en koordinat eller kontrollpunkt. Den här byggaren låter dig klicka på arbetsytan för att placera ut ankarpunkter och dra dem för att omforma, medan pathen ritas i realtid. Slå på utjämning för att omvandla raka segment till kubiska Bézier-kurvor, slut formen och kopiera sedan det genererade d-attributet eller hela SVG:n.

Så bygger du en path

  1. 1

    Klicka för att lägga till punkter

    Varje klick placerar en ankarpunkt på arbetsytan; pathen förbinder dem i tur och ordning, med start i ett `M` (moveto).

  2. 2

    Dra för att omforma

    Dra vilken punkt som helst för att flytta den, och ta bort den senaste med knappen. Minst två punkter.

  3. 3

    Rakt eller mjukt

    Låt punkterna förbindas av raka `L`-segment, eller slå på Utjämning för att omvandla dem till kubiska Bézier-kurvor `C`.

  4. 4

    Stäng eller lämna öppen

    Slå på Stäng path för att lägga till ett `Z` tillbaka till starten, eller lämna den öppen för en polyline/streck.

  5. 5

    Kopiera d-attributet

    Den genererade `d`-strängen är ren och mellanslagsseparerad, redo att klistra in i valfri SVG; du kan även kopiera eller ladda ner hela SVG:n.

Fusklapp för SVG-path-kommandon

Den visuella byggaren ovan genererar kommandona M, L, C och Z (moveto, rak linje, kubisk Bézier och close-path). Resten av kommandouppsättningen nedan är en referens för att läsa och handredigera vilken d-sträng du än klistrar in någon annanstans. Versala bokstäver använder absoluta koordinater; gemena använder relativa förskjutningar från den aktuella pennpositionen.

Kmd Namn Syntax
M / m Moveto M x y
L / l Lineto L x y
H / h Horisontell lineto H x
V / v Vertikal lineto V y
C / c Kubisk Bézier C x1 y1 x2 y2 x y
S / s Mjuk kubisk Bézier S x2 y2 x y
Q / q Kvadratisk Bézier Q x1 y1 x y
T / t Mjuk kvadratisk Bézier T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

Ett genomarbetat exempel: en rundad bock

M 4 12 L 10 18 L 20 6

Tre kommandon: flytta till (4, 12), linje till (10, 18), linje till (20, 6). Lägg till stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" på pathen så har du en ren bock-glyf.

Arc-kommandot är det svåraste

A rx ry x-axis-rotation large-arc-flag sweep-flag x y tar sju tal:

  • rx, ry, ellipsradier
  • x-axis-rotation, ellipsens rotation i grader
  • large-arc-flag, 0 för den korta bågen, 1 för den långa
  • sweep-flag, 0 för moturs, 1 för medurs
  • x, y, slutpunkt

Vänd flaggorna en i taget för att se hur samma två ändpunkter kan kopplas på fyra olika sätt.

Tips

  • Håll tal små och jämna. Snäpp koordinater till pixelrutnätet eller halvpixeln; undvik 17 decimaler.
  • Föredra versala kommandon när din path är fristående. Gemena (relativa) är behändiga när du senare ska translatera pathen.
  • Stäng bara när du fyller. Om en path är strikt streckad lägger Z ingen visuell förändring och sparar en byte.
  • Kör genom SVGO. Avslutande nollor, dubbletter av mellanslag och upprepade kommandon kollapsar snyggt.

Vanliga frågor

Koordinater i d är i samma enheter som viewBox. En path designad för viewBox="0 0 24 24" placerad på viewBox="0 0 100 100" visas i den övre vänstra fjärdedelen. Antingen skalar du koordinaterna eller ändrar storleken på viewBox.

När du planerar att translatera eller upprepa pathen. Relativa kommandon håller formen portabel, du kan lägga till ett nytt M var som helst och allt nedströms flyttas med det.

Ja. <polyline points="0,0 10,10 20,0"> blir <path d="M 0 0 L 10 10 L 20 0" />. En polygon lägger till ett avslutande Z. De flesta optimerare gör detta automatiskt eftersom pathar komprimerar bättre.

För rit-in-effekter, använd CSS stroke-dasharray + stroke-dashoffset. För att flytta ett element längs pathen, använd SMIL <animateMotion> med href som pekar på pathens id.

Nej. Path-kommandon beräknas i webbläsaren och skickas aldrig någonstans.

Relaterade verktyg

Linjerat papper-generator

Skapa utskrivbart linjerat papper gratis. Välj college-, bred eller smal linjering, ange radavstånd i mm, pappersstorlek och en marginallinje, och skriv sedan ut eller ladda ner SVG:n.

Avatarskapare

Skapa en platt illustrerad avatar i webbläsaren. Välj hudton, hår, ögon, mun, kläder, bakgrund och ett valfritt visningsnamn och hämta sedan SVG eller PNG.

Skapa notpapper

Skapa notpapper att skriva ut: tomma notsystem, G-klav eller F-klav, pianosystem eller gitarrtabulatur. Välj antal, linjeavstånd, A4 eller Letter och marginaler och ladda ned PDF eller SVG.

Skapa LEGO-mosaik av ett foto

Gör en mosaikplan av ett foto med 16 × 16, 32 × 32, 48 × 48 eller 64 × 64 rutor. Förhandsvisa ungefärliga färger, räkna 1×1-plattor och ladda ner en numrerad byggguide.

Lottsedelskapare

Skapa privata ark med tvådelade, löpande numrerade lottsedlar för ett informellt evenemang. Skriv ut alla A4- eller US Letter-sidor, eller hämta den aktuella sidan.

Skapa korsstygnsmönster

Gör JPEG, PNG eller WebP till ett utskrivbart korsstygnsdiagram med 10–150 stygn, 2–40 egna färger, symboler, exakta antal och tygmått.

Verktyget finns på andra språk