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

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Konverterare för bildformat

Konvertera bilder till JPG, PNG eller WebP direkt i webbläsaren, med kvalitetskontroll för de förlustbehäftade formaten och bevarad transparens i PNG och WebP.

Invertera färger i bilden

Vänd varje RGB-kanal i en bild om för att få en negativbild – användbart vid kreativa redigeringar och när du ska titta på filmskanningar.

Verktyget finns på andra språk