File SVG: cosa sono, pro e contro dell’utilizzo e come eseguire l’upload nella libreria media WordPress con e senza plugin
Un file SVG (Scalable Vector Graphics) è un formato di immagine vettoriale basato su XML creato per descrivere grafica bidimensionale sia statica che animata. Rispetto ai formati immagine bitmap (raster), i file SVG offrono numerosi vantaggi quali dimensioni ridotte, alta qualità di visualizzazione, zoom senza perdita di definizione e supporto dell’animazione. Inoltre, essendo testo, possono essere cercati, indicizzati e compressi.
Rispetto ai tipi di file più comuni come JPG e PNG che sono composti da migliaia di Pixel, i file SVG sono composti da un insieme di istruzioni che danno vita a grafici e illustrazioni bidimensionali che possono essere ridimensionati senza perdere qualità e risoluzione.
I file SVG possono essere creati con un editor di immagini vettoriali come Adobe Illustrator o Inkscape e possono essere visualizzati in un browser Web utilizzando il tag <svg>.
Cos’è un file SVG
SVG (Scalable Vector Graphics) è un linguaggio di markup XML creato dal W3C utilizzato per descrivere grafica vettoriale bidimensionale, sia statica che animata. È stato sviluppato per superare i limiti dei tradizionali formati grafici bitmap (raster), offrendo funzionalità avanzate come la grafica vettoriale ridimensionabile, il supporto per l’interattività e l’animazione.
Il formato SVG viene spesso confrontato ai formati bitmap più diffusi come PNG, JPEG o GIF. Mentre questi memorizzano le immagini come griglie di singoli pixel, SVG descrive le immagini utilizzando forme geometriche vettoriali (linee, curve, poligoni), testo e filtri di colore. Inoltre, poiché SVG è testo, è possibile cercarlo, comprimere i file, modificarlo con script e renderizzarlo con CSS.
SVG fu inizialmente progettato da un gruppo di lavoro del W3C nel 1999 come standard aperto per la grafica web, con l’obiettivo di portare al web le capacità di rendering dei programmi desktop di grafica vettoriale.
La prima specifica SVG 1.0 è stata pubblicata nel Settembre 2001. Da allora il formato si è evoluto attraverso diverse revisioni incrementali (SVG 1.1, SVG Tiny, SVG Basic ecc), ognuna mirata a migliorare e ampliarne le funzionalità e l’applicabilità.
Oggi tutti i principali browser supportano il rendering di contenuti SVG, e il formato viene utilizzato in moltissimi ambiti, dalla grafica web ai documenti tecnici, dai loghi ai diagrammi.
File SVG: vantaggi, svantaggi e quando usarli
I file SVG (Scalable Vector Graphics) sono il formato standard per la grafica vettoriale su web. Rispetto alle immagini bitmap offrono numerosi vantaggi come dimensioni ridotte, zoom senza perdita di qualità, testo selezionabile e supporto di animazioni ed interattività. Tuttavia presentano anche alcuni potenziali svantaggi come performance ridotte con grafiche complesse e scarsa compatibilità con browser datati.
Vantaggi di SVG
- Qualità grafica indipendente dalla dimensione e risoluzione
- Dimensioni dei file ridotte
- Zoom senza perdita di dettaglio
- Testo selezionabile e ricercabile
- Buona accessibilità e supporto screen reader
- Possibilità di applicare stili CSS
- Animazioni ed effetti avanzati
- Contenuti generabili e modificabili via script
Svantaggi di SVG
- Prestazioni inferiori con grafiche molto complesse
- Supporto limitato nei browser meno recenti
- Mancanza di alcune funzionalità di editor dedicati
- Curva di apprendimento più ripida dei formati raster
- Difficile gestione di immagini con aree di colore complesse
- Dimensioni superiori per icone e immagini semplici
Quando preferire SVG
- Loghi e grafiche vettoriali destinate al web
- Grafici e diagrammi con testo editabile
- Mappe e infografiche cliccabili e zoomabili
- Animazioni ed effetti dinamici avanzati
- Contenuti accessibili tramite screen reader
Quando evitare SVG
- Per foto o immagini con molti dettagli o sfumature
- Per icone ed immagini molto semplici
- Quando è necessaria compatibilità con browser obsoleti
- Per grafiche estremamente complesse e dense di oggetti
- Quando le dimensioni del file sono un requisito critico
File SVG e Browser supportati
I file SVG sono supportati dalla maggior parte dei browser web moderni senza necessità di plugin aggiuntivi. Chrome, Firefox, Safari e Edge offrono un ottimo supporto del formato SVG, consentendo di visualizzare e interagire con grafica vettoriale scalabile direttamente nelle pagine web. L’unica eccezione rilevante è rappresentata da Internet Explorer, che ha integrato il supporto SVG solo parzialmente e in versioni recenti.
| Browser | Versione con supporto SVG | Note |
|---|---|---|
| Chrome | 1.0+ | Supporto completo |
| Firefox | 3.0+ | Supporto completo |
| Safari | 3.0+ | Supporto completo |
| Internet Explorer | 9.0+ | Supporto parziale, richieste fallback |
| Edge | 14.0+ | Buon supporto |
| Opera | 8.0+ | Supporto completo |
| Android Browser | 2.1+ | Supporto discreto |
| Chrome per Android | 18.0+ | Supporto completo |
| Firefox per Android | 4.0+ | Supporto completo |
| iOS Safari | 3.0+ | Supporto completo |
| Opera Mobile | 10.0+ | Supporto completo |
| Blackberry Browser | 7.0+ | Supporto parziale |
| UC Browser | N/D | Supporto discreto |
Come abilitare il supporto SVG per WordPress
WordPress supporta nativamente l’upload di diverse estensioni immagine ma non permette di caricare i file SVG. Per risolvere questo problema è necessario inserire un’istruzione nel functions.php oppure installare un plugin.
Per poter eseguire l’upload dei file SVG nella libreria Media WordPress è innanzitutto necessario abilitare il supporto GZip dei file sul tuo Server Hosting. Successivamente devi installare un plugin oppure inserire un’istruzione nel file functions.php del tema child.
WordPress SVG File upload senza plugin
// Caricare SVG file con WordPress
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '';
}
add_action( 'admin_head', 'fix_svg' );
Nb: Ricorda che i file SVG possono contenere file malevolo e per tal motivo è bene scannerizzare i file SVG prima di eseguire l’upload nella Libreria Media WordPress.
WordPress SVG File Plugin
Tra i migliori plugin gratuiti WordPress per SVG troviamo Safe SVG. Questo plugin ti permetterà di caricare i file SVG nella libreria Media Wp e di eseguire in fase di upload la scansione del file con lo scopo di bloccare eventuali minacce e vulnerabilità SVG/XML.
