Come importare e modificare i file SVG in Figma, Canva o WordPress?

Hai l'SVG. E adesso?

La maggior parte dei convertitori si ferma al pulsante Download. Eppure il file è inutile se rimane nella cartella Download. Un designer lo apre in Figma per applicare le linee guida del marchio. Un community manager lo inserisce in Canva per creare varianti di un post. Un programmatore lo mette in WordPress per il logo dell'intestazione. È questo passo successivo a dimostrare che PixelToPath si inserisce in un vero flusso di lavoro, non solo in una demo.

Un SVG PixelToPath non è un'immagine statica. È un insieme di tracciati: ogni forma ha un riempimento, e possibilmente un tratto. Cambiare il blu del logo in bordeaux, isolare l'icona, ingrandirla per una storia 1080x1920: tutto questo viene fatto nello strumento che usi già, senza tornare ad Illustrator.

Perché Figma, Canva e WordPress amano questo formato

PNG e JPG, una volta importati, sono bitmap. Ricolorare un logo PNG in Figma significa sovrapporre un livello, non cambiare il colore del tracciato. Canva non offrirà campioni di colore. WordPress servirà un file pesante, sfocato su schermi Retina. L'SVG risolve tutti e tre i problemi contemporaneamente.

In pratica, un SVG da PixelToPath ti dà:

• Tracciati modificabili: un colore per forma, modificabile in Figma (Riempimento) o Canva (campioni)
• Un file leggero, ben al di sotto del limite di 3 MB di Canva, e più veloce da caricare su un sito WordPress rispetto a un PNG @2x
• Nitidezza identica a quella di una favicon, di un banner LinkedIn, o di un banner roll-up: un unico file
• Un file definitivo che puoi inviare al cliente: lo apre nello strumento che ha, non in Creative Cloud

Figma: importa l'SVG e cambia i colori

Figma importa un SVG come un gruppo di vettori, non come una foto. Questo è il punto centrale: ogni forma rimane un livello che puoi ricolorare, spostare o nascondere.

1. Scarica il file .svg da PixelToPath e apri il tuo file Figma.
2. Trascina il file dall'esploratore risorse direttamente nell'area di lavoro. In alternativa: File → Place image, o Ctrl+Shift+K (Cmd+Shift+K su Mac) per posizionare l'SVG.
3. Il livello appare come un gruppo. Fai doppio clic per entrarci, o tasto destro → Ungroup (Shift+Ctrl+G / Shift+Cmd+G) se vuoi manipolare le forme una ad una.
4. Seleziona un tracciato. Nel pannello di destra, sezione Fill, clicca sul campione di colore: hex, tavolozza, contagocce. L'intera forma cambia colore, i bordi rimangono nitidi.
5. Per un logo monocromatico, seleziona tutte le forme nel gruppo e applica un singolo colore. Poi esportalo come SVG, PNG o PDF dalla sezione Export se il file finale non è più vettoriale.

Se Figma mostra un'immagine piatta invece di livelli vettoriali, il file conteneva un bitmap (un PNG incapsulato). Questo non succede con le esportazioni PixelToPath nei preset Bianco & Nero o Poster. Riconverti l'originale con uno di questi due modi, non Foto.

Canva: carica l'SVG e ricolora

Canva accetta gli SVG sia nella versione Free che Pro. La ricolorazione funziona quando il file è semplice: colori piatti, pochi nodi, niente sfumature. Questo è esattamente ciò che produce PixelToPath con i preset Poster o Bianco & Nero.

