Editor di tracciati SVG
SVG Path Editor
Converte i dati di un tracciato tra comandi assoluti e relativi, lo sposta, lo ridimensiona, lo ruota e ne inverte il verso, e mostra il riquadro di delimitazione con l’anteprima.
Legge un attributo `d` e ne restituisce uno trasformato: assoluto o relativo, spostato, scalato, ruotato attorno al centro del riquadro di delimitazione, invertito e arrotondato al numero di decimali scelto. Disegna il risultato tramite Path2D, così è il browser a fare i conti degli archi nello stesso modo di un renderer SVG, e riporta il riquadro di delimitazione e un viewBox pronto da incollare.
L’attributo d di un path
Anteprima
Il rettangolo tratteggiato è il riquadro di delimitazione e il punto rosso è il punto di partenza. Il riempimento segue la regola nonzero.
Risultato
Comandi
18
Sottotracciati
3
Numeri
32
Byte
113 → 97
Riquadro di delimitazione
x 2,00 y 2,00 w 20,00 h 20,00
viewBox
2.00 2.00 20.00 20.00
Che cosa fa
- · Si legge con lo stesso parser dell’ottimizzatore di SVG, così anche una notazione compressa come
1.5.5e i flag di un arco vengono letti bene. Converte fra assoluto e relativo, arrotonda i decimali, sposta, scala e ruota attorno al centro del riquadro di delimitazione, inverte il verso e calcola il riquadro. - · Ruotando,
HeVdiventanoL, e i raggi di un arco, la sua rotazione sull’asse x e il suo flag di spazzata vengono ricalcolati con le formule dell’appendice F.6 di SVG 1.1. Il riquadro di delimitazione viene dagli estremi reali di ogni curva, non dai suoi punti di controllo. - · Non semplifica le curve. Quello cambia la forma, e scegliere la tolleranza è una decisione umana.
Per alleggerire un file intero si può ottimizzare un SVG; per regolare come accelera una curva c’è l’editor di curve di accelerazione.
Come si usa
Incollare l’attributo d
Solo il valore, senza il `<path>` intorno. La notazione compressa va bene — `1.5.5` come due numeri, flag d’arco senza separatore — perché il parser è quello dell’ottimizzatore SVG e gestisce quei casi.
Applicare la trasformazione che serve
Spostamento, scala e rotazione sono applicati alla geometria stessa, quindi quello che esce non ha bisogno di alcun attributo `transform`. La rotazione è attorno al centro del riquadro di delimitazione, che è quello che serve per un’icona e non è quello che fa un `rotate()` grezzo.
Scegliere assoluto o relativo, e la precisione
I comandi relativi sono di solito più corti, il che conta per un’icona messa in linea. La precisione è la vera leva sul peso: tre decimali bastano e avanzano per una griglia da 24 unità, e passare da sei a due spesso dimezza la stringa. Conviene guardare il contatore di byte mentre la si sposta.
Invertire il verso se un riempimento sembra sbagliato
Il punto rosso segna l’inizio, quindi l’effetto di un’inversione è visibile. È il verso a decidere se un sottotracciato interno è un foro sotto la regola nonzero, ed è sempre il verso che segue un’animazione di tratteggio.
Prendere il tracciato, oppure il viewBox
Il riquadro di uscita ha il valore `d` e un elemento `<path>` già pronto. Il pannello delle statistiche ha il riquadro di delimitazione come stringa viewBox, che è il modo più rapido di far riempire a un’icona esattamente la sua cornice.
Domande frequenti
Perché non semplifica la curva?
Perché la semplificazione cambia la forma, e quanto cambiamento sia accettabile è un giudizio su quel particolare disegno che uno strumento non può dare. Ogni algoritmo di riduzione dei punti prende una tolleranza, e il posto onesto per quella decisione è un editor vettoriale, dove si vede quanto costa. Arrotondare i decimali è la leva sicura sul peso, ed è qui.
Che ne è degli archi quando ruoto o scalo?
Restano archi. I raggi, la rotazione dell’asse x e il flag di spazzata vengono ricalcolati con le formule dell’appendice F.6 di SVG 1.1, ed è ciò che mantiene corretti gli assi di un’ellisse sotto una scala non uniforme. `H` e `V` diventano `L` sotto rotazione, perché una linea orizzontale non resta orizzontale.
Il riquadro di delimitazione è ricavato dai punti di controllo?
No, dagli estremi reali di ogni curva. Il punto di controllo di una cubica sta di solito fuori dalla curva, quindi un riquadro basato sui punti di controllo è troppo grande — spesso in modo evidente, che è proprio quando conta, perché quel riquadro è ciò che si incolla come viewBox.
Gestisce un tracciato solo. E un intero file?
Lavora su un singolo valore `d` per scelta: è il livello a cui le trasformazioni e l’inversione hanno senso. Per un documento intero, l’ottimizzatore SVG riscrive tutti i tracciati che contiene, e l’editor SVG legge la struttura che li circonda.
Può ricevere da
Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Da immagine a SVG
Image to SVG
Ricalca una bitmap in tracciati SVG, tarato su loghi e disegni al tratto più che sulle fotografie.
Editor di curve di accelerazione
Easing Curve Editor
Regola una curva cubic-bezier o a molla guardando un’anteprima animata e restituisce la funzione di temporizzazione CSS.
Editor SVG con spiegazioni
SVG Editor and Explainer
Modifica un SVG accanto alla sua resa dal vivo e spiega il file: viewBox e scalatura, trasformazioni, ogni comando di tracciato, il colore ereditato, i byte sprecati e che cosa si rompe dentro un <img>, in un data URI o in linea.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Editor di curve di accelerazione
Easing Curve Editor
Regola una curva cubic-bezier o a molla guardando un’anteprima animata e restituisce la funzione di temporizzazione CSS.
Da immagine a SVG
Image to SVG
Ricalca una bitmap in tracciati SVG, tarato su loghi e disegni al tratto più che sulle fotografie.
Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Da SVG a PNG
SVG to PNG
Disegna un SVG in PNG, JPEG o WebP a qualsiasi fattore di scala, con lo sfondo trasparente o pieno.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.