Un file SVG è un documento basato su XML usato per descrivere grafica vettoriale bidimensionale. Invece di memorizzare l’immagine come una griglia fissa di pixel, può definire forme, linee, curve, testo e altri elementi attraverso coordinate e istruzioni.
È questo il motivo per cui un logo o un’icona in SVG possono essere visualizzati molto piccoli oppure ingranditi senza diventare sgranati.
La scalabilità, però, non rende SVG automaticamente il formato migliore per qualsiasi immagine. Una fotografia resta normalmente più adatta a un formato raster, mentre un SVG molto complesso può diventare pesante e difficile da gestire. Allo stesso modo, essere basato su XML non significa ottenere automaticamente un vantaggio SEO o prestazioni migliori.
La scelta dipende quindi dal tipo di grafica, dal modo in cui verrà utilizzata e da ciò che deve rimanere modificabile.
Che cos’è un file SVG e perché è diverso da un’immagine raster
Per capire cosa rende particolare SVG conviene partire dalla differenza fondamentale rispetto ai formati raster. PNG, JPEG, WebP e AVIF descrivono un’immagine attraverso pixel; un SVG può invece descrivere la geometria degli elementi che compongono il disegno. È questa differenza strutturale, più dell’estensione del file, a spiegare scalabilità e possibilità di modifica.
SVG significa Scalable Vector Graphics
SVG è l’acronimo di Scalable Vector Graphics, cioè grafica vettoriale scalabile.
La specifica SVG del W3C lo definisce come un linguaggio basato su XML per descrivere grafica bidimensionale vettoriale e anche contenuti misti vettoriali/raster.
La distinzione è importante perché un file SVG non deve essere immaginato semplicemente come “un PNG che non sgrana”.
Un PNG o un JPEG memorizzano principalmente pixel. Un SVG può invece descrivere oggetti grafici: un cerchio con un determinato raggio, una linea tra due coordinate, un tracciato composto da curve, un testo o un gruppo di forme.
Il browser o il programma che apre il file interpreta quelle istruzioni e produce l’immagine sullo schermo.
Un file SVG è testo XML: forme, tracciati e coordinate al posto dei pixel
Se apri un file .svg con un editor di codice, puoi trovare qualcosa di simile:
<svg viewBox="0 0 120 120" role="img" aria-labelledby="titolo"> <title id="titolo">Cerchio</title> <circle cx="60" cy="60" r="40" /> </svg>
Non c’è una matrice di 120 × 120 pixel salvata nel file.
Il codice dice piuttosto: crea un’area logica, individua un punto centrale e disegna un cerchio con un certo raggio.
Un SVG reale può naturalmente essere molto più complesso e contenere:
- rettangoli, cerchi, ellissi e poligoni;
- linee e curve;
- tracciati definiti con l’elemento
path; - testo;
- gradienti, maschere e filtri;
- gruppi di elementi;
- immagini raster incorporate o collegate;
- attributi e stili CSS.
Questo ultimo punto merita attenzione: un file con estensione .svg non è necessariamente composto esclusivamente da vettori. SVG può anche contenere o richiamare immagini raster.
Perché può essere ridimensionato senza diventare sgranato
Una fotografia raster possiede un numero finito di pixel. Se l’immagine è larga 400 pixel e la mostri a una dimensione molto superiore, il software deve ingrandire l’informazione disponibile e prima o poi la perdita di nitidezza diventa visibile.
Una forma vettoriale funziona diversamente.
Il sistema conosce la geometria dell’oggetto e può ridisegnarla alla dimensione richiesta. Una curva resta quindi una curva anche se passa da 30 a 3.000 pixel sullo schermo.
È questo il vero vantaggio della grafica vettoriale: la geometria non dipende da una risoluzione raster originaria.
Per una panoramica più ampia sulla differenza fra vettoriale, raster e gli altri formati file immagini, conviene considerare anche JPEG, PNG, WebP, AVIF ed eventuali formati destinati alla stampa.
Come funziona davvero un SVG: viewBox, path e stile
Sapere che SVG è vettoriale non basta a capire perché si comporta diversamente da una bitmap. Il meccanismo diventa più chiaro osservando tre elementi: il sistema di coordinate, i tracciati che descrivono le forme e gli stili applicati agli oggetti. Sono questi componenti a consentire al browser di ricostruire la grafica alla dimensione richiesta.
viewBox e sistema di coordinate: il meccanismo dietro la scalabilità
Uno degli attributi più importanti di un SVG è viewBox.
Per esempio:
viewBox="0 0 120 120"
stabilisce un sistema logico di coordinate largo 120 unità e alto 120.
Non significa che l’immagine debba essere necessariamente mostrata a 120 × 120 pixel. La stessa grafica può essere renderizzata a 24 × 24, 300 × 300 o dimensioni molto maggiori mantenendo le proporzioni previste.
Il viewBox non è, da solo, ciò che rende un’immagine vettoriale scalabile. Serve però a mettere in relazione le coordinate interne del disegno con lo spazio nel quale l’SVG viene visualizzato.
È una delle ragioni per cui uno stesso asset può adattarsi bene a interfacce e display con dimensioni differenti senza richiedere una variante raster per ogni risoluzione.
Forme, path e testo: cosa contiene il file
Per grafiche semplici bastano elementi geometrici come rect, circle o line.
Per forme più complesse viene spesso utilizzato path.
Un path contiene una sequenza di comandi che indicano dove iniziare a disegnare, quali linee creare e come costruire curve e chiudere le forme.
Maggiore è il numero di punti, curve, filtri ed elementi necessari per descrivere un disegno, maggiore può diventare la complessità del documento.
Questo porta a una conseguenza pratica spesso trascurata: vettoriale non significa automaticamente leggero.
Un’icona geometrica può richiedere pochissimo codice. Un’illustrazione estremamente dettagliata ottenuta tramite migliaia di tracciati può produrre invece un SVG considerevole, difficile da modificare e non necessariamente più efficiente di un’immagine raster ben ottimizzata.
CSS e JavaScript: quando un SVG può diventare dinamico
Gli elementi SVG possono essere stilizzati.
Colori, opacità, trasformazioni e altre proprietà possono essere gestiti tramite attributi o CSS. Quando l’SVG è inserito direttamente nel documento HTML, è inoltre possibile intervenire sui suoi elementi attraverso il DOM.
Questo consente di creare, per esempio:
- icone che cambiano colore;
- grafici interattivi;
- diagrammi;
- indicatori animati;
- illustrazioni che reagiscono alle azioni dell’utente.
Lo stesso file non possiede però sempre le medesime capacità in ogni contesto.
Un SVG caricato tramite <img> viene trattato dal browser in modo più simile a una normale immagine; un SVG inserito inline nel markup HTML diventa invece parte del documento e offre maggiore controllo.
La differenza diventerà importante quando parleremo di accessibilità e sicurezza.
Quando conviene usare SVG e quando è meglio evitarlo
La scelta di un file SVG dovrebbe partire dalla natura dell’immagine, non dalla convinzione che un formato sia sempre superiore agli altri. SVG è particolarmente efficace quando la geometria è più importante del dettaglio fotografico. Quando invece l’immagine contiene milioni di variazioni di colore e texture, una rappresentazione raster è normalmente più efficiente.
Loghi, icone, illustrazioni, diagrammi e grafica per interfacce
SVG dà il meglio quando l’immagine può essere descritta efficacemente attraverso forme e tracciati.
Gli scenari tipici comprendono:
Loghi. Devono spesso apparire nitidi su display e dimensioni molto diverse.
Icone. Sono normalmente composte da geometrie semplici e possono beneficiare della possibilità di modificarne dimensioni e colore.
Illustrazioni vettoriali. Funzionano bene quando non richiedono una quantità enorme di dettagli fotografici.
Diagrammi e grafici. Testo, linee, forme e marker sono adatti al modello vettoriale e possono anche essere resi interattivi.
Elementi di interfaccia. Frecce, indicatori, decorazioni e altri componenti possono adattarsi a varie risoluzioni mantenendo contorni puliti.
Non è quindi la presenza sul web, da sola, a giustificare SVG. La domanda più utile è: questa grafica può essere rappresentata bene come insieme di forme?
Se la risposta è sì, SVG diventa un candidato naturale.
Fotografie, texture e immagini molto complesse: perché il raster resta più adatto
Una fotografia contiene enormi quantità di variazioni di colore, luminosità e dettaglio.
Riprodurla come insieme di vettori sarebbe generalmente inefficiente.
JPEG, WebP e AVIF sono invece progettati per rappresentare contenuti raster complessi e possono applicare tecniche di compressione molto più adatte a una fotografia.
Anche alcune illustrazioni apparentemente vettoriali possono superare il punto in cui SVG conviene: migliaia di forme, gradienti complessi, filtri ed effetti possono generare un documento più difficile da gestire di una versione raster ottimizzata.
Il criterio non è quindi “vettoriale è moderno, raster è vecchio”.
Sono due modelli differenti, adatti a problemi differenti.
Il peso del file dipende dalla complessità: SVG non è sempre più leggero
È frequente leggere che SVG “pesa meno di PNG o JPG”.
Può essere vero, ma non è una proprietà garantita dal formato.
Un simbolo composto da pochi tracciati può risultare estremamente compatto. Se però lo stesso documento contiene centinaia o migliaia di punti, metadati inutili, gruppi ridondanti e precisione numerica superiore a quella necessaria, la dimensione può crescere rapidamente.
La scelta corretta si fa confrontando gli asset reali.
Se un logo semplice pesa pochi kilobyte in SVG e mantiene perfettamente la qualità a qualsiasi dimensione, il vantaggio è evidente.
Se un’illustrazione complessa produce un SVG da centinaia di kilobyte mentre una versione raster ottimizzata risolve lo stesso compito con un peso inferiore, mantenere il vettoriale solo per principio ha poco senso.
Vantaggi e limiti reali del formato SVG
Le caratteristiche di un file SVG diventano vantaggi soltanto quando servono davvero al progetto. Scalabilità e modificabilità sono preziose per un logo o un’icona, ma contano molto meno per una fotografia. Allo stesso modo, la possibilità di inserire l’SVG direttamente nel DOM offre maggiore controllo, ma aumenta anche complessità e responsabilità nell’implementazione.
Scalabilità, trasparenza, modificabilità e responsive design
Il vantaggio più evidente è la scalabilità.
A questo si aggiungono altre proprietà utili.
Trasparenza. Elementi e gruppi possono avere opacità e riempimenti trasparenti.
Modificabilità. Colori, dimensioni e forme possono essere modificati senza dover necessariamente ridisegnare una bitmap.
Adattabilità. Lo stesso asset può essere visualizzato a dimensioni differenti.
Struttura. Poiché gli elementi hanno una semantica nel documento, possono essere selezionati e gestiti individualmente.
Stilizzazione. In determinati contesti è possibile applicare CSS.
Sono vantaggi particolarmente interessanti in un’interfaccia web, dove un’icona potrebbe dover cambiare colore in base allo stato oppure essere visualizzata su schermi molto diversi.
Performance: quando SVG aiuta e quando può diventare inefficiente
La performance non dipende soltanto dall’estensione del file.
Bisogna considerare almeno:
- dimensione trasferita;
- complessità del markup;
- numero di elementi;
- costi di rendering;
- modalità di incorporamento;
- possibilità di caching;
- eventuali animazioni;
- alternativa raster disponibile.
Usare decine o centinaia di piccoli SVG inline, per esempio, aumenta la quantità di markup HTML.
Usare file SVG esterni tramite <img> può invece permettere al browser di trattarli come risorse separate e riutilizzabili.
Non esiste quindi una formula del tipo:
SVG = sito più veloce
La formulazione corretta è:
SVG può essere molto efficiente quando la natura della grafica e il modo in cui viene implementata lo rendono adatto al compito.
Indicizzazione e accessibilità: cosa è possibile senza inventare un “vantaggio SEO”
Google include SVG tra i formati immagine supportati e tra i tipi di file che può indicizzare.
Questo però non significa che scegliere SVG faccia migliorare automaticamente il posizionamento di una pagina.
La documentazione di Google sui tipi di file indicizzabili conferma il supporto a .svg, ma non attribuisce al formato un bonus di ranking.
Ciò che conta è il modo in cui l’immagine viene utilizzata nel contesto della pagina.
Anche l’accessibilità non deriva automaticamente dall’estensione.
Un’immagine SVG inserita tramite <img> può utilizzare un normale testo alternativo alt. Un SVG inline, invece, può essere descritto attraverso elementi come title e desc e con attributi ARIA adeguati.
L’obiettivo è sempre lo stesso: permettere a chi non vede la grafica di comprenderne la funzione o l’informazione.
SVG vs PNG, JPG, WebP e AVIF: quale formato scegliere
Il confronto SVG vs PNG è utile soprattutto per loghi, icone, trasparenze e grafiche di interfaccia, ma non esiste un vincitore assoluto. I formati risolvono esigenze differenti e la scelta va fatta in base al tipo di contenuto.
| Formato | Modello | Scala senza pixelazione | Trasparenza | Uso tipico |
|---|---|---|---|---|
| SVG | Vettoriale / XML | Sì per gli elementi vettoriali | Sì | Loghi, icone, diagrammi, illustrazioni |
| PNG | Raster | No | Sì | Grafica raster, screenshot, immagini con trasparenza |
| JPG/JPEG | Raster | No | No | Fotografie e immagini continue |
| WebP | Raster | No | Sì | Foto e grafica raster ottimizzate per il web |
| AVIF | Raster | No | Sì | Immagini raster moderne ad alta efficienza |
SVG vs PNG per loghi, icone, trasparenze e grafiche
Per un logo composto da forme semplici, SVG è normalmente la scelta più flessibile.
Puoi ridimensionarlo senza creare varianti a risoluzioni diverse e, se l’implementazione lo consente, puoi intervenire sui colori tramite CSS.
PNG ha però ancora senso quando il contenuto è raster, quando vuoi preservare trasparenze pixel-based oppure quando il flusso di lavoro richiede espressamente una bitmap.
Un logo in PNG può apparire perfettamente nitido finché viene mostrato alle dimensioni per cui è stato esportato. Diventa problematico quando devi riutilizzare lo stesso file molto più grande.
SVG vs JPG per fotografie e immagini ricche di dettagli
Per le fotografie, SVG non è la scelta naturale.
JPEG nasce per immagini raster con molte variazioni tonali e può comprimere in modo efficiente fotografie e scene reali.
Trasformare una foto in migliaia di forme vettoriali non la rende automaticamente migliore. Anzi, può produrre un risultato più pesante, complesso o visivamente differente dall’originale.
SVG vince quando conta la geometria.
JPEG vince quando conta la fotografia.
SVG vs WebP e AVIF: vettoriale e formati raster moderni risolvono problemi diversi
WebP e AVIF vengono spesso messi nello stesso confronto perché sono formati molto utilizzati sul web, ma appartengono a una categoria diversa.
Restano raster.
Sono quindi adatti a fotografie, immagini editoriali e contenuti complessi per i quali serve una buona efficienza di compressione.
SVG non è una loro “versione migliore”.
Un’interfaccia può tranquillamente utilizzare:
- SVG per logo e icone;
- WebP o AVIF per fotografie e hero image;
- PNG quando serve una bitmap lossless o una compatibilità specifica.
La scelta migliore spesso consiste proprio nell’utilizzare formati differenti nello stesso sito in base alla funzione dell’immagine.
Come aprire e modificare un file SVG
Aprire un SVG per visualizzarlo è semplice; modificarlo richiede invece di distinguere tra intervento grafico e intervento sul codice. Se devi aprire file SVG soltanto per controllarne il contenuto, non serve installare un programma specifico: i browser moderni possono renderizzarli direttamente. Per cambiare forme e tracciati, invece, un editor vettoriale è generalmente la scelta più pratica.
Aprire un SVG direttamente nel browser
Se devi semplicemente visualizzare un file SVG, il metodo più immediato è spesso il browser.
Chrome, Firefox, Edge e Safari possono renderizzare SVG direttamente. Puoi aprire il file dal browser o trascinarlo in una scheda.
È utile anche per un controllo rapido: se l’immagine viene visualizzata correttamente nel browser ma presenta problemi in un determinato programma, il problema potrebbe dipendere dall’applicazione o da alcune caratteristiche specifiche del documento.
Per modificare realmente forme e tracciati, invece, serve un editor vettoriale.
Strumenti come Inkscape o Adobe Illustrator permettono di intervenire graficamente sugli elementi. Se conosci SVG e XML puoi anche aprire il file con un normale editor di codice.
Le due modalità non sono equivalenti.
L’editor vettoriale mostra il disegno.
L’editor di codice mostra come quel disegno è costruito.
Modificarlo con un editor vettoriale o con un editor di codice
Se devi spostare un punto, cambiare una curva o modificare una forma complessa, un editor vettoriale è generalmente più pratico.
Se devi invece:
- cambiare un colore;
- correggere un attributo;
- eliminare metadati;
- modificare un
viewBox; - aggiungere un identificatore;
- controllare il markup;
un editor di codice può essere più rapido.
È uno dei vantaggi peculiari del formato: puoi lavorare sia sul risultato visuale sia direttamente sulla sua descrizione.
Per modifiche manuali conviene comunque mantenere il file valido. Un tag non chiuso o un valore errato possono impedire il rendering dell’intero documento.
Cosa controllare se il file non viene visualizzato correttamente
Quando un SVG non appare come previsto, il problema non è necessariamente il formato.
Controlla prima:
Markup non valido. Essendo XML, errori strutturali possono impedire l’interpretazione del documento.
viewBox o dimensioni. Coordinate e viewport errate possono far apparire il contenuto tagliato, spostato o invisibile.
Risorse esterne. Font, immagini o altri asset richiamati dal documento potrebbero non essere disponibili.
Stili. Un elemento può essere presente ma avere fill, stroke, opacity o dimensioni che lo rendono invisibile.
Contesto di incorporamento. Un SVG aperto come documento e lo stesso SVG usato come <img> non hanno necessariamente lo stesso comportamento.
Prima di convertire il file in un altro formato, conviene quindi capire quale di questi livelli sta fallendo.
Convertire un’immagine in SVG: conversione e vettorializzazione non sono la stessa cosa
La parola “conversione” può creare confusione perché indica operazioni tecnicamente molto diverse. Passare da SVG a PNG significa rasterizzare una grafica vettoriale; passare da PNG a SVG può invece limitarsi a mettere una bitmap dentro un contenitore SVG oppure comportare una vera vettorializzazione dei contenuti. Il risultato non è lo stesso.
Un file SVG può infatti contenere anche una risorsa raster: l’estensione, da sola, non dimostra che l’immagine sia stata realmente vettorializzata.
Da SVG a PNG o JPG: cosa si perde
Convertire un SVG in PNG o JPEG significa normalmente rasterizzarlo.
Il software prende il disegno vettoriale e produce una griglia di pixel a una determinata dimensione.
L’immagine potrà ancora essere visualizzata normalmente, ma perderai alcuni vantaggi tipici del sorgente vettoriale:
- scalabilità indipendente dalla risoluzione;
- struttura dei tracciati;
- modificabilità dei singoli elementi;
- possibilità di stilizzare gli oggetti come parte di un SVG.
Per questo, se possiedi il sorgente SVG, conviene conservarlo anche quando devi esportare versioni raster per un utilizzo specifico.
Da PNG o JPG a SVG: perché cambiare estensione non crea un vero vettoriale
L’operazione inversa è più delicata.
Rinominare:
immagine.png
in:
immagine.svg
non converte nulla.
Anche inserire una bitmap all’interno di un documento SVG non trasforma i pixel in curve.
Tecnicamente puoi avere un file SVG che contiene un’immagine raster, ma la componente incorporata rimane raster e continua ad avere i suoi limiti di risoluzione.
Per ottenere una vera versione vettoriale devi trasformare contorni, colori e forme dell’immagine originale in geometrie.
È un problema completamente diverso.
Quando serve una vettorializzazione reale
La vettorializzazione cerca di ricostruire un’immagine raster attraverso tracciati.
Funziona particolarmente bene con:
- loghi;
- simboli;
- disegni con pochi colori;
- forme dai contorni netti.
Diventa molto più difficile con fotografie, sfumature complesse, capelli, texture e dettagli irregolari.
Gli strumenti automatici possono accelerare il lavoro, ma il risultato va valutato.
Un tracciamento eccessivamente dettagliato può creare migliaia di nodi e produrre un SVG enorme. Uno troppo semplificato può invece deformare l’immagine.
La domanda corretta non è quindi “come faccio a convertire tutto in SVG?”, ma:
questa immagine trae davvero vantaggio dall’essere vettoriale?
Come usare SVG sul web in modo corretto
Sul web lo stesso file SVG può essere incorporato in modi diversi e la modalità scelta cambia ciò che puoi fare con l’immagine. Usarlo tramite <img> privilegia semplicità e isolamento; inserirlo inline permette di intervenire sui singoli elementi con CSS e JavaScript, ma richiede maggiore attenzione alla struttura del documento, all’accessibilità e ai contenuti non affidabili.
<img>, SVG inline e CSS background: cosa cambia
Esistono diversi modi per utilizzare SVG in una pagina web.
Il più semplice è come normale immagine:
<img src="logo.svg" alt="Nome azienda">
È una soluzione adatta quando il file deve comportarsi come un’immagine esterna. Il browser può gestire la risorsa separatamente e il testo alternativo segue le normali regole dell’elemento <img>.
Un’altra possibilità è inserire direttamente il markup:
<svg viewBox="0 0 24 24"> ... </svg>
Con un SVG inline gli elementi diventano parte del DOM della pagina. Questo permette maggiore controllo con CSS e JavaScript, ma aumenta anche la quantità di markup e richiede più attenzione ad accessibilità e sicurezza.
La guida SVG in HTML di MDN mostra proprio questa differenza e il ruolo di elementi come title e desc.
Infine, SVG può essere utilizzato come background-image CSS quando l’immagine è puramente decorativa.
È però importante distinguere funzione visuale e indicizzazione: la documentazione Google sulle immagini specifica che Google può individuare le immagini negli attributi src degli elementi HTML, mentre non indicizza le immagini CSS come immagini di Google Images.
Accessibilità: alt, title, desc e ruolo dell’immagine
La tecnica dipende da come inserisci la grafica.
Con:
<img src="grafico.svg" alt="Andamento delle vendite">
l’alternativa testuale viene fornita tramite alt.
Con SVG inline, alt non è l’attributo da utilizzare sull’elemento <svg>. Puoi invece costruire un nome accessibile attraverso title, desc e attributi ARIA coerenti con la struttura del documento.
Per esempio:
<svg role="img" aria-labelledby="titolo"> <title id="titolo">Andamento delle vendite</title> ... </svg>
Se una grafica è puramente decorativa, la strategia cambia: non bisogna obbligare lo screen reader a descrivere contenuti privi di valore informativo.
L’accessibilità non consiste quindi nell’aggiungere automaticamente una keyword dentro un title.
Serve descrivere la funzione reale dell’immagine.
Sicurezza: perché i file SVG non vanno accettati alla cieca
Un SVG non è soltanto una matrice passiva di pixel.
È un documento strutturato che, in determinati contesti, può contenere riferimenti ad altre risorse e funzionalità dinamiche.
Questo non significa che visualizzare qualsiasi SVG sia automaticamente pericoloso.
Il contesto conta.
MDN documenta, per esempio, che quando un SVG viene utilizzato come normale immagine i browser applicano restrizioni specifiche agli SVG caricati come immagini: JavaScript viene disabilitato e vengono limitate diverse risorse esterne.
Quelle restrizioni non equivalgono però al comportamento di un SVG inline o aperto come documento.
Per questo un SVG ricevuto da utenti o da fonti non affidabili dovrebbe essere trattato come contenuto da validare e sanitizzare, soprattutto quando deve essere inserito inline nella pagina o accettato tramite un sistema di upload.
Cambiare l’estensione del file o controllare soltanto il MIME type non sostituisce una sanitizzazione corretta.
SVG in WordPress: il sub-intent resta alla guida dedicata
Nel caso di WordPress il problema diventa più specifico: non devi più soltanto capire cos’è il formato, ma decidere come gestire caricamento, sicurezza e utilizzo nel CMS.
Per questo non ha senso duplicare qui un tutorial già autonomo.
Se devi implementarlo nel CMS, trovi i passaggi nella guida dedicata a come aggiungere SVG a WordPress.
La distinzione fra le due guide è intenzionale:
questa pagina spiega che cosa è SVG e quando usarlo;
la guida WordPress spiega come gestirlo dentro WordPress.
Conclusione
SVG è una scelta molto efficace quando devi rappresentare forme, loghi, icone, diagrammi o illustrazioni che devono adattarsi a dimensioni differenti senza perdere nitidezza.
Non è invece la risposta universale alle immagini sul web.
Per fotografie e scene complesse, i formati raster restano normalmente più adatti. Per grafiche vettoriali molto elaborate, inoltre, la complessità del documento può annullare il vantaggio di peso che spesso viene attribuito automaticamente agli SVG.
Il criterio più utile è semplice:
usa SVG quando la natura della grafica è realmente vettoriale e hai un vantaggio concreto dalla scalabilità, dalla modificabilità o dall’integrazione con il web.
Se devi scegliere il formato solo perché “SVG pesa meno”, “è migliore per la SEO” o “è sempre più veloce”, manca ancora una parte dell’analisi.
Il formato giusto è quello che conserva le caratteristiche necessarie dell’immagine con il minor costo tecnico per il contesto in cui verrà utilizzata.