SVG o PNG: vettoriale o pixel per loghi e grafiche

SVG o PNG significa in realtà vettoriale contro pixel. Un file SVG memorizza le forme come istruzioni (disegna qui un cerchio, riempilo con questo colore), così un browser o una stampante lo ridisegna nitido a qualsiasi dimensione, da una favicon di 16 pixel a un’insegna. Un PNG memorizza una griglia fissa di pixel colorati, quindi è perfetto alla sua misura e morbido se lo ingrandisci. Usa l’SVG per loghi, icone e grafiche semplici sul web e in stampa. Usa il PNG per foto, grafiche con texture e tutto ciò che carichi sui social.

Cos’è davvero un file SVG

SVG sta per Scalable Vector Graphics ed è testo semplice. Aprine uno in un editor di codice e vedrai markup leggibile, non rumore. Per questo gli SVG sono minuscoli per le forme semplici, puoi cambiarne il colore con il CSS e i motori di ricerca e gli screen reader possono leggere il testo al loro interno.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#db2777"/>
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="28" fill="url(#g)"/>
  <path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>

Un PNG dello stesso simbolo richiede un file separato per ogni misura a cui vuoi che sia nitido, e nessuno può essere ricolorato senza esportarlo di nuovo. La documentazione SVG di MDN tratta il formato per intero.

SVG e PNG a confronto

SVG o PNG per un logo

Tieni il logo master in SVG. È l’unico file che serve a ogni uso futuro: l’intestazione di un sito, un banner di 4 metri, un ricamo, una carta intestata, una favicon. Poi esportane i PNG per i posti che non accettano vettori, soprattutto piattaforme social, firme email e alcuni strumenti di presentazione.

Quando il PNG è la scelta giusta

Il vettoriale funziona solo quando l’immagine si può descrivere con forme. Appena un’immagine ha dettaglio fotografico, luce morbida, grana o migliaia di sottili variazioni di colore, un PNG è più leggero e più fedele. Tracciare una foto in un SVG produce un file che è insieme più pesante e peggiore.

• Fotografie e collage fotografici.
• Grafiche con texture: grana, carta, pennellate, effetti pellicola.
• Post social, storie e caroselli, dato che le piattaforme accettano solo pixel.
• Screenshot e tutto ciò che viene catturato da uno schermo.
• Sfondi ricchi con luce a più livelli e rumore.

SVG o PNG per un sito web

In un sito, usa SVG inline o un file SVG per loghi, icone e illustrazioni, e formati moderni per le foto. Le icone SVG scalano con il testo, possono usare currentColor per seguire il tuo tema e non servono file separati per gli schermi ad alta densità. Per le immagini raster, WebP è di solito una scelta migliore del PNG sulle tue pagine.

Come convertire un SVG in PNG

1. 1

   Decidi la misura più grande che ti serve

   Un’immagine profilo da 1080×1080 o una firma email da 1200×400 (il doppio della sua misura mostrata di 600×200). Esporta una volta sola a quella misura invece di ingrandire dopo.

2. 2

   Esporta dal file sorgente

   In Figma, Illustrator o Inkscape, esporta il frame come PNG alla misura scelta. Esportare dal vettoriale mantiene nitido ogni bordo.

3. 3

   Mantieni la trasparenza attiva

   Lascia lo sfondo vuoto così il PNG ha un canale alfa. Vedi sfondo trasparente per verificarlo.

4. 4

   Controlla al 100%

   Guarda i tratti sottili e il testo piccolo alla misura reale. Se si spezzano, semplifica il logo per gli usi piccoli invece di consegnare un file impastato.

Fare il contrario, da PNG a SVG, non è una conversione ma un ridisegno. La tracciatura automatica funziona per un logo piatto e deciso e fallisce per tutto ciò che ha texture o bordi morbidi. Se il tuo logo esiste solo come PNG, fallo ridisegnare una volta come vettoriale; ogni file successivo ne trarrà vantaggio.

Le esportazioni Pro di Gradiently coprono entrambi i lati: un design può uscire come SVG per il web e la stampa, o come PNG trasparente per le piattaforme, dallo stesso file. Esportare SVG e PNG trasparente mostra come, e PNG o JPG chiarisce l’altra scelta comune.