Softonic

SVG-padmaker

Stap 1 / 2

Click empty area naar toevoegen punten. Drag punten naar move. verwijderen laatste met the button.

Volgende

Het attribuut d op een SVG <path> is een kleine, domeinspecifieke taal: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Elke letter staat voor een commando (moveto, lineto, cubic Bezier, close-path) en elk getal voor een coördinaat of controlepunt. Met deze bouwtool klikt u op het canvas om ankerpunten te plaatsen en sleept u ze om de vorm aan te passen, terwijl het pad in real-time wordt getekend. Schakel het gladstrijken in om rechte segmenten om te zetten in kubische Bézier-curves, sluit de vorm en kopieer vervolgens het gegenereerde d-attribuut of de volledige SVG.

Hoe bouw je een pad?

  1. 1

    Klik om punten toe te voegen

    Elke klik plaatst een ankerpunt op het canvas; het pad verbindt ze op volgorde, te beginnen met een `M` (moveto).

  2. 2

    Sleep om de vorm aan te passen

    Sleep een willekeurig punt om het te verplaatsen, en verwijder het laatste met de knop. Minimaal twee punten.

  3. 3

    Recht of vloeiend

    Laat de punten verbonden door rechte `L`-segmenten, of schakel Gladstrijken in om ze om te zetten in kubische Bézier-curves `C`.

  4. 4

    Sluiten of open laten

    Schakel Pad sluiten in om een `Z` terug naar het begin toe te voegen, of laat het open voor een polylijn/streek.

  5. 5

    Kopieer het attribuut d

    De gegenereerde `d`-string is schoon en gescheiden door spaties, klaar om in elke SVG te plakken; u kunt de volledige SVG ook kopiëren of downloaden.

Handboek met instructies voor SVG-padcommando’s

De visuele bouwtool hierboven genereert de commando’s M, L, C en Z (moveto, rechte lijn, kubische Bézier en close-path). De rest van de commandoset hieronder is een naslagwerk om elke d-string die u elders plakt te lezen en handmatig te bewerken. Grote letters gebruiken absolute coördinaten; kleine letters gebruiken relatieve afstanden ten opzichte van de huidige penpositie.

Cmd Naam Syntax
M / m Moveto M x y
L / l Lineto L x y
H / h Horizontale lijn H x
V / v Verticale lijn V y
C / c Kubische Bézier C x1 y1 x2 y2 x y
S / s Vloeiende kubische Bézier S x2 y2 x y
Q / q Kwadratische Bézier Q x1 y1 x y
T / t Vloeiende kwadratische Bézier T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

Een werkbaar voorbeeld: een afgeronde vink

M 4 12 L 10 18 L 20 6

Drie commando’s: verplaats naar (4, 12), lijn naar (10, 18) en lijn naar (20, 6). Voeg stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" toe aan het pad en u krijgt een net vinkje-symbool.

Het arc-commando is het moeilijkst

A rx ry x-axis-rotation large-arc-flag sweep-flag x y bestaat uit zeven cijfers:

  • rx, ry, radius van de ellips
  • x-axis-rotation, rotatie van de ellips in graden
  • large-arc-flag: 0 voor de korte boog, 1 voor de lange boog
  • sweep-flag, 0 voor tegen de klokrichting, 1 voor met de klokrichting
  • x, y, eindpunt

Kijk eens hoe dezelfde twee eindpunten op vier verschillende manieren met elkaar kunnen worden verbonden, door de vlaggen één voor één om te keren.

Tips

  • Houd de getallen klein en afgerond. Lijn de coördinaten uit op het pixelraster of een halve pixel; vermijd 17 decimalen.
  • Geef de voorkeur aan hoofdlettercommando’s wanneer het pad op zichzelf staat. Kleine letters (relatief) zijn handig wanneer u het pad later wilt verschuiven.
  • Sluit alleen wanneer u vult. Als een pad puur wordt gestreken, geeft Z geen visuele verandering en bespaart één byte.
  • Haal het door SVGO. Nullen aan het eind, dubbele spaties en herhaalde commando’s worden netjes samengevoegd.

Veelgestelde vragen

De coördinaten in d zijn uitgedrukt in dezelfde eenheden als de viewBox. Een pad dat is ontworpen voor viewBox="0 0 24 24" en op viewBox="0 0 100 100" wordt weergegeven, verschijnt in het bovenlinkse kwartier. Schaal de coördinaten of verander de grootte van de viewBox.

Wanneer u het pad wilt verschuiven of herhalen, zorgen relatieve commando’s ervoor dat de vorm overdraagbaar blijft: u kunt overal een nieuwe M vooraan toevoegen en alles daarna verschuift mee.

Ja. <polyline points="0,0 10,10 20,0"> wordt <path d="M 0 0 L 10 10 L 20 0" />. Een poligon krijgt een extra Z. De meeste optimalisatoren doen dit automatisch, omdat paden beter worden gecomprimeerd.

Voor aanhaal-effecten gebruikt u CSS stroke-dasharray en stroke-dashoffset. Voor het verplaatsen van een element langs een pad gebruikt u SMIL <animateMotion>, waarbij href verwijst naar de pad-ID.

Nee. De padcommando’s worden in de browser berekend en worden nooit naar een andere plek verzonden.

Gerelateerde tools

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Afbeelding naar grijswaarden

Zet kleurenafbeeldingen in uw browser om naar grijswaarden. Gratis en privé, er wordt niets geüpload.

Kruissteekpatroon maken

Zet JPEG, PNG of WebP om in een afdrukbaar kruissteekpatroon van 10–150 steken met 2–40 eigen kleuren, symbolen, exacte aantallen en stofmaten.

Tool beschikbaar in andere talen