Convertitore da tratto a riempimento SVG

Incolla qualsiasi SVG contenente forme con tratto e ottieni un SVG equivalente in cui ogni tratto è sostituito da un percorso riempito con la stessa forma visiva e larghezza. Utile per sistemi di icone e strumenti di design che rendono in modo affidabile solo i riempimenti, o per ridurre un SVG a percorsi solo riempiti prima di un'ulteriore modifica vettoriale.

Che cos'è questo strumento?

Alcune pipeline di rendering — certi generatori di icon font, alcuni motori di gioco, exporter PDF più datati e strumenti che compongono solo riempimenti — non gestiscono correttamente i tratti SVG, o non li gestiscono affatto. Convertire un tratto in una forma riempita della stessa larghezza aggira completamente il problema: il risultato visivo è identico, ma è espresso come un unico percorso riempito invece che come una linea con tratto.

Questo strumento funziona campionando molti punti lungo il contorno di ogni forma (usando l'API di lunghezza del percorso del browser stesso, lo stesso meccanismo usato dalle animazioni SVG) e costruendo due linee di offset parallele a metà della larghezza del tratto su ciascun lato, per poi chiuderle in un unico poligono riempito.

Perché usarlo?

Funziona su elementi path, line, polyline, polygon, rect, circle ed ellipse — non solo <path> — usando un unico metodo di campionamento uniforme.
Preserva il riempimento proprio della forma (se presente) come livello separato sotto il nuovo riempimento del tratto, quindi le forme riempite e con tratto insieme vengono convertite correttamente.
Anteprima prima/dopo affiancata per confermare visivamente la conversione prima di copiare il risultato.
Funziona interamente nel tuo browser — l'SVG che incolli non viene mai caricato da nessuna parte.
Gratuito, istantaneo, senza limiti di dimensione del file oltre a ciò che il tuo browser riesce a renderizzare.

Come si usa

Incolla il tuo markup SVG nella casella di testo (è precompilato un esempio funzionante).
Clicca su "Convert strokes to fills".
Confronta l'anteprima prima/dopo per verificare che il risultato sia corretto.
Clicca su "Copy SVG" per copiare il markup convertito, privo di tratto.

Esempio

Input

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Risultato

Un singolo <path fill="#3B82F6"> il cui contorno traccia entrambi i lati della curva originale, distanti 12 unità, senza alcun attributo stroke.

La forma della curva viene preservata perché lo strumento campiona i punti in modo continuo lungo il percorso effettivamente renderizzato, non solo lungo i suoi punti di controllo.

Domande frequenti

Perché gli angoli vivi diventano arrotondati invece che a punta (mitered)?

È una semplificazione nota e voluta del metodo di campionamento: un campionamento denso di punti lungo un percorso produce naturalmente giunzioni ed estremità arrotondate, indipendentemente dal valore originale di stroke-linejoin o stroke-linecap. Ricostruire giunzioni esatte a spigolo (miter) o smussate (bevel) richiede un algoritmo diverso e più complesso (intersezione di segmenti di linea in ogni vertice) che questo strumento non implementa. Per la maggior parte degli usi con icone e illustrazioni la differenza visiva è minima, ma se hai bisogno di giunzioni miter esatte, la funzione "contorna tratto" di un editor vettoriale dedicato sarà più precisa.

Gestisce i tratti tratteggiati (stroke-dasharray)?

No — lo strumento tratta ogni tratto come continuo e ignora stroke-dasharray/stroke-dashoffset. Un tratto tratteggiato verrà convertito come se fosse continuo, il che ne cambia l'aspetto. Se il tuo SVG usa tratti tratteggiati, questo strumento non è adatto a quelle forme specifiche.

Perché non è stato convertito nulla?

Lo strumento converte solo elementi che hanno sia un colore di tratto (diverso da "none") sia uno stroke-width positivo, impostati come attributi o nello style proprio dell'elemento. Se il tuo SVG imposta il tratto tramite una classe CSS esterna che il browser non riesce a risolvere all'interno dell'anteprima isolata di questo strumento, o tramite un blocco <style> che fa riferimento a classi, lo stile calcolato potrebbe non risolversi correttamente — prova a impostare stroke e stroke-width come attributi diretti sulla forma.

Quando dovrei convertire i tratti in riempimenti, e quando dovrei mantenere i tratti?

Se sei ancora in fase di progettazione, mantieni i tratti — stroke-width resta un singolo numero modificabile, cosa che perdi dopo la conversione. Se stai esportando verso una pipeline che gestisce male i tratti (generatori di icon font, certi motori di gioco o exporter PDF), converti come passaggio finale dell'esportazione e conserva il file originale con tratto come sorgente modificabile, poiché la conversione è a senso unico.

La conversione rende il file SVG più grande?

Di solito sì — una curva con tratto definita da pochi punti di controllo diventa un contorno riempito composto da centinaia di segmenti di linea campionati, quindi i dati del percorso crescono notevolmente. Per le icone questo raramente conta nella pratica, ma se la dimensione è un problema, passa l'output convertito in un ottimizzatore SVG per ridurre la precisione delle coordinate.

Lo stroke-opacity viene mantenuto nel riempimento convertito?

No — il percorso convertito prende il colore del tratto come proprio riempimento ma con opacità piena; un valore di stroke-opacity sulla forma originale viene scartato. Se hai bisogno di preservare la trasparenza, aggiungi manualmente fill-opacity con lo stesso valore al percorso convertito dopo aver copiato il risultato.