Un SVG non ha pixel, quindi qui si parla di rendering, non di conversione

Tutti gli altri convertitori su questo sito lavorano su pixel già esistenti. Questo invece fa qualcosa di diverso, ed è proprio questa differenza che rende la pagina interessante. Un SVG non contiene nessuna immagine vera e propria. Contiene istruzioni: disegna un cerchio qui, riempi questo percorso con quel gradiente, posiziona il testo a queste coordinate. Trasformarlo in un PNG significa eseguire quelle istruzioni alla dimensione che scegli. Nulla viene stirato e nulla viene indovinato, perché non esiste una griglia di pixel originale da cui partire.

Perché probabilmente ti serve comunque il PNG

Il formato è eccellente ma quasi nessuno lo accetta. I client email non mostrano un SVG. Office si oppone quando provi a inserirne uno. I social network e la maggior parte dei moduli di caricamento lo rifiutano, e i software fuori dal mondo del design lo trattano come un file di testo, perché tecnicamente lo è. PNG è la versione che tutti accettano.

Grande non costa nulla qui

Ingrandire una fotografia inventa pixel che non sono mai stati catturati, per questo si vede sfocata a 2x e diventa illeggibile a 10x. Il rendering di un vettoriale non ha questo limite. Un'icona da 24 pixel renderizzata a 1024 pixel non è una semplice copia ingrandita: è lo stesso disegno eseguito di nuovo a 1024, con ogni curva e bordo calcolato per quella dimensione. Abbiamo testato proprio questo: un'icona 24x24 è tornata a 1024x1024 con colori identici ai valori originali, byte per byte, e bordi lisci anti-alias invece dei classici gradini.

Il consiglio pratico deriva da questo: esegui il rendering alla dimensione massima che userai davvero, non alla minima, perché il PNG che ottieni è una griglia fissa da quel momento in poi. Andare più grande ti costa solo qualche millisecondo.

Puoi scegliere la dimensione, oppure lo fa il file

Scrivi una larghezza e il disegno viene adattato mantenendo le proporzioni. Se chiedi a un logo 2:1 di essere 400x400, otterrai un 400x200 nitido, mai un quadrato schiacciato. Ci sono preset con un clic a 256, 512, 1024 e 2048, e un'opzione Originale che esegue il rendering alla dimensione dichiarata nello SVG. Su un file che dichiara 200x100, Originale restituisce esattamente 200x100. Il limite massimo è di 16.384 pixel per lato e 64 megapixel totali, che copre un rendering fino a 8000x8000.

Trasparenza, anche quella parziale

PNG supporta un vero canale alfa, quindi un logo con sfondo trasparente torna con sfondo trasparente, pronto per essere inserito su una slide o una pagina prodotto senza il classico riquadro bianco. La differenza tra un buon renderer e uno superficiale è la trasparenza parziale: ombre morbide, bordi sfumati, qualsiasi elemento impostato a mezza opacità. Su una forma dichiarata al 50% di opacità, il risultato ha un valore alfa di 128, esattamente la metà. Ogni rendering restituisce una vera immagine RGBA. Se preferisci appiattire la trasparenza, imposta lo sfondo su un colore pieno e scegli la tonalità esatta dal selettore colori.

Testo e gradienti, i due punti che di solito danno problemi

Il rendering server-side degli SVG fallisce in due punti prevedibili. I font possono mancare, quindi il testo scompare o appare con un carattere sbagliato. E i gradienti definiti una volta e richiamati tramite id non vengono risolti, così le forme risultano piatte o nere. Abbiamo verificato entrambi i casi. Il testo è stato renderizzato con bordi dei glifi puliti e anti-alias, e un gradiente lineare richiamato con url() è stato visualizzato correttamente da un colore all'altro. Se un file richiede un font che il server non possiede, viene usato un sostituto e il risultato lo segnala, invece di lasciarti scoprire il problema dopo.

Caricare l'SVG di qualcun altro qui è sicuro

Un SVG può legalmente contenere JavaScript e può puntare a risorse esterne su internet. Ecco perché i provider email bloccano il formato, ed è un motivo reale per fare attenzione con i file ricevuti da sconosciuti. Il rendering qui avviene tramite un motore vettoriale dedicato e non tramite un browser: gli script non vengono mai eseguiti e i riferimenti esterni non vengono mai scaricati. Nulla all'interno del file può essere eseguito, comunicare all'esterno o leggere altro. Quello che ottieni è lo stato statico reale del disegno, motivo per cui le animazioni vengono renderizzate solo al primo fotogramma invece che in movimento.

Veloce e ripetibile

Il classico tigre Ghostscript, 94,5 KB di percorsi bezier complessi e il solito test di tortura per i renderer SVG, è stato renderizzato in un PNG da 512 pixel in 53 millisecondi. Renderizzare lo stesso file due volte produce un risultato byte per byte identico, così puoi riprodurre esattamente lo stesso output. I file compressi .svgz vengono letti direttamente, e il formato viene rilevato dai byte stessi del file, quindi anche un file rinominato o senza estensione viene comunque renderizzato.

Un set di icone in un colpo solo

Più file vengono renderizzati con le stesse impostazioni e restituiti come un unico ZIP con i nomi originali. Tre file diversi chiamati tutti icon.svg tornano come icon.png, icon_1.png e icon_2.png invece che far sparire silenziosamente due di loro. Un file danneggiato o non SVG nel gruppo viene saltato e segnalato nel risultato invece di bloccare tutto il resto.

Cosa ottieni

• Un PNG renderizzato alla dimensione scelta, non una copia ingrandita di uno piccolo
• Proporzioni bloccate, quindi niente viene restituito stirato o schiacciato
• Pieno supporto alfa, incluse forme a mezza opacità e ombre morbide, oppure qualsiasi colore di sfondo tu scelga
• Testo e gradienti renderizzati invece che ignorati, con segnalazione delle sostituzioni dei font
• Nessuno script eseguito e nessun riferimento esterno scaricato, quindi un SVG sconosciuto è sicuro da caricare
• Nessun account, nessun watermark, e file eliminati dal server dopo un'ora

E dopo?

Un rendering a 4000 pixel è un file grande, quindi Comprimi PNG è il passo successivo consigliato prima di caricarlo su una pagina, e PNG in WebP lo ottimizza ulteriormente per il web. Se vuoi conservare anche il vettoriale, Comprimi SVG elimina prima i dati inutili dell'editor.