Come modificare un SVG (e perché uno pulito è molto più facile)

Ci sono due modi per modificare un SVG. Puoi aprirlo in un editor visivo e fare clic sulle forme per ricolorarle, ridimensionarle o spostarle, oppure puoi aprire il codice e modificarlo a mano, perché un SVG è in realtà solo un file di testo. La maggior parte delle persone cerca il primo percorso, di solito per cambiare un colore o ridimensionare un'icona, e un editor visivo lo fa in pochi secondi.

La parte che nessun tutorial racconta: quanto sia facile fare tutto questo dipende da come è stato creato l'SVG. Un file pulito, con poche forme ordinate, si modifica in pochi secondi. Un file disordinato, del tipo prodotto al volo da un convertitore rapido, può portarsi dietro migliaia di punti inutili e un singolo colore spezzato in centinaia di frammenti; a quel punto "fai clic sulla forma e ricolorala" smette di funzionare. Questa guida copre entrambi i metodi di modifica e spiega come capire che tipo di file hai davanti.

La versione rapida

• Due modi per modificare: visivamente in un editor (ricolorare, ridimensionare, rimodellare) oppure direttamente nel codice SVG (è solo testo).
• Editor visivo gratuito: Inkscape. Pro: Illustrator. Nel browser: Figma o un editor SVG online gratuito. Codice: VS Code o qualunque editor di testo.
• Il lavoro più comune, ricolorare: seleziona una forma e cambia il suo fill. Rapido su un file pulito, doloroso su uno frammentato.
• Modifica il codice quando devi mantenere intatti nomi di classi e ID, cambiare il viewBox o fare una correzione veloce senza aprire un'app.
• Se non riesci a selezionare la forma che vuoi, il problema è il file, non l'editor. Una conversione più pulita spesso è la vera soluzione.

Prima di tutto, cosa c'è davvero dentro un SVG

Un SVG è modificabile per ciò che è: un insieme di forme descritte matematicamente, scritto in testo semplice (più precisamente XML). Un cerchio viene salvato come centro e raggio, un logo come una serie di tracciati, ciascuno con il proprio colore di riempimento. (Qui trovi la spiegazione più completa, se i vettori sono nuovi per te.)

Ecco perché puoi ricolorarlo o ridimensionarlo senza che diventi mai sfocato, e perché si presta a due modi di modifica completamente diversi. Aprilo in un editor visivo e lavori con le forme. Aprilo in un editor di testo e lavori con il codice che le descrive. Stesso file, due porte d'ingresso.

Controlla una cosa prima di tutto: apri l'SVG e prova a fare clic su una singola forma. Se puoi selezionarla e spostarla da sola, è un vero vettore modificabile. Se invece si seleziona tutto come un unico blocco e sgrana quando fai zoom, probabilmente è un'immagine raster avvolta in un file .svg, un "finto" vettore che non puoi davvero modificare. Nessun editor risolve questo problema; il file deve prima essere convertito nel modo giusto.

I due modi per modificare un SVG, e quando usare ciascuno

Vuoi...	Metodo migliore
Ricolorare, ridimensionare o spostare forme	Editor visivo (Inkscape, Illustrator, Figma)
Modificare testo o cambiare velocemente alcuni colori	Editor visivo, oppure il codice per interventi singoli
Mantenere nomi di classi / ID per CSS o animazioni	Modificare direttamente il codice
Cambiare il viewBox, le dimensioni o un valore esadecimale	Modificare direttamente il codice
Ridisegnare o rimodellare tracciati a mano	Editor visivo

La maggior parte delle modifiche è visiva. Passi al codice quando sei uno sviluppatore e hai bisogno che il markup resti esattamente com'è scritto, cosa che un editor visivo non sempre rispetta (ne parliamo meglio tra poco).

Modificare un SVG visivamente

Questo è il percorso che cerca la maggior parte delle persone, e copre ricolorare, ridimensionare, rimodellare ed eliminare parti.

Scegli un editor

