Convertitore da SVG a PNG

Che cos’è un SVG, e perché la rasterizzazione va in una sola direzione

Un SVG non è un’immagine. È la descrizione di un’immagine — un elenco di forme, tracciati, colori e testo, ciascuno con le proprie coordinate, scritto in un file di testo che qualcos’altro legge e disegna. Un JPG o un PNG sono l’opposto: una griglia di pixel, decisa una volta per tutte quando il file è stato scritto. Questa sola differenza sta dietro a tutto ciò che c’è in questa pagina, compresa l’unica domanda che questo convertitore deve farti e che gli altri due non fanno mai.

• È testo che puoi leggere. Apri un SVG in un qualsiasi editor di testo e le forme sono lì scritte davanti a te: è anche così che puoi verificare di persona quale dimensione il file dichiari e a che cosa rimandi.
• Non ha alcuna risoluzione. Lo stesso file è un’icona nitida grande come un punto fermo ed è un manifesto nitido su una parete, perché il disegno viene ricalcolato da capo da ciò che lo mostra anziché essere conservato da qualche parte.
• Riesce bene con la grafica piatta — loghi, icone, schemi, grafici, mappe, tutto ciò che è disegnato anziché fotografato. Con una fotografia è invece un disastro: non ha forme da descrivere e richiederebbe una riga di file per ogni pixel.
• Rasterizzarlo è ciò che fa questa pagina, e il motivo è quasi sempre un posto che non accetta il formato: un modulo di caricamento, un vecchio editor di immagini, un modello di documento o di diapositive, l’anteprima di un social, un messaggio di posta, un servizio di stampa.

Trasformarlo in un PNG fissa il disegno in pixel a una dimensione scelta, ed è una porta che si apre in un senso solo. Le forme non restano nel risultato e nessuna impostazione qui le conserva, quindi ingrandire il PNG dopo ne ingrandisce i pixel invece di ridisegnare qualcosa, e questa pagina non scrive alcun formato vettoriale — riportare un’immagine a essere forme è un problema diverso con risposte diverse, non il rovescio di questo. Conserva quindi l’SVG. Quello che scarichi qui è una copia fatta per un solo scopo e una sola dimensione, e la via per averne una seconda è convertire di nuovo l’originale, non ridimensionare ciò che hai già.

Da dove viene la dimensione che compare nei campi

Poiché un vettore non ha pixel propri, qualcosa deve decidere con quanti esce, e questa pagina comincia leggendo ciò che il file stesso lascia intendere. Quel numero finisce nei campi della larghezza e dell’altezza, e una frase accanto a essi nomina il file e dice da quale di esattamente tre posti il numero è stato preso. Vale la pena leggerla prima di convertire, perché i tre non sono ugualmente affidabili e solo tu sai quale intendevi.

• Il file dichiara una dimensione propria, in pixel. È il più solido dei tre casi: chi ha esportato il disegno ha detto quanto grande dovesse essere, e i campi si limitano a ripeterlo.
• Il file indica la propria dimensione in unità fisiche — pollici, centimetri, millimetri, punti o pica — ed è stata convertita a novantasei pixel per pollice, che è ciò che il web intende per pollice e non una misura del tuo schermo. Un disegno preparato per la stampa arriva spesso così, e la dimensione in pixel che ne esce è la conversione fedele di un numero che di pixel non parlava affatto.
• Il file non dichiara alcuna dimensione utilizzabile, quindi la dimensione è stata misurata dal suo viewBox. È il caso da guardare due volte: un viewBox è il sistema di coordinate in cui le forme sono disegnate e non una dimensione scelta da qualcuno, perciò un’icona le cui coordinate vanno da zero a ventiquattro arriva chiedendo di diventare un’immagine grande come un punto fermo. I set di icone, inoltre, sono spesso scritti con una larghezza e un’altezza in percentuale, che è la dimensione di qualcosa che questo file non ha e viene letta come nessuna dimensione: anche quelli finiscono qui.

