{"id":50308,"date":"2022-02-01T12:49:26","date_gmt":"2022-02-01T11:49:26","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=50308&#038;preview=true&#038;preview_id=50308"},"modified":"2023-03-14T14:00:23","modified_gmt":"2023-03-14T13:00:23","slug":"svg-vs-png","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/","title":{"rendered":"SVG vs PNG: Differenze e Casi d&#8217;Uso"},"content":{"rendered":"<p>Ci sono decine di <a href=\"https:\/\/kinsta.com\/it\/blog\/formati-file-immagine\/\">tipi di file immagine<\/a>, ognuno dei quali varia in base al tipo di compressione, alla formattazione e al supporto del browser. Ma due dei formati pi\u00f9 utilizzati sono SVG e PNG.<\/p>\n<p>Questi due tipi di file non potrebbero essere pi\u00f9 diversi &#8211; ognuno pi\u00f9 adatto dell&#8217;altro a una specifica situazione. Non sono certamente intercambiabili sotto ogni aspetto, e potreste scoprire che le immagini SVG possono svolgere compiti specifici meglio delle immagini PNG standard.<\/p>\n<p>In questo articolo analizzeremo le differenze tra SVG e PNG e in quali situazioni l&#8217;uno prevale sull&#8217;altro per utilizzarli sul vostro sito web.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Guardate la Nostra <a href=\"https:\/\/www.youtube.com\/watch?v=VEi_BU2FqQw\">Video-Guida<\/a> su SVG e PNG<\/h3>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=VEi_BU2FqQw\"><\/kinsta-video><\/p>\n<h2>Cos&#8217;\u00e8 SVG?<\/h2>\n<p>SVG sta per <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-svg\/\" rel=\"noopener\">Scalable Vector Graphics<\/a> ed \u00e8 il formato di file vettoriale pi\u00f9 usato sul web. Analizziamo la situazione:<\/p>\n<ul>\n<li><strong>Scalabile:<\/strong> Le immagini SVG possono essere ingranditi o rimpiccioliti senza danneggiare la qualit\u00e0 dell&#8217;immagine. Sar\u00e0 perfettamente nitida e chiara, non importa quanto grande o piccola sia.<\/li>\n<li><strong>Vettoriale:<\/strong> La maggior parte dei tipi di file immagine contengono pixel. I vettori sono essenzialmente pezzi di codice che rendono un&#8217;immagine in tempo reale, convertendola nei pixel che vedete sul vostro schermo. Viene visualizzata la stessa immagine, ma quello che succede in background \u00e8 molto diverso.<\/li>\n<li><strong>Grafica:<\/strong> Anche se non \u00e8 molto conosciuto, SVG \u00e8 un tipo di file immagine come PNG, JPEG o GIF. Solo che fa le cose un po&#8217; diversamente.<\/li>\n<\/ul>\n<p>I vettori sono frammenti di codice scritti in XML che rappresentano forme, linee e colori per elaborare l&#8217;immagine.<\/p>\n<p>Anche se creare un&#8217;immagine con nient&#8217;altro che codice \u00e8 sempre possibile, la maggior parte delle persone usa un editor di grafica vettoriale come Inkscape o Adobe Illustrator. Potete anche <a href=\"https:\/\/convertio.co\/png-svg\/\" target=\"_blank\" rel=\"noopener noreferrer\">convertire PNG<\/a> o altre immagini raster in SVG, ma i risultati non sono sempre ottimi.<\/p>\n<figure id=\"attachment_108839\" aria-describedby=\"caption-attachment-108839\" style=\"width: 1341px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-108839\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/convert-png-to-svg.jpg\" alt=\"convert png to svg\" width=\"1341\" height=\"465\"><figcaption id=\"caption-attachment-108839\" class=\"wp-caption-text\">Convertio \u00e8 un convertitore da PNG a SVG.<\/figcaption><\/figure>\n<p>Quando la pagina viene caricata, questo codice viene convertito in grafica, quindi non potete distinguere immediatamente un SVG da un PNG. Ma dato che le SVG sono semplicemente linee di codice convertite in pixel, ci\u00f2 significa che possono scalare a qualsiasi dimensione &#8211; grande o piccola &#8211; <a href=\"https:\/\/kinsta.com\/it\/blog\/compressione-lossy\/\">senza perdere qualit\u00e0<\/a>.<\/p>\n<figure id=\"attachment_108840\" aria-describedby=\"caption-attachment-108840\" style=\"width: 1215px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-108840\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/zoomed-in-svg.jpg\" alt=\"enlarged svg \" width=\"1215\" height=\"527\"><figcaption id=\"caption-attachment-108840\" class=\"wp-caption-text\">Esempio di un SVG ingrandito.<\/figcaption><\/figure>\n<p>SVG supporta anche l&#8217;animazione e la trasparenza, e questo lo rende un formato di file molto versatile.<\/p>\n<p>L&#8217;unico problema \u00e8 che non \u00e8 cos\u00ec diffuso come altri formati standard come PNG, quindi \u00e8 meno supportato sui vecchi browser e dispositivi, e non \u00e8 sempre il pi\u00f9 facile da caricare sul vostro sito e farlo visualizzare correttamente.<\/p>\n\n<h3>Pro e Contro di SVG<\/h3>\n<p>Anche se non \u00e8 ancora cos\u00ec diffuso come i tipi di file raster come PNG, la popolarit\u00e0 della grafica vettoriale sta crescendo velocemente. Le immagini vettoriali, infatti, hanno delle caratteristiche che le immagini raster non hanno. Ecco perch\u00e9 la gente apprezza tanto le SVG.<\/p>\n<ul>\n<li>Le immagini SVG sono scalabili. Potete disegnarle a qualsiasi risoluzione e si ingrandiranno o ridurranno senza danneggiare la qualit\u00e0 o diventare pixelate. Con le immagini raster, dovete sapere quale dimensione volete fin dall&#8217;inizio, o potreste rischiare di rendere l&#8217;immagine troppo grande o troppo piccola.<\/li>\n<li>Le SVG appaiono sempre nitide e belle proprio perch\u00e9 non subiscono mai perdite di qualit\u00e0. Le immagini raster possono iniziare ad apparire sfocate quando vengono ridimensionate anche solo leggermente.<\/li>\n<li>Dato che le SVG sono solo codice, la dimensione del file \u00e8 <a href=\"https:\/\/kinsta.com\/it\/blog\/ottimizzare-le-immagini-per-web-e-prestazioni\/\">minima e ben ottimizzata<\/a>. Esistono anche ottimizzatori di SVG che le rendono ancora pi\u00f9 gestibili. Con le SVG, il vostro sito probabilmente caricher\u00e0 un po&#8217; pi\u00f9 velocemente.<\/li>\n<li>A differenza delle PNG, le SVG supportano le animazione.<\/li>\n<\/ul>\n<p>SVG ha diversi vantaggi rispetto al formato PNG, dalla scalabilit\u00e0 alle dimensioni ridotte, ma non \u00e8 migliore in ogni situazione. Ecco i contro dei file vettoriali.<\/p>\n<ul>\n<li>Mentre le SVG sono supportate da tutti i principali browser moderni, potreste incorrere in problemi di compatibilit\u00e0 rendendoli su browser e dispositivi pi\u00f9 vecchi. Se una parte significativa dei vostri visitatori le utilizza, cambiare formato potrebbe essere una cattiva idea.<\/li>\n<li>Le SVG sono pi\u00f9 difficili da gestire, e richiedono programmi specifici per la creazione e la modifica. Anche se potete disegnare immagini SVG con nient&#8217;altro che codice XML, questa soluzione non \u00e8 sempre possibile. Strumenti premium come Adobe Illustrator possono essere costosi.<\/li>\n<li>Le SVG non sono cos\u00ec facili da incorporare come le PNG. Se utilizzate WordPress, sappiate che di default non sono supportate dalla <a href=\"https:\/\/kinsta.com\/it\/blog\/libreria-media-wordpress\/\">libreria multimediale<\/a>, quindi vi servir\u00e0 un plugin per caricarle.<\/li>\n<li>Le SVG devono essere rese dal browser quando la pagina viene caricata, quindi usarne in eccesso oppure inserire un file di grandi dimensioni con molti vettori pu\u00f2 diventare dispendioso per il dispositivo.<\/li>\n<\/ul>\n<h3>Quando usare SVG invece di PNG<\/h3>\n<p>Anche se non dovreste assolutamente convertire tutti le vostri PNG in SVG, la grafica vettoriale pu\u00f2 essere un&#8217;eccellente sostituzione per alcune immagini.<\/p>\n<p>Le immagini SVG funzionano eccezionalmente bene per la grafica decorativa di siti web, come loghi, icone, grafici e diagrammi e altre immagini semplici. La <a href=\"https:\/\/kinsta.com\/it\/\" rel=\"noopener\">nostra homepage<\/a> \u00e8 un eccellente esempio di grafica vettoriale in azione.<\/p>\n<figure id=\"attachment_108841\" aria-describedby=\"caption-attachment-108841\" style=\"width: 1347px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-108841 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/svg-animation.png\" alt=\"La homepage di Kinsta.\" width=\"1347\" height=\"490\"><figcaption id=\"caption-attachment-108841\" class=\"wp-caption-text\">La homepage di Kinsta.<\/figcaption><\/figure>\n<p>Tuttavia, non vanno cos\u00ec bene con immagini complesse con molti colori e forme, come schermate, <a href=\"https:\/\/kinsta.com\/it\/blog\/sito-di-fotografia\/\">fotografie<\/a> e anche opere d&#8217;arte dettagliate. Anche se \u00e8 possibile convertire qualsiasi immagine in SVG, i browser non sempre gestiscono bene i vettori complessi con centinaia di colori poich\u00e9 devono essere resi quando la pagina viene caricata.<\/p>\n<p>Inoltre, le opere d&#8217;arte SVG possono essere belle, ma la progettazione di immagini complesse richiede molto tempo, sforzo e conoscenza di strumenti di editing avanzati. Tenete le cose semplici se volete creare immagini vettoriali.<\/p>\n<p>Se avete immagini dettagliate, mantenetevi saldamente a PNG.<\/p>\n<p>Tuttavia, le SVG sono migliori per il web design reattivo e retina-ready grazie alla loro scalabilit\u00e0 e alla mancanza di degradazione della qualit\u00e0. Inoltre, supportano le animazioni, a differenza di PNG e dei tipi di file raster che supportano l&#8217;animazione, come GIF, APNG e <a href=\"https:\/\/kinsta.com\/it\/blog\/webp\/\">WebP<\/a> che hanno tutti i loro problemi.<\/p>\n<p>Per la grafica semplice che pu\u00f2 richiedere un&#8217;animazione e che deve scalare bene su qualsiasi dimensione dello schermo, usate SVG.<\/p>\n<h2>Cos&#8217;\u00e8 PNG?<\/h2>\n<p>PNG sta per Portable Network Graphics il nome dice bene quanto sia diffuso questo tipo di file. Chiunque abbia mai usato un computer ha probabilmente lavorato con le PNG, dato che \u00e8 il tipo di file pi\u00f9 comune su internet dopo il formato <a href=\"https:\/\/kinsta.com\/it\/blog\/jpg-e-jpeg\/\" rel=\"noopener\">JPEG<\/a>.<\/p>\n<p>PNG \u00e8 un tipo di file immagine raster, simile alla maggior parte dei formati immagine comuni. Ci\u00f2 significa che consiste di pixel, gli stessi piccoli punti visualizzati sul vostro monitor o schermo. Sebbene questo lo renda facile da visualizzare, significa anche che la qualit\u00e0 dell&#8217;immagine dipende dalla risoluzione &#8211; quanti pixel ci sono nell&#8217;immagine.<\/p>\n<p>Quindi, se si scala un&#8217;immagine raster verso l&#8217;alto o verso il basso, la qualit\u00e0 ne risentir\u00e0. A volte il danno \u00e8 trascurabile, specialmente quando si scala verso il basso, mentre a volte pu\u00f2 rendere un&#8217;immagine sfocata e completamente inutilizzabile.<\/p>\n<figure id=\"attachment_108842\" aria-describedby=\"caption-attachment-108842\" style=\"width: 1509px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-108842\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/zoomed-in-png.png\" alt=\"zoomed in png\" width=\"1509\" height=\"729\"><figcaption id=\"caption-attachment-108842\" class=\"wp-caption-text\">Esempio di un PNG ingrandito.<\/figcaption><\/figure>\n<p>Tuttavia, la prevalenza di PNG lo rende un buon candidato per un utilizzo generale. Questo tipo di file supporta la trasparenza, ma non l&#8217;animazione.<\/p>\n<h3>Pro e Contro di PNG<\/h3>\n<p>Cosa rende PNG il formato di file immagine pi\u00f9 utilizzato online? Ecco i vantaggi:<\/p>\n<ul>\n<li>I file PNG sono facilmente modificabili e possono essere aperti in qualsiasi strumento comune di editing delle immagini. Non c&#8217;\u00e8 bisogno di acquistare programmi avanzati per creare o modificare un&#8217;immagine PNG; al massimo, potreste aver bisogno di scaricare un editor gratuito come GIMP.<\/li>\n<li>Che stiate creando un sito da zero o utilizzando il media manager di WordPress, visualizzare le immagini PNG sul vostro sito \u00e8 molto semplice.<\/li>\n<li>PNG utilizza una <a href=\"https:\/\/kinsta.com\/it\/blog\/ottimizzare-le-immagini-per-web-e-prestazioni\/\" target=\"_blank\" rel=\"noopener noreferrer\">compressione lossless<\/a>, che lascia un aspetto pi\u00f9 nitido rispetto ai JPEG a compressione loss. Tuttavia, questo ha un costo maggiore in termini di dimensioni del file e non pu\u00f2 essere paragonato alle immagini vettoriali.<\/li>\n<\/ul>\n<p>D&#8217;altra parte, il formato PNG \u00e8 stato creato decenni fa e ha diversi difetti notevoli che non sono stati aggiornati per il web moderno.<\/p>\n<ul>\n<li>Non potete ridimensionare i file PNG senza perdere qualit\u00e0. Dovete pianificare con attenzione quando disegnate la grafica raster e assicurarvi che sia della <a href=\"https:\/\/kinsta.com\/it\/blog\/dimensioni-immagini-wordpress\/\" rel=\"noopener\">giusta dimensione<\/a> o potreste finire per perdere tempo creando immagini inutilizzabili.<\/li>\n<li>Le PNG sono molto grandi a causa della loro compressione lossless e per questo possono rallentare il vostro sito web. Per risolvere questo problema \u00e8 necessario comprimerle ancora di pi\u00f9 e danneggiare la qualit\u00e0.<\/li>\n<li>Rendere le immagini &#8220;retina-ready&#8221; \u00e8 pi\u00f9 noioso con le PNG e ci sono maggiori probabilit\u00e0 di causare sfocature.<\/li>\n<li>PNG non supporta le animazioni. Altri tipi di file raster animati, come le GIF, possono avere seri problemi; per esempio, le GIF animate sono di bassissima qualit\u00e0 e supportano solo 256 colori.<\/li>\n<\/ul>\n<h3>Quando usare PNG invece di SVG<\/h3>\n<p>PNG \u00e8 il tipo di file pi\u00f9 comune per una ragione: \u00e8 decisamente versatile e si adatta a quasi tutte le situazioni. Ci sono solo alcuni difetti da considerare quando lo si usa, come le grandi dimensioni del file e la mancanza di scalabilit\u00e0.<\/p>\n<p>I PNG sono adatti a visualizzare immagini dettagliate, opere d&#8217;arte e fotografie &#8211; tutto ci\u00f2 che un&#8217;immagine vettoriale non pu\u00f2 gestire. Qualsiasi cosa abbia centinaia di colori e una grande risoluzione dovrebbe probabilmente essere una PNG.<\/p>\n<p>Questo non vuol dire che non potete usare le PNG per immagini pi\u00f9 semplici come loghi e grafica decorativa, ma le SVG sarebbero pi\u00f9 adatte allo scopo.<\/p>\n<p>Quando non siete sicuri se una piattaforma gestir\u00e0 il tipo di file SVG, meno supportato, PNG \u00e8 la strada da percorrere &#8211; se non altro per essere sicuri.<\/p>\n<p>Per esempio, non potete caricare SVG sulla maggior parte dei <a href=\"https:\/\/kinsta.com\/it\/blog\/dimensioni-immagini-social-media\/\" rel=\"noopener\">social media<\/a>. E, dato che alcuni client di posta elettronica possono avere problemi con i vettori, di solito si consiglia di attenersi ai PNG nei template di posta elettronica.<\/p>\n<p>In generale, le PNG vanno bene con qualsiasi immagine complessa e non animata, specialmente quelle che richiedono trasparenza. Potete usarle praticamente ovunque; \u00e8 solo che a volte una SVG sarebbe pi\u00f9 adatta.<\/p>\n<p>Ricordate che puoi sempre usare i <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/\" target=\"_blank\" rel=\"noopener noreferrer\">fallback PNG<\/a> se non riuscite a caricare la vostra SVG, quindi di solito \u00e8 pi\u00f9 sicuro andare con i vettori anche se una parte significativa della vostra base di utenti usa ancora vecchi dispositivi o browser obsoleti.<\/p>\n<h2>Qual \u00e8 il Formato Migliore: SVG o PNG?<\/h2>\n<p>Nessuno dei due tipi di file \u00e8 migliore o peggiore dell&#8217;altro; ognuno ha i suoi limiti. Anche se SVG supera PNG in diverse aree, PNG va molto meglio nella gestione di certe cose.<\/p>\n<p>In generale, comunque, dovreste attenervi a SVG quando \u00e8 appropriato e usare PNG in tutte le situazioni in cui i vettori non sono adatti. Potreste essere tecnicamente in grado di usare entrambi i formati, ma SVG \u00e8 preferibile in alcune aree specifiche.<\/p>\n<p>SVG supporta l&#8217;animazione, PNG no. I tipi di file raster, come GIF e APNG, possono essere considerati delle alternative. Tuttavia, non esiste un perfetto formato raster animato che sia ampiamente supportato, ben conosciuto, di alta qualit\u00e0 e che risulti in file di piccole dimensioni. Le SVG hanno tutte queste caratteristiche.<\/p>\n<p>Le SVG inoltre <a href=\"https:\/\/kinsta.com\/it\/blog\/responsive-web-design\/\">si adattano perfettamente a qualsiasi dimensione dello schermo<\/a>, che vuol dire che sono reattive e retina-ready di default. Le PNG perdono qualit\u00e0 quando vengono ridimensionate e farle scalare bene \u00e8 una seccatura &#8211; specialmente se avete solo immagini piccole che non si visualizzano bene su schermi grandi.<\/p>\n<p>Infine, le SVG sono generalmente pi\u00f9 piccole delle PNG, quindi sono meno impegnative per il vostro server nonostante abbiano bisogno di fare il rendering durante il caricamento.<\/p>\n<p>Usatele sul vostro sito per semplici opere d&#8217;arte a colori piatti, loghi e grafica decorativa.<\/p>\n<p>D&#8217;altra parte, le PNG sono adatte per visualizzare grafici complessi ad una grande risoluzione o immagini con migliaia di colori. Al momento le SVG non possono gestire una grande quantit\u00e0 di colori e forme.<\/p>\n<p>Questo tipo di immagini complesse costituiranno spesso la maggior parte delle immagini sul vostro sito, quindi non \u00e8 ancora il momento di buttare via le PNG.<\/p>\n<p>E le PNG sono pi\u00f9 ampiamente supportate dai browser e da piattaforme specifiche come i <a href=\"https:\/\/kinsta.com\/it\/argomenti\/suggerimenti-email-marketing\/\">client di posta elettronica<\/a>. Se non siete sicuri se una SVG sar\u00e0 resa correttamente, meglio optare per una PNG.<\/p>\n\n<h2>Riepilogo<\/h2>\n<p>SVG e PNG sono due formati di file molto diversi. Alla fine, non \u00e8 un grosso problema se utilizzate PNG o JPEG sul vostro sito al di fuori di casi d&#8217;uso molto specifici, ma scegliere tra SVG e PNG \u00e8 una scelta molto pi\u00f9 rilevante.<\/p>\n<p>\u00c8 molto pi\u00f9 probabile che usiate PNG perch\u00e9 \u00e8 un formato di file pi\u00f9 semplice, pi\u00f9 accessibile e pi\u00f9 versatile. Per le immagini complesse, come schermate e illustrazioni dettagliate, bisognerebbe usare PNG.<\/p>\n<p>Anche se le SVG sono pi\u00f9 difficili da creare e modificare, offrono una serie di vantaggi rispetto alle PNG. Quando \u00e8 appropriato utilizzare immagini vettoriali, come la grafica decorativa e i loghi, scegliete senza dubbio le SVG.<\/p>\n<p>Probabilmente non sostituirete ogni singola immagine del vostro sito con una SVG, ma la reattivit\u00e0 e le dimensioni ridotte dei file le rendono la scelta migliore in certe situazioni.<\/p>\n<p><em>Siete fan delle SVG o delle PNG? Condividi le vostre considerazioni con la nostra community nei commenti qui sotto!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ci sono decine di tipi di file immagine, ognuno dei quali varia in base al tipo di compressione, alla formattazione e al supporto del browser. Ma &#8230;<\/p>\n","protected":false},"author":117,"featured_media":50309,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25713,25714],"topic":[25878,25950,25982],"class_list":["post-50308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-compression","tag-image-optimization","topic-design-sito-wordpress","topic-ottimizzazione-immagini","topic-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SVG vs PNG: Differenze e Casi d&#039;Uso<\/title>\n<meta name=\"description\" content=\"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG vs PNG: Differenze e Casi d&#039;Uso\" \/>\n<meta property=\"og:description\" content=\"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-01T11:49:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-14T13:00:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"SVG vs PNG: Differenze e Casi d&#8217;Uso\",\"datePublished\":\"2022-02-01T11:49:26+00:00\",\"dateModified\":\"2023-03-14T13:00:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/\"},\"wordCount\":2248,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png\",\"keywords\":[\"compression\",\"image optimization\"],\"articleSection\":[\"Sviluppo Web\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/\",\"name\":\"SVG vs PNG: Differenze e Casi d'Uso\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png\",\"datePublished\":\"2022-02-01T11:49:26+00:00\",\"dateModified\":\"2023-03-14T13:00:23+00:00\",\"description\":\"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png\",\"width\":1460,\"height\":730,\"caption\":\"SVG vs PNG: quali sono le differenze e quando usarli\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design del Sito WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"SVG vs PNG: Differenze e Casi d&#8217;Uso\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SVG vs PNG: Differenze e Casi d'Uso","description":"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/","og_locale":"it_IT","og_type":"article","og_title":"SVG vs PNG: Differenze e Casi d'Uso","og_description":"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.","og_url":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2022-02-01T11:49:26+00:00","article_modified_time":"2023-03-14T13:00:23+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Salman Ravoof","Tempo di lettura stimato":"11 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"SVG vs PNG: Differenze e Casi d&#8217;Uso","datePublished":"2022-02-01T11:49:26+00:00","dateModified":"2023-03-14T13:00:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/"},"wordCount":2248,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png","keywords":["compression","image optimization"],"articleSection":["Sviluppo Web"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/","url":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/","name":"SVG vs PNG: Differenze e Casi d'Uso","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png","datePublished":"2022-02-01T11:49:26+00:00","dateModified":"2023-03-14T13:00:23+00:00","description":"SVG vs PNG: qual \u00e8 il formato immagine per il tuo sito web? Questo articolo analizza i pro e i contro dei due formati immagine.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/svg-vs-png.png","width":1460,"height":730,"caption":"SVG vs PNG: quali sono le differenze e quando usarli"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/svg-vs-png\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Design del Sito WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/"},{"@type":"ListItem","position":3,"name":"SVG vs PNG: Differenze e Casi d&#8217;Uso"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/50308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=50308"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/50308\/revisions"}],"predecessor-version":[{"id":66880,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/50308\/revisions\/66880"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/translations\/jp"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/50308\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/50309"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=50308"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=50308"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=50308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}