SVG Inliner
Come funziona
Incolla un SVG che assegna gli stili con classi CSS dentro un blocco <style>, oppure trascina il file sulla zona di caricamento, e premi Converti in attributi inline. Per ogni regola con un selettore di classe semplice (per esempio `.cls-1 { fill: #e30613; }`) lo strumento scrive ogni proprietà come attributo sugli elementi che hanno quella classe (`fill="#e30613"`), toglie la classe dall'elemento, poi elimina i blocchi <style> e gli eventuali <defs> rimasti vuoti.
Serve perché quando metti più SVG nella stessa pagina HTML i loro blocchi <style> condividono un unico ambito globale: una classe come .cls-1 di un'icona ridefinisce senza avvisare la .cls-1 di un'altra, e colori e contorni passano da un disegno all'altro. È tipico degli SVG esportati da Illustrator, che numerano le classi sempre allo stesso modo. Con gli stili trasformati in attributi ogni SVG basta a se stesso e si vede uguale ovunque, anche dove i blocchi <style> vengono eliminati, come in molti client email e sanitizer.
Due dettagli da sapere. Se un elemento ha già quell'attributo scritto inline, il valore esistente vince e non viene sovrascritto. E vengono convertite solo le regole con selettori di classe semplici: selettori di elemento, di id, combinati o regole come @keyframes non vengono applicati, e spariscono insieme al blocco <style>, quindi controlla l'anteprima Prima e Dopo.
Poi copia il risultato o scaricalo come inlined.svg. La conversione avviene nel tuo browser, quindi il disegno non viene mai caricato su un server.
Domande frequenti
Perché trasformare gli stili di un SVG in attributi inline?
- Per evitare che due SVG nella stessa pagina si contendano gli stessi nomi di classe. Quando incorpori più SVG in un documento le loro classi CSS possono scontrarsi e sovrascriversi, cosa frequente quando le icone arrivano da fonti o programmi diversi. Scrivere gli stili come attributi isola ogni SVG dal resto della pagina.
Converte tutte le regole CSS?
- No, solo quelle con selettori di classe semplici come .cls-1 (anche separati da virgola, come .a, .b). Ogni proprietà di quelle regole diventa un attributo dell'elemento: funziona per fill, stroke, stroke-width, opacity e le altre proprietà che SVG accetta come attributi. Le regole con altri selettori non vengono applicate e si perdono quando il blocco <style> viene rimosso.
Cosa succede se un elemento ha già un attributo fill o stroke?
- Resta com'è. Lo strumento aggiunge una proprietà della classe solo se l'elemento non ha già quell'attributo, quindi i valori scritti direttamente sull'elemento hanno la precedenza.
L'SVG convertito si apre ancora in Illustrator o Figma?
- Sì. Gli attributi di presentazione sono il modo nativo di dare stile a un SVG, e ogni editor vettoriale li legge. Anzi, un SVG senza blocco <style> è più portabile, perché per essere disegnato correttamente non gli serve nessun CSS.