Qualunque dei tre abbia risposto, il numero viene arrotondato a pixel interi una volta sola, nel momento in cui viene letto, perché un canvas si alloca in pixel interi e non c’è dove mettere una frazione. Questo conta per una cosa in particolare: tutto il resto lavora sul numero arrotondato che hai sotto gli occhi e non sulla frazione che gli sta dietro, quindi il doppio di un disegno mostrato come largo trentun pixel è sessantadue e non i sessantatré che darebbe un secondo arrotondamento. La dimensione sullo schermo e la dimensione con cui si fanno i conti sono la stessa dimensione, che è l’unica disposizione in cui i campi significano ciò che dicono.

Scegliere la dimensione che ti serve — e il disegno che non ne dichiara nessuna

La dimensione che il file lascia intendere è sempre e soltanto un punto di partenza, e viene offerta come tale anziché imposta. Tutto nei due campi è disposto perché il caso ordinario non costi alcun pensiero e il caso esatto resti comunque a portata di mano, ed è in questo che consiste tutta la differenza fra questa pagina e le sue due sorelle — una fotografia viene convertita alla dimensione che ha già, e non c’è nulla da decidere.

• Scrivi una larghezza e l’altezza la segue, scrivi un’altezza e la larghezza la segue, così il disegno mantiene le sue proporzioni senza che tu debba calcolare nulla. È l’impostazione predefinita perché deformare un logo per sbaglio è l’errore che vale la pena rendere impossibile.
• Togli la spunta a «Mantieni le proporzioni» quando ti serve davvero un riquadro esatto — uno spazio per un banner, un avatar di misura fissa, un foglio di icone — e i due campi diventano indipendenti. Il disegno viene allora stirato fino a riempire quello che hai chiesto, che è ciò che volevi ed è anche il motivo per cui si tratta di un gesto deliberato e non dell’impostazione predefinita.
• La riga dei moltiplicatori è la via rapida verso le dimensioni che le persone vogliono davvero, e ciascuno di essi è misurato sulla dimensione che il file dichiara e non su ciò che si trova nei campi in quel momento. Premere due volte lo stesso moltiplicatore ti dà quindi due volte la stessa risposta, invece di sommarsi fino a qualcosa che non avevi chiesto.
• Un moltiplicatore che non ha risposta viene offerto come non disponibile e non come un pulsante che non fa nulla. Moltiplicare un disegno già enorme può raggiungere una dimensione che nessun formato di immagine sa esprimere, e un controllo che rifiutasse in silenzio sarebbe peggio di uno che ti mostra di non potercela fare.

Poi c’è il file che non dichiara nulla: né una larghezza e un’altezza che questo strumento sappia leggere, né un viewBox da misurare. È più frequente di quanto sembri — un disegno esportato direttamente da certi editor, oppure uno scritto a mano per una pagina che avrebbe dovuto dargli la dimensione con i CSS. Dentro non c’è davvero alcuna dimensione, quindi i campi si aprono vuoti, non compare alcuna frase su da dove venga un numero, non c’è nulla da moltiplicare né una proporzione da mantenere, e la riga rifiuta e ti chiede una larghezza e un’altezza. Quel rifiuto è il punto, non un fallimento: un browser a cui si consegni un file del genere ripiega su un riquadro piccolo e fisso che non ha scelto nessuno, ed essere interrogati una volta è meglio che scaricare quello e accorgersene dopo.

Una coppia che non è una dimensione viene rifiutata con parole sue, ed è l’altra metà della stessa cura. Lo zero, un numero negativo, mezzo pixel o un numero più grande di quanto un formato di immagine sappia esprimere vengono ciascuno rifiutati anziché arrotondati, tagliati o sostituiti in silenzio con la dimensione propria del file — una conversione a una dimensione che non ha chiesto nessuno è esattamente ciò che questa pagina esiste per non fare. E se quello che hai scelto è una fotografia anziché un disegno, i campi della dimensione non compaiono affatto: un’immagine di pixel viene convertita nelle proprie dimensioni, e un controllo che non potrebbe cambiare nulla è peggio di nessun controllo.

