Softonic

Costruttore di percorsi SVG

Passaggio 1 / 2

Fai clic su un'area vuota per aggiungere punti. Trascina i punti per spostarli. Rimuovi l'ultimo con il pulsante.

Avanti

L’attributo d su un SVG <path> è un piccolo linguaggio specifico del dominio: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Ogni lettera è un comando (moveto, lineto, cubic Bézier, close-path), ogni numero è una coordinata o un punto di controllo. Questo costruttore ti consente di cliccare sulla tela per posizionare punti di ancoraggio e trascinarli per rimodellare, vedendo il percorso disegnarsi in tempo reale. Attiva l’opzione morbida per trasformare i segmenti dritti in curve di Bézier cubiche, chiudi la forma, poi copia l’attributo d generato o l’SVG completo.

Come costruire un percorso

  1. 1

    Clicca per aggiungere punti

    Ogni clic posiziona un punto di ancoraggio sulla tela; il percorso li collega in ordine, partendo da un `M` (moveto).

  2. 2

    Trascina per rimodellare

    Trascina qualsiasi punto per spostarlo ed elimina il più recente con il pulsante. Il minimo è di due punti.

  3. 3

    Dritto o morbido

    Lascia i punti uniti da segmenti dritti `L`, oppure attiva Morbido per trasformarli in curve di Bézier cubiche `C`.

  4. 4

    Chiudi o lascia aperto

    Attiva Chiudi percorso per aggiungere una `Z` di ritorno all'inizio, o lascialo aperto per una polilinea/tratto.

  5. 5

    Copia l'attributo d

    La stringa `d` generata è pulita e separata da spazi, pronta per essere incollata in qualsiasi SVG; puoi anche copiare o scaricare l'SVG completo.

Cheat sheet dei comandi di percorso SVG

Il costruttore visivo qui sopra genera i comandi M, L, C e Z (moveto, linea dritta, Bézier cubico e chiusura del percorso). Il resto del set di comandi qui sotto è un riferimento per leggere e modificare a mano qualsiasi stringa d che incolli altrove. Le lettere maiuscole usano coordinate assolute; le minuscole usano offset relativi dalla posizione attuale della penna.

Cmd Nome Sintassi
M / m Moveto M x y
L / l Lineto L x y
H / h Lineto orizzontale H x
V / v Lineto verticale V y
C / c Cubic Bézier C x1 y1 x2 y2 x y
S / s Cubic Bézier liscio S x2 y2 x y
Q / q Quadratic Bézier Q x1 y1 x y
T / t Quadratic Bézier liscio T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Chiudi percorso Z

Un esempio pratico: una spunta arrotondata

M 4 12 L 10 18 L 20 6

Tre comandi: muovi a (4, 12), linea a (10, 18), linea a (20, 6). Aggiungi stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" al percorso e avrai un simbolo di spunta pulito.

Il comando arc è il più difficile

A rx ry x-axis-rotation large-arc-flag sweep-flag x y richiede sette numeri:

  • rx, ry, raggi dell’ellisse
  • x-axis-rotation, rotazione dell’ellisse in gradi
  • large-arc-flag, 0 per l’arco corto, 1 per quello lungo
  • sweep-flag, 0 per antiorario, 1 per orario
  • x, y, punto finale

Capovolgi i flag uno alla volta per vedere come i due stessi punti finali possono connettersi in quattro modi diversi.

Suggerimenti

  • Mantieni i numeri piccoli e arrotondati. Allinea le coordinate alla griglia dei pixel o a metà pixel; evita 17 cifre decimali.
  • Preferisci i comandi maiuscoli quando il tuo percorso è autonomo. Le minuscole (relative) sono utili quando prevedi di tradurre il percorso in seguito.
  • Chiudi solo quando riempi. Se un percorso è solo tracciato, Z non aggiunge alcuna modifica visiva e risparmia un byte.
  • Esegui tramite SVGO. Zeri finali, spazi duplicati e comandi ripetuti si comprimono bene.

Domande frequenti

Le coordinate in d sono nelle stesse unità del viewBox. Un percorso progettato per viewBox="0 0 24 24" posizionato su viewBox="0 0 100 100" apparirà nel quarto in alto a sinistra. Scala le coordinate o ridimensiona il viewBox.

Quando prevedi di tradurre o ripetere il percorso. I comandi relativi mantengono la forma portatile, puoi aggiungere un nuovo M ovunque e tutto ciò che segue si muove con esso.

Sì. <polyline points="0,0 10,10 20,0"> diventa <path d="M 0 0 L 10 10 L 20 0" />. Un poligono aggiunge un finale Z. La maggior parte degli ottimizzatori lo fa automaticamente perché i percorsi si comprimono meglio.

Per effetti di disegno usa CSS stroke-dasharray + stroke-dashoffset. Per muovere un elemento lungo il percorso usa SMIL <animateMotion> con href che punta all’id del percorso.

No. I comandi del percorso vengono calcolati nel browser e non vengono mai inviati da nessuna parte.

Strumenti correlati

Selettore Colori Material Design

Sfoglia la palette di colori Material Design. Copia qualsiasi tonalità (da 50 a A700) in HEX, RGB o HSL con un solo tocco.

Convertitore Pantone in HEX

Converti i colori Pantone PMS nei valori HEX, RGB e CMYK più vicini per la corrispondenza su schermo e stampa, con anteprima del campione.

Convertitore da foto a disegno

Trasforma foto JPEG, PNG o WebP in disegni a grafite, matita morbida o carboncino nel browser, quindi esporta in PNG o JPEG.

Creatore di giornali

Crea una prima pagina di giornale con titoli e articoli tuoi, poi copia o scarica il testo semplice oppure usa la finestra di stampa del browser.

Creatore di provini a contatto

Disponi le foto su provini a contatto A4 o Letter con didascalie, ritaglio e anteprima, quindi scarica le pagine JPEG o un PDF.

Convertitore di formato immagine

Converti immagini in JPG, PNG o WebP direttamente nel browser, con controllo della qualità per i formati con perdita e trasparenza conservata in PNG e WebP.

Strumento disponibile in altre lingue