1. In Canva, apri un design. Pannello di sinistra → Caricamenti → Carica file. Scegli il tuo .svg (sotto i 3 MB; un'esportazione PixelToPath è ben al di sotto).
2. Una volta che il file è nei tuoi caricamenti, trascinalo sulla pagina. Ridimensionalo usando le maniglie: il vettore rimane nitido, anche nei formati story o A4.
3. Clicca sull'SVG. Nella barra degli strumenti appaiono i campioni di colore, uno per ogni tonalità nel file. Clicca su un campione, scegli il nuovo colore: Canva lo applica a tutte le forme di quella tonalità.
4. Se non appare alcun campione, l'SVG è troppo complesso (sfumature, troppi colori, tracciati stile Foto). Torna a PixelToPath, passa a Poster o Bianco & Nero, esporta nuovamente, importa nuovamente.

Canva raccomanda un profilo SVG 1.1, forme dello stesso colore raggruppate, e nessuna texture. I preset logo di PixelToPath rispettano già questi vincoli. Non è necessario passare per Illustrator per "preparare" il file.

WordPress: consenti il caricamento di SVG senza aprire vulnerabilità

WordPress blocca gli SVG di default, e non è un capriccio. Un SVG è XML: può contenere JavaScript, entità esterne, un payload XSS. Un visitatore, o un account Autore compromesso, che carica un SVG malevolo può eseguire codice nell'area di amministrazione. Da qui il blocco. Devi consentire il formato e igienizzare (sanitizzare) il file.

Non limitarti ad aggiungere image/svg+xml in functions.php. Senza igienizzare il file, apri una vulnerabilità. Il metodo sicuro: un plugin aggiornato che elimina script, eventi onload e entità XML. Safe SVG (10up), con oltre un milione di installazioni.

1. Nell'area di amministrazione di WordPress: Plugin → Aggiungi nuovo. Cerca Safe SVG (autore: 10up). Installa e attiva.
2. Vai su Impostazioni → Media. Limita il caricamento degli SVG agli amministratori (o a ruoli fidati). Non aprire il formato a tutti gli account Autore se il sito ha più collaboratori.
3. Media → Aggiungi nuovo. Rilascia il file .svg di PixelToPath. Il plugin lo igienizza durante l'importazione e mostra un'anteprima nella libreria, cosa che WordPress non fa in modo nativo.
4. In un articolo o pagina, inserisci un blocco Immagine e scegli l'SVG. Per il logo dell'intestazione, usa Personalizza / Denominazione del sito, o un blocco Immagine nel template del tema (Editor del sito).
5. Alternativa per sviluppatori: salta la libreria media. Posiziona il file nel tema (assets/logo.svg) e richiamalo nel template, oppure incorporalo (inline) per applicare stili con i CSS. Nessun caricamento, quindi nessuna superficie di attacco alla libreria media.

Safe SVG può anche limitare chi ha il diritto di caricare file. Mantieni il plugin aggiornato: l'igienizzazione dei file è il vero controllo, non solo la casella di controllo "consenti SVG".

Quale SVG PixelToPath incollare in questi strumenti?

L'editor accetta ciò che gli dai. Un cattivo preset si sconta al momento dell'importazione: troppe forme, colori non selezionabili, file rifiutato.

• Logo, icona, testo: Bianco & Nero o Poster. Questi sono colori piatti, Figma e Canva li ricolorano in un clic.
• Evita Foto se hai intenzione di cambiare i colori. Questa modalità crea una moltitudine di piccole forme; spesso Canva non mostrerà campioni utili.
• Ritaglia l'originale prima di convertire: meno sfondo, meno nodi, un SVG più pulito nel livello di Figma.
• Una variante per ogni utilizzo: un SVG monocromatico per Figma (linee guida), un SVG a colori per Canva (post), lo stesso file igienizzato per WordPress (intestazione).

Dove questo flusso di lavoro cambia il lavoro quotidiano

Non appena l'SVG si trova nello strumento, smetti di riconvertire per ogni variante:

• Linee guida Figma: il PNG del cliente diventa un componente che ricolori (primario, invertito, monocromatico) senza ridisegnarlo
• Pubblicazioni Canva: un SVG, sei colori della campagna, stories e caroselli nitidi
• Logo WordPress: un file nell'intestazione, nitido su mobile e Retina, più leggero rispetto al vecchio PNG
• Prodotto finale per freelance: consegni l'SVG più le istruzioni per Figma / Canva. Il cliente non è più bloccato
• Icone UI: importale in Figma in blocco, allineale su una griglia di 24 px, esporta il set

Mantieni i PNG per le foto. Per qualsiasi cosa che debba cambiare colore o rimanere nitida, la combinazione PixelToPath + Figma / Canva / WordPress è sufficiente.