In quale formato rasterizzare

Questa pagina si apre su PNG perché è la risposta giusta per quasi ogni vettore, e gli altri formati sono a un clic anziché dietro un’altra pagina. Stai scegliendo fra un formato che conserva i pixel esattamente e due che ne cedono una parte in cambio di un file più leggero, e un disegno fa pendere la bilancia in modo insolito: il colore piatto e i bordi netti sono precisamente il contenuto che la compressione con perdita tratta peggio.

• PNG è l’impostazione predefinita ed è di solito la fine della discussione. Conserva esattamente il disegno rasterizzato, porta con sé la trasparenza e comprime straordinariamente bene le zone piatte di un solo colore — che è in gran parte ciò che sono un logo o un’icona, quindi il file risulta spesso più leggero di quanto la fama del formato lasci credere.
• JPG conviene sceglierlo solo quando qualcosa dall’altra parte lo pretende. Non sa conservare la trasparenza in alcun modo, quindi prima va dipinto un colore di sfondo dietro al tuo disegno, e la sua compressione posa una frangia grigia proprio lungo i bordi netti e le lettere, che sono la ragione per cui hai rasterizzato il vettore.
• WebP è la risposta intermedia per una pagina web: porta con sé la trasparenza ed è di solito più leggero del PNG. Qui è con perdita a ogni impostazione della qualità, estremo superiore del controllo compreso, quindi è una buona scelta per un’immagine destinata a una pagina e una cattiva scelta per una copia di riferimento che modificherai ancora.
• Nessuno dei tre è un vettore, e questa pagina non scrive alcun formato vettoriale. Se ti serve un file che scala, l’SVG che hai già è proprio quello — conservalo, e considera qualunque cosa scarichi qui come una copia fatta per un solo posto.

Il controllo della qualità compare solo per i due formati che hanno qualcosa da cedere, cioè JPG e WebP; PNG non butta via nulla, quindi non viene offerto alcun controllo invece di uno che se ne starebbe lì senza fare nulla. Ogni riga riporta il peso con cui il file è uscito, così che l’affare che stai facendo sia una cifra davanti a te. Muovere quel controllo ricodifica, dove può, un’immagine già disegnata invece di rasterizzare di nuovo il disegno, mentre cambiare la dimensione impone eccome di disegnarlo un’altra volta — ed è l’ordine giusto, perché la seconda è quella che produce davvero pixel diversi.

Che cosa una rasterizzazione non può portare con sé

Tutto qui viene fatto con gli strumenti di disegno già presenti nel tuo browser: il file gli viene consegnato come immagine, disegnato una volta alla dimensione che hai scelto e riscritto nel formato che hai chiesto. È questo che permette allo strumento di funzionare senza caricare nulla, senza installare nulla e senza scaricare nulla oltre alla pagina stessa — e per un vettore decide anche che cosa il risultato possa contenere, perché un SVG è un documento e non un blocco di pixel, e un documento può chiedere delle cose.

Consegnato nel modo in cui viene consegnato qui, non le ottiene. Nulla dentro il file viene eseguito e nulla fuori dal file viene scaricato, ed è una proprietà voluta e davvero preziosa: un SVG può contenere uno script e può contenere un rimando a un indirizzo da qualche parte, che verrebbe richiesto nel momento stesso in cui il disegno venisse mostrato. Aprire qui il disegno di uno sconosciuto non fa né l’una né l’altra cosa. Che cosa costi questa sicurezza è scritto qui sotto, e i primi due punti vengono annunciati nella riga anziché lasciati a te da notare.