• Inkscape è gratuito, open source e funziona su Mac, Windows e Linux. È la risposta più comune a "con cosa modifico gli SVG", e se la merita.
• Adobe Illustrator è lo standard professionale a pagamento e offre il massimo controllo se lo usi già.
• Figma funziona nel browser e gestisce bene modifiche leggere e ricolorazioni, motivo per cui molti team di prodotto lo scelgono.
• Editor online gratuiti come Boxy SVG, o un rapido editor SVG web, coprono le piccole modifiche senza installare nulla.

Fai la modifica

I passaggi sono gli stessi in tutti questi strumenti:

1. Apri il file nel tuo editor (File → Open, oppure trascinalo dentro).
2. Usa Ungroup se serve. Gli SVG convertiti ed esportati spesso arrivano come un unico gruppo bloccato. Seleziona tutto e usa Ungroup (in Illustrator e Inkscape) per raggiungere le singole forme.
3. Seleziona la forma che vuoi con lo strumento di selezione o selezione diretta.
4. Modificala. Imposta un nuovo colore di fill, trascina una maniglia per ridimensionarla, spostala, modifica il testo oppure elimina una parte che non ti serve.
5. Salva o esporta come SVG quando hai finito.

La modifica più comune: cambiare i colori

La maggior parte delle domande su "come modifico un SVG" significa in realtà "come lo ricoloro". Su un file pulito è rapido: fai clic sulla forma, scegli un nuovo fill, finito. Ogni colore è una forma modificabile a sé, quindi trasformare il blu del tuo brand in verde richiede un clic per forma.

Ed è esattamente qui che un file disordinato crolla: la prossima sezione parla di questo.

Modificare direttamente il codice SVG

Poiché un SVG è testo, puoi aprirlo in VS Code, Notepad o qualunque editor di testo e modificarlo a mano. Questo è il percorso da sviluppatore, e per alcuni lavori è più veloce e sicuro di qualsiasi app visiva:

• Ricolorare: trova il fill="#3b82f6" della forma e cambia il valore esadecimale.
• Ridimensionare l'area di disegno: modifica width, height o viewBox.
• Mantenere intatti i tuoi hook: questo è il punto importante. Gli editor visivi come Illustrator spesso riscrivono il markup quando salvano, rinominando o rimuovendo gli attributi class e id da cui dipendono il tuo CSS o JavaScript. Se il tuo SVG è collegato a stili o animazioni, modificare il codice a mano è l'unico modo affidabile per conservare quei collegamenti.

Il compromesso è semplice: modificare il codice è ottimo per interventi piccoli e chirurgici e per tutto ciò che tocca classi, ID o animazioni. È lo strumento sbagliato per rimodellare una curva o ricolorare un'illustrazione affollata. Per quello servono gli editor visivi.

Perché alcuni SVG sono un incubo da modificare (e come risolvere)

Ecco cosa nessuna pagina di strumenti ti dice: raramente il problema è l'editor. È il file.

Apri un SVG pulito e la modifica è tranquilla. Ci sono poche forme nominate, un fill per forma e un basso numero di nodi, quindi fai clic esattamente su ciò che intendi e lo ricolori in un secondo.

Apri un SVG disordinato, di solito qualcosa tracciato automaticamente da un convertitore gratuito e veloce, e la stessa modifica diventa frustrante:

• Un singolo colore viene spezzato in centinaia di minuscoli frammenti, quindi non c'è una singola "forma blu" su cui fare clic. Ce ne sono centinaia.
• Le curve morbide vengono riempite con migliaia di punti di ancoraggio, quindi rimodellare qualsiasi cosa è impossibile e l'editor rallenta. (Questo è il problema dei troppi nodi spiegato per intero.)
• Rettangoli di sfondo residui e bordi ritagliati si mettono di mezzo.

Quando succede, la soluzione di solito non è un editor migliore o più pazienza. È un file di partenza più pulito. Riconvertire l'immagine originale in un SVG ordinato ti dà qualcosa che puoi davvero modificare.

