Come convertire un logo SVG in PNG alla dimensione giusta
Aggiornato:
L'SVG è il formato ideale per un logo: è disegnato con forme, non con pixel, e resta nitido a qualsiasi dimensione. Ma presentazioni, social network, firme e-mail e molti costruttori di siti accettano solo immagini bitmap come il PNG. Convertire è facile; azzeccare la dimensione è ciò che spesso va storto. Lo abbiamo provato con il logo di questo sito.
Perché il PNG
Il PNG è il formato bitmap più vicino a ciò che offre l'SVG: senza perdita, con bordi netti e sfondo trasparente, così il logo resta pulito su qualsiasi colore.
Converti l'SVG
- Apri SVG in PNG.
- Carica il file SVG.
- Scarica il PNG: lo sfondo resta trasparente.
Azzecca la dimensione
Il PNG viene disegnato alla dimensione che l'SVG dichiara: gli attributi width e height, oppure il viewBox se mancano. Il nostro logo è un buon esempio della trappola. Il file dichiara solo viewBox="0 0 32 32", quindi il PNG è uscito di 32 × 32 pixel: va bene per la scheda del browser, non per una presentazione.
La correzione richiede un minuto. Apri l'SVG in un qualsiasi editor di testo, trova il tag <svg> iniziale e aggiungi width e height con le stesse proporzioni del viewBox, per esempio width="512" height="512". Salva e converti di nuovo: il logo viene ridisegnato dalle sue forme alla nuova dimensione.
Cosa abbiamo misurato
Abbiamo convertito il nostro logo da 304 byte dopo aver dichiarato quattro dimensioni diverse. Ogni PNG è stato ridisegnato dalle forme, quindi anche il più grande ha bordi perfettamente puliti, e i file restano piccoli perché un logo è quasi tutto colore piatto.
| Dimensione dichiarata nell'SVG | PNG ottenuto | Peso del PNG |
|---|---|---|
| Solo viewBox (32 × 32) | 32 × 32 px | 0,7 KB |
| width e height 512 | 512 × 512 px | 11,7 KB |
| width e height 1024 | 1024 × 1024 px | 25,7 KB |
| width e height 2048 | 2048 × 2048 px | 60 KB |
Perché non ingrandire un PNG piccolo?
Abbiamo provato anche questo. Allargato a 512 pixel in un programma di grafica, il PNG da 32 pixel è diventato un quadrato morbido e sfocato: il programma può solo indovinare i pixel mancanti. La versione ridisegnata dall'SVG a 512 pixel era nitida. Torna sempre all'SVG e converti alla dimensione che ti serve, invece di ingrandire un PNG che hai già.
Altri formati dallo stesso SVG
SVG in WebP mantiene lo sfondo trasparente e ha dato un file più leggero: 5,6 KB per il logo da 512 pixel contro 11,7 KB in PNG, ottimo per i siti web. Anche SVG in JPG funziona, ma il JPG non ha trasparenza, quindi lo sfondo diventa bianco. Per la stampa scegli SVG in PDF: il logo resta un disegno vettoriale, nitido a qualsiasi dimensione di stampa, e il nostro pesava 1,2 KB qualunque fosse la dimensione dichiarata.
Attenzione ai font
Se la scritta del logo usa un font né incorporato né convertito in tracciati, può essere disegnata con un font simile. I grafici di solito convertono il testo in tracciati prima di consegnare un logo; se il tuo appare diverso, chiedi una versione con tracciati. Le immagini che l'SVG collega da altri siti non vengono caricate.
Come abbiamo fatto la prova
Abbiamo usato il file del logo servito da questo sito, senza modifiche a parte larghezza e altezza aggiunte, e lo abbiamo convertito con i convertitori SVG di questo sito, che disegnano l'immagine con librsvg sullo stesso software dei nostri server. Il peso dei file del tuo logo dipenderà da colori e dettagli, ma la regola vale per ogni SVG: la dimensione dichiarata decide la dimensione del PNG.
Per saperne di più: MDN — SVG: Scalable Vector Graphics