• Tutto ciò a cui il file rimanda fuori da sé non si caricherà — un’immagine collegata, un foglio di stile, un carattere. Vale per un indirizzo sul web e vale allo stesso modo per un file che sta nella stessa cartella, che è di gran lunga il caso più frequente ed è il motivo per cui l’avviso dice che quelle parti non si caricheranno anziché dire che stavano su un altro server. Ciò a cui servivano manca nel risultato, e il rimedio è incorporarle nel disegno e convertirlo di nuovo.
• Il testo viene tracciato con i caratteri installati su questa macchina. Le lettere sono nel risultato e a te sembrano giuste, ma lo stesso file rasterizzato su un altro computer può scegliere un altro carattere e uscirne come un’immagine diversa. Se le forme esatte contano, converti il testo in tracciati nel programma che ha disegnato il file, e allora non si va più a cercare nulla.
• Tutto ciò che il disegno fa nel tempo non è nel risultato. L’uscita è un’immagine fissa in ogni formato offerto, quindi un file che si anima da sé contribuisce con l’unico istante che è stato disegnato, e nemmeno ciò che è interattivo sopravvive al viaggio.

Due limiti dell’uscita conviene dirli chiaramente anziché lasciarli scoprire. Il PNG lo scrive il compressore del browser stesso, discreto ma non esaustivo, quindi un ottimizzatore specializzato potrebbe ancora togliere una fetta al file senza cambiarne un solo pixel; e il WebP è una codifica con perdita a qualunque impostazione, perché la modalità senza perdita del formato a un browser non si può proprio chiedere. Entrambi si potrebbero alzare portando nella pagina un vero codificatore compilato per girarci dentro, e questo strumento apposta non lo fa: sarebbe qualche centinaio di kilobyte che ogni visitatore scarica perché una parte di loro ottenga un file un po’ più leggero, su un sito in cui ogni altra pagina funziona nel momento in cui compare. Su questa pagina in particolare porterebbe per giunta meno di quanto sembri: la rasterizzazione è il disegno che il browser stesso fa del tuo vettore, e un codificatore non può cambiare come è stato disegnato.

Che cosa ti dice ogni riga sul tuo disegno, e quando rifiuta

Un convertitore che lavora in silenzio è il modo in cui qualcuno si ritrova con un logo su fondo nero, o con un disegno a cui manca l’immagine a cui rimandava, e se ne accorge giorni dopo e da tutt’altra parte. Ogni riga qui porta un breve resoconto di ciò che è stato davvero fatto a quel file — e non porta proprio nulla quando non è successo niente di notevole, ed è questo che rende gli avvisi qualcosa per cui vale la pena fermarsi. Un vettore ne incontra un insieme diverso da quello di una fotografia, e tre degli avvisi dello strumento non possono riguardarlo affatto: un disegno non ha dati della fotocamera da perdere, non ha nulla che dica da che parte stia il suo alto e non ha fotogrammi da lasciare per strada.

• Qualcosa a cui il disegno rimanda non si caricherà. Compare per un file che richiama un’immagine, un foglio di stile o un carattere che non stanno dentro di esso, sia tramite un indirizzo sia tramite un percorso lì accanto, ed è la spiegazione di un risultato uscito con un pezzo mancante.
• Il testo è stato tracciato con i caratteri di questa macchina. Compare solo dove il disegno mette davvero delle lettere sul canvas, quindi un file con dentro un elemento di testo vuoto non dice nulla, e un disegno senza alcun testo non dice nulla nemmeno lui.
• La trasparenza è stata riempita, e con quale colore. Convertire in JPG obbliga a mettere qualcosa dietro al disegno, e un controllo del colore compare non appena un file del tuo elenco ne ha davvero bisogno. Questo avviso viene misurato anziché dato per scontato: aspetta che nel disegnato sia stato trovato un pixel davvero trasparente, quindi un disegno la cui grafica copre l’intera immagine si converte in JPG senza dirne nulla.
• Il nome e il contenuto non concordano. Il formato si decide dal contenuto del file e mai dalla sua estensione, quindi un disegno che qualcuno ha salvato con la terminazione sbagliata viene letto e convertito correttamente come l’SVG che è — e te lo si dice, perché è una cosa vera sul tuo file che probabilmente non sapevi.
• Il WebP a questa impostazione è comunque con perdita. Rasterizzare un disegno e poi chiedere l’estremità superiore del controllo della qualità dà la sensazione che debba tornare indietro esattamente ciò che è stato disegnato, e non è così — è questa la convinzione che l’avviso esiste per correggere, ed è per questo che compare lì e in nessuna posizione più bassa.

