Un logo arriva in due file: logo.svg a 3 KB e logo.png a 40 KB. Entrambi sembrano uguali in una scheda del browser Soffiateli per riempire una schermata del proiettore e solo uno rimane nitido Cercate di caricarli su un profilo social e solo l'altro è accettato E se tutto ciò che avete è il PNG, gli strumenti che promettono di & quot; convertite PNG in SVG" consegnate qualcosa che tecnicamente è un SVG ma non il file che il vostro designer avrebbe fatto.
Questa guida spiega la differenza tra i due formati in termini di ciò che ogni file memorizza, quando usare quale, cosa succede quando si esegue il rendering di un SVG su pixel e cosa può e non può recuperare il tracciamento di un PNG in forme vettoriali Include numeri reali dal motore di tracciamento dietro i convertitori Toolz e si trova sotto il hub degli strumenti di immagine.
tl; dr: SVG è un formato vettoriale: memorizza le forme come geometria, quindi scala a qualsiasi dimensione senza sfocare ed è ideale per loghi, icone e diagrammi PNG è un formato raster: memorizza una griglia fissa di pixel, senza perdite, che si adatta a screenshot, grafica dettagliata e ovunque accetti solo immagini Passare da SVG a PNG è esatto alla dimensione che si sceglie; utilizzare il Convertitore da SVG a PNG a 2x o 4x per output nitidi Passare da PNG a SVG è il tracing, che ricostruisce le forme dai pixel e non recupera un design originale Funziona per loghi piatti e line art, e fallisce sulle foto Tutte le conversioni qui girano lato client, niente caricato, gratis, nessuna iscrizione.
Qual è la differenza tra SVG e PNG?
SVG descrive un'immagine come istruzioni per disegnarla, mentre PNG memorizza il disegno finito come pixel Tutto il resto dei due formati deriva da quell'unica differenza.
Un file SVG, definito dal W3C in Grafica vettoriale scalabile (SVG) 2, è testo XML Elenca percorsi, cerchi, rettangoli, gradienti e testo, ciascuno con coordinate e colori Niente in esso dice quanti pixel ha l'immagine Quando un browser la visualizza, il renderer elabora quali pixel ogni forma copre alla dimensione sullo schermo, motivo per cui lo stesso file è nitido su un telefono e su un monitor 5K.
Un file PNG, specificato dal W3C come Grafica di rete portatile e pubblicato come ISO/IEC 15948, è una griglia di pixel colorati compressi con DEFLATE La compressione è senza perdita di dati, quindi i pixel che decodifichi sono esattamente i pixel che sono stati salvati Un PNG può trasportare un canale alfa completo e fino a 16 bit per canale Ciò che non può fare è aggiungere dettagli: un PNG 512 x 512 mostrato a 2048 x 2048 ha ogni pixel allungato su un blocco 4 x 4 e i bordi diventano morbidi o a blocchi.
Ecco lo stesso semplice badge della fonte SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Quelle quattro righe di markup sono l'intera immagine e rimangono quattro righe sia che tu la visualizzi a 240 pixel di larghezza o 24.000. La versione PNG dello stesso badge a 240 x 80 contiene 19.200 pixel e a 960 x 320 ne contiene 307.200.
SVG vs PNG: quale formato devo usare?
Usa SVG per qualsiasi cosa fatta di forme che devono scalare, e PNG per qualsiasi cosa fatta di pixel o intestata in un posto che accetta solo immagini raster Questa tabella li mette fianco a fianco:
| Proprietà | SVG | png |
|---|---|---|
| Modello immagine | Vettore: percorsi, forme, testo | Raster: griglia di pixel fissa |
| vessillo | W3C SVG2 | W3C PNG, ISO/IEC 15948 |
| scalata | Affilato a qualsiasi dimensione | Sfocature o blocchi quando ingranditi |
| Compressione | Testo; gzip sul server | Sgonfiamento SENZA PERDITA |
| trasparenza | certo | Sì, alfa pieno |
| Dimensione del file per un logo | Di solito qualche KB | Cresce con dimensioni pixel |
| Dimensione del file per una foto | Impraticabile | Grande ma ragionevole |
| Modificabile dopo l'esportazione | Sì, forme e colori in un editor vettoriale | Solo pixel per pixel |
| Testo all'interno | Può rimanere selezionabile e ricercabile | Cotto in pixel |
| Può contenere script | Sì, che è un problema di sicurezza | no |
| Accettato da upload social, app per ufficio, e-mail | Spesso no | Quasi sempre |
| Meglio per | Loghi, icone, diagrammi, grafici, illustrazioni dell'interfaccia utente | Screenshot, arte dettagliata, beni di dimensioni fisse |
Una regola pratica: mantieni l'SVG come tuo master per qualsiasi cosa vettoriale, ed esporta da esso PNG alle dimensioni di cui ogni destinazione ha bisogno Non tenere mai solo il PNG di un logo, perché trasformare i pixel di nuovo in forme è con perdita in un modo che trasformare le forme in pixel non lo è.
Per le fotografie, nessuno dei due formati è la scelta giusta per la consegna Una foto in PNG è grande, e una foto in SVG è o un PNG avvolto in XML o un'approssimazione tracciata JPEG, WebP o AVIF sono costruiti per quel lavoro; che cos'è WebP e quando usarlo copre il lato della foto.
Perché così tanti posti rifiutano i caricamenti di SVG?
Perché un SVG è un documento che può contenere contenuto attivo, non solo un'immagine La specifica SVG consente <script> elementi, attributi del gestore eventi come onload, collegamenti a risorse esterne e HTML incorporato attraverso <foreignObject>. Un sito che accetta un upload SVG e successivamente lo serve dal proprio dominio potrebbe finire per eseguire qualcun altro's JavaScript per ogni visitatore che apre il file direttamente.
Sanificare SVG in modo sicuro è possibile ma in modo complicato, quindi molte piattaforme prendono la strada più semplice: immagini del profilo, elenchi di mercati, reti pubblicitarie, molte librerie multimediali CMS e la maggior parte dei client di posta elettronica accettano solo formati raster Anche i documenti di ufficio e le app di chat hanno un supporto più frammentario.
Questo è il motivo più comune per convertire SVG in PNG. Un browser che disegna un SVG come immagine è il caso sicuro, poiché un SVG caricato tramite un <img> element o su un canvas non è consentito eseguire script o recuperare file esterni I convertitori Toolz eseguono il rendering degli SVG esattamente in quel modo, il che rende sicuro convertire un file da una fonte sconosciuta.
Come si fa a convertire SVG in PNG senza perdere la qualità?
Render l'SVG alla dimensione del pixel che ti serve, o più grande, e non scalare mai il PNG in seguito Perché l'SVG è geometria, disegnarlo a 4x è esatto come disegnarlo a 1x; tutta la perdita di qualità in questa direzione deriva dal raccogliere un output troppo piccolo.
la Convertitore da SVG a PNG calcola la dimensione in questo ordine:
- Se il root SVG si imposta
widtheheight, quelli vengono utilizzati, con unità comemm,pt,inecmconvertito in pixel CSS. - Se ha solo un
viewBox, la vistaBox larghezza e altezza sono utilizzati. - Se non ha nessuno dei due, viene estratto a 1024 x 1024.
- Se il lato più lungo è ancora sotto i 512 pixel, il disegno viene ingrandito in proporzione fino a quando quel lato è 512, perché un'icona 24 x 24 disegnata alla sua dimensione dichiarata è troppo piccola per essere utilizzata.
- L'opzione scala SVG moltiplica quindi il risultato per 1, 2 o 4.
Prendi il badge qui sopra, che dichiara width="240" height="80". Il lato più lungo è sotto 512, quindi è ingrandito a 512 x 171 A 2x il PNG esce a 1024x342, con gli angoli non verniciati lasciati trasparenti La nota sotto il risultato indica la dimensione e da dove proviene, quindi non c'è da indovinare.
Scegli 2x per gli schermi, dove la maggior parte dei telefoni e dei laptop utilizza due o più pixel del dispositivo per pixel CSS e 4x per la stampa o i display di grandi dimensioni Il soffitto di uscita è di 100 megapixel o 16.384 pixel su un lato, e i file SVG superiori a 50 MB vengono rifiutati; una scala più piccola risolve il primo caso.
Due tipi di contenuti non sopravvivono al rendering Immagini e caratteri web collegati da URL vengono tralasciati, perché un SVG disegnato come immagine non può recuperare nulla al di fuori del file, quindi il testo ricade su un carattere di sistema; convertire il testo in contorni nel tuo editor vettoriale prima dell'esportazione evita che E un SVG animato diventi un singolo fotogramma fisso.
Devo convertire SVG in PNG, JPG o PDF?
Converti in PNG per impostazione predefinita, in JPG solo quando la destinazione rifiuta PNG o necessita di un file più piccolo per un elemento grafico simile a una foto e in PDF quando hai bisogno di un documento da stampare o inviare tramite e-mail.
| bersaglio | trasparenza | Dimensione | Quello che perdi | addurre a |
|---|---|---|---|---|
| png | tenere | Medio | Scalabilità | Carica, diapositive, risorse dell'app, qualsiasi cosa con uno sfondo trasparente |
| JPG | Riempito di bianco | Il più piccolo per l'arte complessa | Scalabilità, trasparenza, un pò di nitidezza dei bordi | Moduli che accettano solo JPG, allegati e-mail |
| PDF (rasterizzato) | Le aree trasparenti mostrano la pagina bianca | Più grande | Scalabilità, testo selezionabile, link cliccabili | Fogli di prova, stampa di un grafico, invio di opere d'arte a non designer |
la Convertitore da SVG a JPG riempie le aree trasparenti con il bianco, perché JPEG non ha canale alfa, e applica il cursore Qualità I bordi croccanti sul colore piatto sono esattamente dove la compressione JPEG lascia un debole squillo, quindi un logo di solito sembra migliore come PNG.
la convertitore da SVG a PDF merita un chiaro avvertimento Rasterizza: ogni SVG è disegnato su pixel, memorizzato come PNG e posizionato su una pagina Il PDF non contiene forme vettoriali, il testo non può essere selezionato e lo zoom abbastanza lontano mostra i pixel L'opzione scala aiuta ancora, dal momento che la dimensione della pagina rimane fissa mentre 2x e 4x vi impacchettano più pixel (72, 144 o 288 pixel per pollice con Adatta all'immagine) Se una tipografia chiede un PDF vettoriale, per ISO32000 un PDF può trasportare veri percorsi vettoriali, ma è necessario un editor vettoriale's esportare per quello, non un convertitore di immagini.
Cosa fa la conversione di PNG in SVG?
La conversione di PNG in SVG traccia l'immagine: raggruppa i pixel in aree di colore simile e adatta i contorni attorno a ciascuna area, producendo percorsi vettoriali riempiti Non trova il file vettoriale originale, perché un PNG non contiene alcuna registrazione delle forme che lo hanno reso Ogni bordo nell'output è una stima tracciata dai pixel.
Il tracciante dietro PNG a SVG e JPG a SVG su Toolz c'è imagetracerjs, in esecuzione in un Web Worker in background in modo che la pagina rimanga reattiva Funziona in due passaggi:
- Riduzione colore. L'immagine è ridotta a una piccola tavolozza, il numero che scegli sotto Colori: 2, 8 o 16.
- Montaggio bordi. Per ogni strato di colore, il tracciante percorre il confine di ogni area collegata e vi adatta linee rette e curve, producendo un percorso riempito per area.
Ogni percorso ottiene anche un contorno di 1 pixel nel proprio colore Senza di esso, le forme vicine lasciano spazi vuoti in cui i loro bordi non si incontrano del tutto e lo sfondo si manifesta come sottili cuciture bianche.
Il dettaglio controlla quanto da vicino quei contorni seguono i pixel:
| Dettaglio | Tolleranza di linea e curva | Speck caduti sotto | Pre-sfocatura | Risultato |
|---|---|---|---|---|
| Basso | 2 px | 16 punti | Leggero | File più fluidi, più semplici e più piccoli |
| Medio (predefinito) | 1 px | 8 punti | nessuno | Bilanciato |
| Alto | 0,5 px | 2 punti | nessuno | Segue i pixel da vicino, mantiene forme minuscole, più pesanti |
La SVG tracciata è scritta con la sua width e height impostate sulla dimensione originale dell'immagine e su un viewBox in pixel tracciati, quindi si apre alle dimensioni che ti aspetti e si scala in modo pulito ovunque lo posizioni.
Cosa può fare bene il tracciamento e dove fallisce?
Tracciare fa bene su immagini che erano vettoriali all'inizio: colore piatto, bordi duri, pochi colori Fallisce su qualsiasi cosa con toni continui, perché una foto non ha bordi da trovare, solo gradienti.
| Fonte | Come traccia | Impostazioni suggerite |
|---|---|---|
| Logo piatto, da 2 a 6 colori | Pulisci forme, piccolo file | 8 colori, Medio |
| Linea in bianco e nero, firme, francobolli | Molto pulito | 2 colori, Medio o Alto |
| Icone con gradiente | Il gradiente si trasforma in bande | 16 colori, Medio, quindi semplifica in un editor |
| Disegno scansionato su carta | La trama della carta diventa granelli | 2 colori, Basso |
| Logo JPG con artefatti di compressione | Macchioline lungo i bordi, sfondo tracciato come una forma | Basso dettaglio; eliminare la forma dello sfondo in seguito |
| Screenshot con testo | Le lettere diventano contorni da blobby | Tienilo come PNG |
| Fotografia | Forme postergate chiazzate, file enorme | Non rintracciare |
La fila di fotografie non è una questione di gusti Nel testare il motore Toolz, una foto rumorosa da 2000 px tracciata a 16 colori ha impiegato 28 secondi e ha prodotto un SVG da 46 MB, molte volte più pesante dell'immagine da cui proveniva e ancora visibilmente peggiore Il rumore dà al tracciante migliaia di minuscole regioni, e ognuna diventa il proprio percorso con le proprie coordinate.
Quel test è il motivo per cui il convertitore scala qualsiasi immagine più lunga di 1200 pixel su un lato fino a 1200 prima di tracciarla Traccia quindi termina in secondi anziché in minuti e, poiché l'output mantiene la larghezza e l'altezza originali, non cambia nulla su come è posizionato l'SVG. Una traccia ancora in esecuzione dopo due minuti viene interrotta con un messaggio che suggerisce meno colori o dettagli inferiori, anziché lasciare la scheda occupata indefinitamente.
Le sorgenti JPG aggiungono due problemi specifici La compressione JPEG lascia deboli blocchi attorno a spigoli vivi, che il tracciante può trasformare in forme vaganti; i dettagli bassi si sfocano leggermente e lasciano cadere le macchioline per contrastarlo E JPG non ha trasparenza, quindi la scatola bianca attorno a un logo diventa una forma più riempita dietro l'opera d'arte In un editor vettoriale, seleziona quella forma ed eliminala.
Come posso ottenere un SVG pulito da un logo PNG?
Inizia con le impostazioni più semplici che preservano il design, guarda l'anteprima e aggiungi colori o dettagli solo quando manca qualcosa Le impostazioni più pesanti raramente fissano una traccia errata; vi aggiungono più percorsi.
Una sequenza affidabile:
- Usa la fonte più grande e pulita che hai Un'esportazione PNG batte uno screenshot e uno screenshot batte la foto di una stampa.
- Conta i colori nel logo e scegli l'opzione più vicina sopra o sopra di esso Un segno a due colori vuole 2, un segno a cinque colori vuole 8.
- Traccia su Medium Controlla l'anteprima e la dimensione del file mostrata sotto il risultato.
- Se ci sono macchioline o spigoli vivi, ripercorri a Basso Se i dettagli sottili svanivano, ripercorri a Alto.
- Apri il risultato in un editor vettoriale per l'ultimo passaggio: elimina la forma di sfondo se ce n'è una, unisci forme che dovrebbero essere una e sostituisci qualsiasi testo tracciato con testo reale nel carattere giusto.
Quando la dimensione del file mostrata dopo il tracciamento è maggiore del PNG, trattalo come un segnale. Per un logo di solito significa che viene tracciato il rumore; per qualsiasi altra cosa di solito significa che l'immagine dovrebbe rimanere raster.
Se la traccia è diretta a una macchina da taglio, un incisore laser o un software di ricamo, 2 colori è spesso la risposta giusta anche per un design colorato, poiché quelle macchine funzionano con contorni anziché riempimenti.
Posso convertire tra questi formati in un unico posto?
SÌ. Il generale Convertitore di immagini accetta SVG insieme a JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG e PDF e scrive JPG, PNG, WebP, GIF, ICO, PDF o SVG. Scegliere SVG come target traccia qualsiasi sorgente raster con le stesse impostazioni Colori e Dettaglio; scegliere un target raster per una sorgente SVG mostra l'opzione di scala SVG.
Le pagine a coppie dedicate accettano solo il proprio formato sorgente, che mantiene rilevanti le opzioni sullo schermo: le pagine SVG mostrano la scala, le pagine di traccia mostrano Colori e Dettaglio.
Non viene offerta una combinazione: PDF in SVG Il convertitore lo rifiuta con un messaggio, e il percorso che suggerisce è di due passi: convertire prima la pagina PDF in PNG, quindi tracciare il PNG Se il PDF proveniva da un programma vettoriale, esportare SVG da quel programma mantiene i percorsi reali ed è l'opzione migliore.
Un SVG può anche diventare una favicon Rendering it to ICO produce immagini PNG quadrate a ogni dimensione dell'icona e il minimo di 512 px significa che una piccola icona SVG fornisce comunque una voce pulita di 256 px. Dimensioni Favicon e cosa c'è dentro un file ICO copre quali dimensioni includere.
Le conversioni SVG e PNG sono private?
Sì. Rendering, codifica e tracciamento avvengono tutti lato client, all'interno della scheda del browser, quindi non viene caricato alcun file. La fase di decodifica SVG e il tracciante vengono scaricati solo quando un file ne ha bisogno, il che mantiene la luce della pagina quando si converte solo tra formati raster.
I limiti, in un unico luogo: file SVG fino a 50 MB, output renderizzato fino a 100 megapixel e 16.384 pixel per lato, sorgenti raster fino a 100 megapixel, tracciamento fino a 1200 px sul lato più lungo, e un tetto di due minuti per traccia Gli strumenti sono gratuiti, senza iscrizione, con un limite giornaliero di conversioni.
