Da SVG a PNG

Come convertire un SVG in PNG

1. Trascina uno o più file SVG nell’area di caricamento, oppure cliccaci sopra per sceglierli. Puoi anche aprire Oppure incolla il codice SVG, incollare il markup e cliccare su Aggiungi il codice SVG.
2. Scegli la Dimensione di uscita: - Fattore di scala moltiplica la dimensione propria dell’SVG (2 dà un’immagine larga e alta il doppio); - Larghezza (l’altezza si adegua) o Altezza (la larghezza si adegua) mantiene le proporzioni; - Larghezza e altezza esatte impone entrambe le dimensioni; - Risoluzione (DPI) converte le dimensioni fisiche come 2in o 50mm ai DPI scelti.
3. Scegli un Formato: PNG, JPG o WebP. JPG e WebP hanno anche un cursore Qualità.
4. In Sfondo, lascia Trasparente oppure scegli Colore e imposta il Colore di sfondo.
5. Clicca su Converti in immagine. Ogni file ottiene una riga con l’anteprima, la nuova dimensione in pixel e un pulsante Scarica. Scarica tutto salva i file uno alla volta; Scarica ZIP li mette in un unico archivio.

Come viene calcolata la dimensione

Un SVG descrive forme, non pixel, quindi può essere disegnato nitido a qualsiasi dimensione. La sua dimensione «naturale» deriva dagli attributi width e height dell’elemento radice <svg>. Quando mancano, questo strumento usa il viewBox (per esempio viewBox="0 0 24 24" dà 24 × 24), come fanno i browser. Se l’SVG non ha né l’uno né l’altro, si ricorre al valore predefinito dei browser, 300 × 150.

Le lunghezze in unità fisiche vengono convertite con la regola CSS di 96 pixel per pollice: 1 in = 96 px, 1 cm ≈ 37,8 px, 1 pt = 1,33 px. Per questo DPI (96 = dimensione originale) indica 96: a 300 DPI, un’icona dichiarata come width="1in" diventa larga 300 pixel, che è ciò che si aspetta una tipografia.

Con Larghezza e altezza esatte, un disegno con proporzioni diverse dal riquadro viene centrato con bande ai lati, secondo la regola preserveAspectRatio dell’SVG stesso; non viene mai deformato, a meno che il file non lo richieda.

I browser non possono creare un canvas più grande di circa 16,7 milioni di pixel (per esempio 4096 × 4096). Se chiedi di più, la dimensione viene ridotta all’immagine più grande possibile e un messaggio ti indica la dimensione finale.

PNG, JPG o WebP?

• PNG è senza perdita e mantiene la trasparenza: la scelta migliore per icone, loghi e diagrammi.
• JPG non ha trasparenza, quindi le aree trasparenti vengono riempite con il colore di sfondo. Usalo per illustrazioni grandi in cui il peso del file conta più dei bordi netti.
• WebP mantiene la trasparenza e di solito è più leggero del PNG; tutti i browser attuali lo visualizzano.

Sicurezza e limiti

Il tuo SVG non viene mai inserito nella pagina. Viene disegnato da un indirizzo blob privato come semplice immagine, una modalità in cui i browser non eseguono script né caricano altro. Di conseguenza, i riferimenti esterni non vengono caricati: i web font di Google Fonts, le immagini collegate tramite URL e i file CSS esterni vengono ignorati, quindi il testo può apparire con un font predefinito. Per mantenere l’aspetto esatto, converti il testo in tracciati nel tuo editor o incorpora le immagini come data URI prima della conversione. I font installati sul tuo computer possono comunque essere usati.

Nulla viene caricato online: rendering e codifica avvengono nel browser.