Dove un file non si può convertire affatto, lo strumento dice perché anziché produrre qualcosa. Un file che non è nessuno dei formati che legge viene nominato e rifiutato, e così pure uno che è sì un formato ammesso ma il cui inizio non si riesce a leggere — che per un disegno vuol dire il suo tag di apertura, l’unica cosa che un vettore abbia in luogo di un’intestazione. Un file con un disegno da qualche parte dentro una pagina web non è un file di immagine e viene rifiutato in quanto tale, e così pure un disegno che il tuo browser si rivela incapace di disegnare, per quanto integro sembrasse da fuori. Nulla viene indovinato, e nulla di fatto a metà viene restituito come se fosse finito.

Il rifiuto in cui è più probabile imbattersi qui è quello sulla dimensione, ed è un fatto che riguarda questa pagina più che il tuo file: un moltiplicatore è a un clic, a un disegno si può chiedere volentieri qualunque dimensione, e in un vettore non c’è nulla che ti fermi. A fermarti è il browser, che tiene un’immagine soltanto fino a una certa superficie — una superficie diversa su un telefono e su un computer da tavolo, e diversa ancora fra due browser sulla stessa macchina. Oltrepassarla non produce alcun errore, solo un’immagine vuota di pochi kilobyte che sembra una conversione finita finché non la si apre. Perciò questo strumento scrive un pixel noto nell’immagine alla dimensione che hai chiesto e lo rilegge subito, prima che venga tracciata una sola forma; se non torna indietro, ricevi il rifiuto con la dimensione dentro e nessun file. Da nessuna parte si confronta qualcosa con un numero fisso, quindi il limite in cui incappi è quello del tuo dispositivo e mai uno scelto per qualcun altro.

Perché il tuo disegno non lascia mai questa scheda

Un disegno rivela più di una fotografia, perché un disegno è un file di testo e lo si può leggere. I nomi dei livelli, il nome di chi lo ha esportato, un commento che qualcuno ci ha lasciato dentro, l’indirizzo di ogni pezzo a cui rimandava: tutto questo è scritto per esteso nel file, e nulla di ciò va da nessuna parte. Il tuo SVG viene letto da questa scheda del browser e rasterizzato dal processore della tua macchina. All’altro capo di questa pagina non c’è alcun server che potrebbe accettarne uno: questa è quindi una descrizione di come lo strumento è fatto, e non una promessa su come viene gestito.

Bastano pochi secondi nel pannello di rete degli strumenti per sviluppatori del browser, e per un disegno le cose da guardare sono due anziché una. Non esce nulla che porti con sé il tuo file, e non esce nulla nemmeno per conto del file, per quanti indirizzi vi siano scritti dentro. Una volta caricata, la pagina è una manciata di file statici senza codice in esecuzione altrove: puoi quindi scollegarti del tutto dalla rete e continuare a rasterizzare quanto ti pare.

• Un disegno che non manderesti a uno sconosciuto — un logo non ancora annunciato, la pianta di un edificio, lo schema di qualcosa di interno — si può rasterizzare qui senza che lasci affatto la tua macchina.
• Ciò che esce dalla rasterizzazione resta in questa scheda finché non lo salvi, e chiudere la scheda è tutta la cancellazione che serve. Né il disegno che hai portato né l’immagine che ne è stata ricavata vengono ricordati da una visita all’altra.
• Un disegno arrivato da un posto di cui non ti fidi del tutto si può aprire qui senza pericolo, perché nulla al suo interno viene eseguito e nulla a cui rimanda viene scaricato. Rasterizzarlo è anche un modo per ripulirlo: quello che scarichi sono pixel, e i pixel non possono chiedere nulla.