Come appare con PerfectVector

L'SVG più facile da modificare è quello pulito, ed è proprio la parte che PerfectVector è stato creato per fare bene. Ricostruisce la tua immagine come tracciati puliti con pochi nodi e mantiene ogni colore come forma modificabile a sé, così quando apri il risultato in Illustrator, Figma o Inkscape puoi selezionare e ricolorare gli elementi nel modo in cui i tutorial danno per scontato.

Ha anche un editor colori integrato, quindi puoi ricolorare o unire colori subito dopo la conversione, lavorando per colore invece di dare la caccia ai singoli tracciati. Meno colori significano meno forme da gestire e un file più semplice da modificare più avanti. Puoi convertire un'immagine in un SVG pulito e modificabile e controllare personalmente i tracciati. Converti gratis le prime immagini, senza carta di credito.

Ricolora per colore, non per tracciato

Una checklist rapida prima di modificare

• Conferma che sia un vero vettore. Fai clic su una singola forma. Se si seleziona da sola, sei a posto. Se tutta l'immagine si seleziona come un unico blocco e si sfoca quando fai zoom, convertila prima in un vero SVG.
• Conserva l'originale. Salva una copia prima di iniziare, soprattutto se toccherai il codice.
• Scegli il metodo. Editor visivo per forme e colori; codice per classi, ID, viewBox e piccole correzioni.
• Usa Ungroup se il file arriva come un unico gruppo bloccato.
• Se non riesci a selezionare ciò che vuoi, smetti di lottare. Il file è troppo frammentato, e una conversione più pulita ti farà risparmiare più tempo della pulizia manuale.

FAQ

Come posso modificare un SVG gratis? Usa Inkscape, un editor gratuito e open source per Mac, Windows e Linux, per una modifica visiva completa. Per cambiamenti rapidi, usa un editor SVG online gratuito nel browser, oppure apri il file in un editor di testo come VS Code e modifica direttamente il codice. Tutte e tre le opzioni non costano nulla.

Come cambio il colore di un SVG? In un editor visivo, seleziona la forma e imposta un nuovo colore di fill. Nel codice, trova il valore di fill della forma (per esempio fill="#3b82f6") e cambia l'esadecimale. Se un colore è spezzato in molte forme, ricolora per colore invece di fare clic su ogni pezzo, usando uno strumento che raggruppa i colori per te.

Posso modificare un SVG in VS Code? Sì. Un SVG è testo XML, quindi VS Code o qualunque editor di testo lo apre senza problemi. È la strada giusta per cambiare colori esadecimali, il viewBox o le dimensioni, e per mantenere intatti gli attributi class e id per CSS o animazioni. Non è adatto a rimodellare le curve a mano.

Perché non riesco a selezionare le singole forme nel mio SVG? Di solito per uno di due motivi. Le forme sono raggruppate, quindi prima seleziona tutto e usa Ungroup. Oppure il file è un'immagine raster avvolta in un .svg, che non ha forme separate da selezionare. Se sgrana quando fai zoom, è il secondo caso, e dovrai convertirlo in un vero vettore.

Posso modificare un SVG in Canva? Sì, per modifiche di base. Canva ti permette di ricolorare, ridimensionare e riposizionare un SVG, il che copre la maggior parte delle esigenze leggere. Per modificare i tracciati con precisione, separare forme complesse o intervenire a livello di codice, usa Inkscape, Illustrator o un editor di testo.

Come modifico un SVG su Windows o Mac? Gli stessi strumenti funzionano su entrambi. Inkscape gira su Windows, Mac e Linux; Figma e gli editor online funzionano in qualunque browser; VS Code modifica il codice su entrambi. Non ti serve un software diverso per sistemi operativi diversi.

---

Modificare è molto più semplice quando il file è pulito fin dall'inizio. Se il tuo è un groviglio di tracciati residui, converti l'originale in un SVG pulito e modificabile e riparti da qualcosa con cui puoi davvero lavorare.