Quali comandi del percorso SVG sono supportati?

Tutti i comandi standard: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z.

Come vengono mostrati i punti di controllo?

Per le curve di bezier cubice (C/c), due punti di controllo blu sono collegati ad ogni ancora da linee tratteggiate, mostrando esattamente come la curva è sagomata. Per le curve quadratiche (Q/q), viene visualizzato un unico punto di controllo viola. I punti di ancoraggio sono disegnati come piccoli punti rossi.

Posso modificare il percorso nel visualizzatore?

Attualmente si modifica il testo dei dati del percorso e gli aggiornamenti di visualizzazione dal vivo. La manipolazione diretta dei punti di controllo trascinando sulla tela è prevista per un aggiornamento futuro.

Visualizzatore percorso SVG

Incolla qualsiasi d-attributo percorso SVG e vederlo reso istantaneamente con visualizzazione punto di controllo.

Control points Grid

SVG Path Data (d attribute)

Preview

Was this tool helpful?

Send output to:

How to use SVG Path Visualizer

Incolla una stringa d-attribuzione del percorso SVG nella casella di input.
Il percorso viene reso istantaneamente nel riquadro di anteprima con viewBox auto-calcolato.
I punti blu mostrano punti di controllo bezier cubici, punti viola mostrano punti quadratici di controllo bezier, e punti rossi mostrano punti di ancoraggio.
Attivare l'overlay della griglia per un posizionamento preciso o utilizzare i pulsanti Copia/Scarica per esportare il percorso.
Modificare i dati del percorso e vedere l'aggiornamento dei risultati in tempo reale.

Che cos'e'?

Le stringhe di dati del percorso

SVG possono essere criptiche — una lunga stringa di lettere e numeri che è difficile da debug leggendo da solo. Questo strumento rende i dati del percorso in diretta, mostrando la forma reale, i punti di controllo per le curve bezier, e punti di ancoraggio. E 'invalidabile quando si sta modificando i percorsi SVG a mano o debugging perché una curva non sembra il modo in cui ci si aspetta. Lo strumento supporta tutti i comandi standard del percorso SVG: M/m (mova), L/l (linea), H/h (orizzontale), V/v (verticale), C/c (cubic bezier), S/s (smooth cubic), Q/q (quadratic bezier), T/t (smooth quadratic), A/a (arc), e Z/z (close path). I punti di controllo sono indicati come punti colorati collegati da linee tratteggiate ai loro ancoraggi

FAQ

Quali comandi del percorso SVG sono supportati?: Tutti i comandi standard: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z.
Come vengono mostrati i punti di controllo?: Per le curve di bezier cubice (C/c), due punti di controllo blu sono collegati ad ogni ancora da linee tratteggiate, mostrando esattamente come la curva è sagomata. Per le curve quadratiche (Q/q), viene visualizzato un unico punto di controllo viola. I punti di ancoraggio sono disegnati come piccoli punti rossi.
Posso modificare il percorso nel visualizzatore?: Attualmente si modifica il testo dei dati del percorso e gli aggiornamenti di visualizzazione dal vivo. La manipolazione diretta dei punti di controllo trascinando sulla tela è prevista per un aggiornamento futuro.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 SVG Path Visualizer on Wikipedia·Developer Tools on Wikipedia·SVG Path Visualizer on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-06

Visualizzatore percorso SVG

Something went wrong

How to use SVG Path Visualizer

Che cos'e'?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts