Come modificare un SVG: editor visuale o codice

Per modificare un file SVG, apri una copia in un editor visuale per cambiare forme, colori e curve, oppure in un editor di testo per piccole modifiche al markup. Salva come SVG, poi riapri il file per controllare il risultato. Il metodo giusto dipende dalla modifica necessaria e dagli oggetti contenuti nel file.

Prima di scegliere un comando che interviene più profondamente sulla struttura, identifica ciò che hai selezionato. Un gruppo, un tracciato con più parti e un PNG incorporato possono sembrare un unico oggetto sull'area di lavoro. Richiedono soluzioni diverse.

Prepara una copia e identifica gli oggetti SVG

Servono il file SVG, una copia di lavoro, un editor e un visualizzatore compatibile con SVG. Conserva l'originale finché la copia esportata non supera i controlli.

SVG significa Scalable Vector Graphics. Il markup XML può descrivere forme e tracciati vettoriali, ma anche contenere immagini incorporate. Un tracciato descrive una linea o forma; un nodo è un punto modificabile lungo quel tracciato in un editor vettoriale. L'estensione SVG da sola non dice se il disegno visibile permette di accedere a questi punti.

Apri la copia e controlla l'oggetto selezionato nel pannello Livelli o Oggetti. Se necessario, consulta il markup in un editor di testo. Identifica il tipo di oggetto prima di cambiarne la struttura:

L'elemento <image> può riferirsi a contenuti PNG o JPEG. Quei pixel non diventano tracciati perché il file esterno termina con .svg. Bordi a blocchi quando ingrandisci sono un indizio; il pannello oggetti e il riferimento alla sorgente forniscono una diagnosi più precisa. Alcuni editor inseriscono anche un SVG vettoriale valido come un unico oggetto grafico: una singola selezione da sola dimostra ben poco.

Un tracciato composto può conservare fori, come il centro di una “O”. Separarlo può cambiarli. Consulta la diagnosi dei tipi di oggetto SVG se il comando per separare il gruppo non è disponibile o non ha effetto.

Scegli un editor visuale o il codice

Inkscape è gratuito e open source, funziona su macOS, Windows e Linux e usa SVG come formato principale. Illustrator è un'altra opzione se lo usi già. Figma può trasferire risorse tra strumenti di design come SVG, ma le sue indicazioni di importazione escludono gli elementi SVG marker e pattern. Controlla un'importazione complessa prima di scegliere l'editor.

La procedura documentata dell'editor SVG di Canva comprende modifiche di base a colori e disposizione. Gli editor nel browser possono bastare per lavori piccoli. Controlla la compatibilità con riempimenti, tratti, testo ed effetti del file, insieme alle condizioni attuali di esportazione. Per dividere riempimenti uniformi supportati in file allineati per colore esatto, usa il Separatore di colori SVG; per rimodellare i tracciati, usa un editor vettoriale.

Modifica le forme visivamente e verifica l'esportazione

I nomi dei comandi variano tra editor, ma il lavoro segue questo ordine:

1. Apri la copia di lavoro. Confronta il disegno importato con l'originale. Fermati se lettere, motivi o effetti sono già cambiati.
2. Seleziona l'oggetto desiderato. Entra in un gruppo o separalo solo quando il pannello lo identifica come gruppo. Per un tracciato, passa allo strumento nodi o selezione diretta.
3. Esegui una modifica. Cambia un riempimento, sposta una parte o regola alcuni nodi. Nel ridimensionamento, mantieni le proporzioni salvo che tu voglia deformare il disegno.
4. Controlla la zona modificata. Esamina curve e piccoli spazi da vicino, poi guarda l'intero disegno alle dimensioni previste.
5. Salva o esporta un nuovo SVG. Riaprilo in un visualizzatore e nell'applicazione di destinazione. Conferma la parte modificata, le dimensioni complessive e gli oggetti che devono restare selezionabili.

Per ricolorare, distingui il riempimento, il colore dentro una forma, dal tratto, il colore lungo il suo contorno. Un colore visibile può riguardare molti oggetti. La selezione per stesso riempimento può aiutare, ma controllala prima della modifica: un'altra parte può condividere quel colore. La guida alla modifica dei colori SVG spiega gli stili ereditati e i colori che non cambiano.

Conserva un originale di lavoro modificabile se l'editor usa un formato proprio o metadati aggiuntivi. Le opzioni di salvataggio SVG di Adobe comprendono impostazioni per font, proprietà CSS, immagini raster e dati di modifica Illustrator. Un file che appare corretto dopo l'esportazione può avere markup diverso o contenuti rasterizzati. Confronta gli oggetti e i riferimenti necessari oltre all'immagine.

Modifica il codice SVG per un intervento piccolo e controllato

Apri la copia SVG in VS Code o in un altro editor di testo semplice. Mantieni intatti namespace, nomi degli elementi e virgolette. Esegui una modifica e visualizza il rendering prima della successiva.

Prova a cambiare il riempimento senza cambiare il tracciato

Salva questo esempio come triangle.svg e aprilo in un visualizzatore compatibile con SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Sostituisci #3b82f6 con #f97316 nell'attributo fill del tracciato.
2. Salva e riapri o aggiorna il file.
3. Verifica che il triangolo sia arancione e che il contorno non sia cambiato. I dati d, l'id e la class devono ancora corrispondere all'originale.

Se il colore non cambia, controlla un attributo style, una regola di classe, un colore ereditato o un tratto che potrebbe controllare ciò che vedi. Modifica la regola responsabile invece di sostituire ogni occorrenza di un colore nell'intero file.

Nota sul metodo: Abbiamo renderizzato questo esempio prima e dopo la modifica del riempimento con un renderer SVG e controllato i pixel risultanti. Il triangolo ha cambiato colore mentre dati del tracciato, ID e classe sono rimasti uguali. Questo piccolo esempio non testa l'importazione o esportazione di un SVG complesso in un'app di design.

Rimuovi i margini vuoti con viewBox

Il viewBox della radice ha quattro numeri: x minimo, y minimo, larghezza e altezza. Definiscono il rettangolo nello spazio di coordinate SVG che viene mappato nell'area di visualizzazione.

Nell'esempio, il triangolo occupa x=8 a 40 e y=8 a 40. Cambia viewBox="0 0 48 48" in viewBox="8 8 32 32", lasciando intatti i dati del tracciato. Salva e renderizza di nuovo. Il triangolo occupa ora una porzione maggiore della stessa area 48 per 48 perché i margini vuoti sono stati rimossi.

La modifica cambia la mappatura dell'area di lavoro, non la geometria del tracciato né width e height della radice. Nei disegni reali, lascia spazio per tratti ed effetti: un riquadro stretto sulla geometria può ritagliarli. Spesso è più sicuro adattare visivamente pagina o tavola al disegno, poi controllare una copia esportata. Se il file viene importato alla dimensione fisica sbagliata, segui la guida alle dimensioni SVG e a viewBox.

Se il disegno sparisce, viene ritagliato o deformato, ripristina il viewBox originale e controlla i quattro valori e le proporzioni. Non “correggere” un problema dell'area di lavoro spostando tutti i nodi.

Quando un SVG tracciato richiede pulizia

Un'immagine raster memorizza pixel su una griglia. La vettorializzazione ricostruisce geometria da quei pixel: un file tracciato può quindi organizzare colori e contorni diversamente dal disegno originale.

Una parte visibile può essere distribuita tra piccoli tracciati. Un solo colore può anche riguardare più zone separate. Nodi fitti, minuscoli punti, forme di sfondo e contorni sovrapposti possono rallentare una modifica semplice. Controlla queste proprietà specifiche invece di giudicare il file solo dalla nitidezza a un livello di zoom.

Struttura frammentata

Struttura più semplice

Queste illustrazioni spiegano lo sforzo di modifica; non sono esempi di conversione né un confronto misurato tra prodotti. Se il tracciato merita di essere conservato, ripara le zone interessate e semplifica solo dove il contorno resta accurato. Se deriva da un raster e la pulizia sarebbe eccessiva, prova a vettorializzare di nuovo l'immagine originale. Conserva la geometria vettoriale nativa utilizzabile invece di tracciare uno screenshot.

Come procedere con PerfectVector

PerfectVector è adatto quando devi creare tracciati da immagini raster, come un PNG o JPEG originale o il contenuto raster dentro un SVG. Per disegni vettoriali esistenti da conservare, usa i metodi generali descritti sopra.

Per la tua conversione, segui questo ordine:

1. Carica la sorgente raster e confronta l'anteprima vettoriale. Cerca dettagli mancanti, zone indesiderate e contorni diversi dall'originale.
2. Sblocca il risultato prima di modifica o esportazione. Conversione e anteprima sono gratuite e illimitate; la politica pubblica attuale sui prezzi indica che un credito sblocca ogni risultato unico e che riscaricare un risultato sbloccato è gratuito.
3. Controlla e modifica la geometria sbloccata. Verifica forme e nodi necessari, regola la palette quando utile e confronta il risultato modificato alle dimensioni previste.
4. Esporta e verifica nella prossima applicazione. Riapri l'SVG, seleziona le parti previste e controlla dimensioni e piccoli dettagli. Un'anteprima da sola non stabilisce che un file sia pronto per ogni editor, stampante o macchina da taglio.

Le scritte raster vengono ricostruite come geometria: non aspettarti testo digitato modificabile. Prevedi correzioni manuali o ridisegno se una lettera, curva o piccola apertura importante non sopravvive al tracciamento.

Domande frequenti

Come modifico un SVG gratis? Usa Inkscape per modifiche visuali o un editor di testo semplice per il markup. Anche gli strumenti nel browser possono offrire funzioni gratuite; controlla le condizioni attuali di esportazione e la compatibilità con le funzioni SVG del file.

Posso modificare un SVG in VS Code? Sì. Modifica il markup XML per piccoli cambiamenti di riempimento, dimensioni, viewBox o ID e classi necessari. Salva una copia e renderizzala dopo. Usa un editor visuale per rimodellare le curve.

Perché non riesco a selezionare singole forme nell'SVG? Controlla il tipo di oggetto. Può essere un gruppo, un tracciato con più sottotracciati, un disegno ritagliato o un'immagine incorporata. Entra o separa un vero gruppo; modifica i nodi per la geometria e vettorializza contenuti raster solo quando servono tracciati.

Posso modificare un SVG in Canva? La procedura SVG documentata di Canva comprende modifiche di base a colori e disposizione. Controlla il file importato e le condizioni attuali di download SVG. Usa un editor vettoriale o il markup per modifiche precise ai contorni o controllo su ID e classi.

Posso modificare un risultato PerfectVector prima di sbloccarlo? Per la tua conversione, confronta prima l'anteprima, poi sblocca il risultato prima di usare i controlli di modifica ed esportazione. Controlla l'SVG esportato nell'applicazione in cui verrà utilizzato.

Fonti

1. W3C — Scalable Vector Graphics (SVG) 2 — modello di documento, forme, tracciati e stili SVG.
2. W3C — Contenuti incorporati SVG — immagini raster che possono restare incorporate in un documento SVG.
3. W3C — Coordinate, trasformazioni e unità SVG — mappatura viewBox e distinzione tra geometria e dimensioni dell'area visibile.
4. Inkscape — Informazioni — informazioni ufficiali su piattaforme, formato SVG e open source.
5. Adobe — Salvare disegni in Illustrator — impostazioni di esportazione SVG e dati di modifica Illustrator conservati.
6. Figma — Copiare risorse tra strumenti di design — trasferimento SVG e limiti di importazione per marcatori e motivi.
7. Canva — Editor SVG — procedura documentata per colore, ridimensionamento e disposizione di base.
8. PerfectVector — Politica sui prezzi — condizioni attuali di anteprima, sblocco e nuovo download.

Conserva un SVG utilizzabile e modifica la geometria esistente. Se la sorgente è raster o il tracciato deve essere sostituito, prova l'immagine originale in PerfectVector, confronta l'anteprima con la sorgente, sblocca prima della modifica e controlla forme e dimensioni esportate nella prossima applicazione.