PNG a SVG per Canva e Figma

Perché un'immagine PNG diventa sfocata in Canva e Figma

Un PNG è una griglia di pixel. Ingrandiscilo per un banner in Canva o un grande frame in Figma e i bordi diventano sfocati e frastagliati. La conversione da PNG a SVG per Canva e Figma sostituisce i pixel con forme vettoriali, così la grafica rimane nitida a qualsiasi dimensione.

Aiuta anche se hai creato un logo con il piano gratuito di Canva. Caricare un SVG su Canva non è limitato alla versione Pro, ma scaricare il design in formato SVG è una funzione riservata ai piani a pagamento. Scaricalo invece come PNG e segui i passaggi per convertire la PNG di Canva in SVG qui.

Regole di Canva per il caricamento di un file SVG

Il centro assistenza di Canva elenca alcuni requisiti per i caricamenti SVG. Ecco come ciascuno viene mappato a SVGR.

Cosa vedrai quando importi il SVG in Figma

Figma importa un SVG come livelli vettoriali, quindi puoi selezionare, ricalibrare e ridimensionare le forme direttamente. Questo è il punto di una conversione da PNG a SVG in Figma: ottieni forme modificabili invece di un'immagine piatta.

SVGR impila le forme invece di ritagliare fori. Il contornodi una O, o lo spazio interno di un anello, è una forma colorata come lo sfondo posizionata sopra una forma solida, quindi in Figma vedrai livelli sovrapposti. Questo aspetto è corretto su uno sfondo abbinato, ma risalta su qualsiasi altro colore.

Per creare un vero buco, seleziona la forma superiore insieme a quella sottostante e applica Sottrai dalle operazioni booleane di Figma.

Testo: forme tracciate o testo live?

Con il riconoscimento del testo disattivato, le lettere vengono tracciate come forme. Sembra esattamente l'originale e funziona in entrambe le app, ma non è possibile riscriverlo.

Con questa opzione attivata, il testo rilevato diventa testo SVG live e SVGR esegue anche il affinamento dei colori, che può aggiungere riempimenti con sfumatura. Canva richiede che il testo sia espanso, quindi disattivalo lì. Figma importa il testo SVG come testo live, con alcune limitazioni: l'opacità del testo viene ignorata, le dimensioni dei caratteri basate su em vengono lette come pixel e il letter-spacing sui singoli span di testo viene ignorato.

Per i loghi, disattiva il riconoscimento del testo. Se hai bisogno di titoli modificabili, riscrivili in Figma con il font corretto.

Limiti della conoscenza

• La conversione da PNG a SVG per Canva e Figma funziona per grafiche piatte, non per foto. Una foto tracciata diventa un file grande e complesso; per Canva, carica la foto stessa come JPG o PNG.
• Le PNG dai bordi morbidi possono restituire colori quasi duplicati, come diverse tonalità di nero quasi identiche. Ricolorale in un unico colore in Figma o in un altro editor se desideri una tavolozza pulita.
• Come Canva ti permetta di ricolorare un SVG caricato dipende dal file, e non l'abbiamo testato su ogni design. Carica un file di prova prima di creare un modello basato su di esso.
• Le forme sovrapposte contano anche in Canva. Con uno sfondo trasparente, l'interno di una O mantiene il suo colore di sfondo originale e appare come una macchia su qualsiasi altro colore. Ritaglia questi buchi in Figma, oppure con Percorso > Differenza in Inkscape, prima di caricare.
• Lo sfondo trasparente rimuove la forma dipinta nel colore presente negli angoli dell'immagine, che è ciò che le persone intendono per sfondo. Se la tua opera si estende fino a tutti e quattro gli angoli, o se gli angoli hanno colori diversi, nulla viene rimosso e lo sfondo rimane: fornisci all'opera un margine uniforme e chiaro e riprova la conversione. Le aree completamente racchiuse dall'opera non vengono mai rimosse, e un PNG che ha già un canale di trasparenza viene lasciato così com'è.
• Le curve sono tracciate come molti segmenti retti brevi. Tracciate da un'immagine piccola, possono apparire leggermente angolari quando ingrandite, quindi inizia dalla copia più grande disponibile.