Formato SVG: come si integrano i file di grafica nel vostro sito

Nel 1998 vennero presentati al World Wide Web Consortium (W3C) due potenziali candidati per lo standard di un linguaggio di markup per grafiche vettoriali bidimensionali su base XML: mentre Microsoft e Macromedia (oggi Adobe Systems) portarono avanti il Vector Markup Language (VML), IBM, Adobe e altri si presentarono con il Precision Graphics Markup Language (PGML). Il WC3 non fece però diventare standard nessuna delle due lingue e preferì piuttosto unirle.

Il 4 settembre 2001 è stato pubblicato il risultato in una “Recommendation” (in italiano “raccomandazione”) con il nome di Scalable Vector Graphics (SVG) 1.0 Specification. Con la sua decisione il W3C non è però stato in grado di soddisfare tutti i partecipanti al progetto, così per un lungo periodo di tempo Microsoft ha preferito continuare a servirsi del proprio linguaggio, il VML, nelle sue applicazioni come Internet Explorer (fino alla versione 9). Comunque sia ciò non toglie nulla al successo del formato SVG.

Già nel 2001, quando il W3C ha reso lo Scalable Vector Graphics una specificazione consigliata per la descrizione di grafici vettoriali bidimensionali, il linguaggio XML era visto come una soluzione ottimale per la rappresentazione di simili grafiche, disponibili persino in forma animata. Dato che i browser dell’epoca non erano però ancora pronti per il nuovo formato SVG e, come nel caso di Internet Explorer, l’avevano rifiutato per molto tempo, erano strettamente necessari dei plug-in esterni, come Adobe SVG Viewer o Batik SVG Toolkit di Apache, per poter leggere e rappresentare le grafiche scritte in XML. In alternativa il webmaster doveva occuparsi delle grafiche PNG come soluzione fallback.

Da quando i browser supportano HTML5 non sono più necessarie misure simili: il parser integrato in HTML5 rende possibile inserire gli elementi SVG direttamente nel codice HTML senza indicare lo space name XML che svela, solitamente, al browser interpretante il contesto degli elementi integrati. Così non c’è neanche bisogno di uno specifico parser come quello contenuto nei plug-in nominati.

A differenza delle grafiche raster/pixel, quelle in formato SVG si contraddistinguono generalmente per il fatto che i singoli oggetti grafici di un’immagine si possono descrivere da un punto di vista matematico e non si classificano in un raster di pixel. Per questo motivo le Scalable Vector Graphics possono essere utilizzate in particolare per scalare forme geometriche, icone, disegni tecnici, font, icone e loghi senza perdita di qualità e senza mostrare l'effetto scala o alias tipico della grafica raster dove compaiono singoli pixel. Trovate maggiori informazioni sulle differenze tra grafiche vettoriali e pixel nel nostro articolo comparativo sul tema.

A partire dall’implementazione dei browser, l’SVG viene utilizzato sempre più spesso nei documenti HTML, dove un grande contributo è stato dato anche dal responsive design: le grafiche vettoriali puntano a realizzare il design di progetti web adatti a tutti i dispositivi e display, soprattutto grazie alla loro eccellente capacità di ridimensionamento. Ma da tempo questo non è più l’unico motivo che induce a utilizzare l’SVG durante la creazione grafica del proprio sito, come l’elenco seguente dimostra efficacemente:

• file di piccole dimensioni: tralasciando le forme molto complesse, le grafiche SVG si contraddistinguono per i file di piccole dimensioni, che rimangono invariate anche nel caso di un ingrandimento della grafica. Indipendentemente dai dispositivi che ricorrono ai file di immagine, viene quindi garantita una performance stabile e veloce del server. Il minor tempo di caricamento delle immagini che ne risulta influisce di nuovo sul ranking dei motori di ricerca.

• Open source: il consorzio W3C ha creato l’SVG come standard libero perciò potete utilizzare il linguaggio di markup senza limitazioni, su tutte le piattaforme e in combinazione con gli altri linguaggi XML.

• Animazioni di diverso tipo: gli elementi SVG possono essere animati in diversi modi. Perciò può essere utilizzata la lingua propria del W3C, SMIL (Synchronized Multimedia Integration Language), anche se nel frattempo il suo sviluppo è stato sospeso. Inoltre l’SMIL non è stato mai implementato su Internet Explorer ed Edge, e non sarà neanche più supportato nelle future versioni di Chrome. Più comune è perciò l’animazione con JavaScript, quando volete ad esempio che gli elementi SVG reagiscano a specifiche azioni, come click degli utenti o movimenti del mouse. Una terza (limitata) opzione è rappresentata dalle proprietà CSS “animation” e “motion-path” che sono ugualmente poco supportate sui browser.

• Formattabile con CSS: le grafiche in formato SVG possono essere manipolate con il linguaggio di fogli di stile CSS. Così per modificare l’aspetto della grafica si possono adattare tutti gli attributi di presentazione tra cui colori, filtri, font, relative dimensioni, ecc., in un file CSS separato o direttamente su SVG.

• Elevata compatibilità: il fatto che le funzioni dei diversi parser si distinguano notevolmente le une dalle altre ha poca influenza sul rendering delle grafiche, poiché il formato SVG è compatibile sia in avanti sia all’indietro. Tutti i browser forniscono come risultato l’immagine corrispondente in base alle proprie possibilità e ignorano gli elementi XML sconosciuti, senza giungere a complicazioni serie.

• Accessibile a tutti: le grafiche SVG sono basate sul testo e sono così leggibili dalle macchine per le applicazioni di lettura (screen reader) e da tutti i dispositivi che possono comprendere il codice sorgente e riprodurlo.

• Visibile nel codice sorgente: se la grafica SVG è segnalata con il markup direttamente nel documento HTML, si può adattarla senza problemi nell’editor del programma e modificare, ad esempio, il colore o le dimensioni senza dover ricorrere ad altre soluzioni.

I vantaggi elencati mostrano come sia difficile per i webmaster avanzati rinunciare a integrare gli elementi SVG. Le innumerevoli complicazioni con i diversi browser, che hanno fornito per anni argomenti decisivi a sfavore del loro uso, appartengono ormai al passato; il formato grafico sembra quindi avere solo vantaggi per quanto riguarda l’usabilità, la SEO, l’accessibilità e tutti gli altri aspetti. Tuttavia, come spesso accade, anche nel formato SVG non è tutto oro quello che luccica.

Uno svantaggio decisivo, che va di pari passo con le grafiche vettoriali, è ad esempio la selezione limitata di programmi. Nel caso delle grafiche pixel, potete scegliere abbastanza liberamente tra i programmi di elaborazione di immagini disponibili e comuni, mentre per la creazione, la memorizzazione e la conversione dei file SVG avete bisogno di tool specifici, come Adobe Illustrator o Inkscape. Di conseguenza l’introduzione al lavoro con le grafiche SVG è anche più complicata e richiede più tempo. Tra gli svantaggi del linguaggio grafico si possono perciò nominare i seguenti:

• elevata richiesta di risorse al client: HTML5 ha risolto il problema della necessità di utilizzare plug-in, ma ha così spostato il processo di rendering sul browser. Il presunto vantaggio di tempi di caricamento più veloci, che risultano da un alleggerimento del carico del server e da dimensioni inferiori del file, può però ribaltarsi in fretta. Se il computer del visitatore non dispone delle capacità necessarie, le grafiche vettoriali complesse nel formato SVG possono portare rapidamente a un rallentamento nella ricostruzione del sito. Per contrastare il problema, si dovrebbe ottimizzare il codice SVG, eliminando gli elementi superflui.

• Limitate possibilità di applicazione: per via della tecnologia su cui si basa, il formato SVG è l’unità di misura universale quando si tratta di creare e scalare semplici grafiche, loghi, font, e così via. Le rappresentazioni complesse e modificabili a posteriori si possono invece realizzare solo grazie a un’architettura strutturata e complessa con aree chiaramente delimitate. Quando si arriva alle grafiche realistiche, il formato SVG raggiunge però i suoi limiti, per via della ristretta varietà di dettagli (profondità, ombreggiature, effetti di luce, ecc.).

Se volete quindi basare il vostro sito interamente sulle grafiche vettoriali nel formato SVG, dovete rinunciare a grafiche complesse, oppure crearle o ancora implementarle in un secondo momento con molta fatica e dedizione. Perciò pianificate le grafiche vettoriali miratamente, laddove emergono i punti di forza della tecnologia. Per la rappresentazione di grafiche complesse, immagini e foto continuate semplicemente a utilizzare i formati conosciuti di grafica raster.

Visto che i contenuti SVG vengono descritti per mezzo del linguaggio di markup XML, sono anche soggetti alle caratteristiche sintattiche e strutturali, come ogni altro documento XML: il codice è ordinato gerarchicamente ad albero e comprende elementi e attributi. Gli elementi vengono indicati con l’aiuto di coppie di tag che sono composte da un tag di apertura (<Nome-tag>) e un tag di chiusura (</Nome-tag>), o tramite i così chiamati empty element tag (<Nome-tag/>). Gli attributi comprendono informazioni aggiuntive sugli elementi e si trovano come coppia di valori di parole chiave all’interno di un tag di apertura o di un empty element tag (<Nome-tagattributo-nome="Attributo-valore">).

Inoltre possono essere aggiunti commenti e istruzioni. Ogni documento SVG in XML deve portare esattamente a un elemento sul piano più elevato (<svg>), al di sotto del quale possono venire annidati molti altri elementi. Opzionalmente si può utilizzare una definizione del tipo di documento e una dichiarazione XML per definire il tipo, la versione e la codifica dei segni del documento alla base.   

Come già accennato, al fine di integrare tale grafica in formato SVG in un progetto web non è più necessario alcun plug-in aggiuntivo. Al suo posto si possono integrare le grafiche vettoriali direttamente nel documento HTML e qui avete a disposizione diverse possibilità.

L’elemento HTMLimg è lo standard assoluto per integrare i file grafici in un sito. Essendo un elemento standalone non prevede nessun contenuto e nessun tag finale. Inoltre nell’HTML decade la barra conclusiva (/). Questo tipo di integrazione fornisce la sintassi più comune, motivo per cui WordPress, ad esempio, la applica automaticamente alle grafiche SVG. Se il tag img è marcato da un’istruzione CSS per un design responsive, la grafica vettoriale si adatta automaticamente alle diverse dimensioni del display senza che sia necessario applicare altre impostazioni. Tuttavia con questo metodo di implementazione non avete la possibilità di collegare la grafica SVG con un link o con un’applicazione JavaScript. La riga di codice adatta per integrare l‘SVG con il tag image si presenta così: 

Con il tag object potete integrare i contenuti attivi nel vostro progetto web. Tra questi, oltre agli applet Java, ai film in formato Flash e alle tabelle Excel, rientrano anche le grafiche in formato SVG. A differenza di quanto accade con l’elemento image, con questo metodo di implementazione avete la possibilità di integrare la soluzione fallback. Si può trattare di un messaggio di testo o di una grafica pixel che viene mostrata ai visitatori del vostro sito nel caso in cui il browser non riesca a caricare il file SVG. Inoltre potete inserire dei link nelle forme nel codice sorgente del file di grafica e creare animazioni con JavaScript. Il metodo object è però supportato solo di rado dai CMS comuni e ciò ne complica l’uso. Il codice per l’integrazione di SVG con il tag object, comprensivo di grafica fallback, si presenta come nell’esempio seguente:

Gli inline frame, meglio conosciuti con l’abbreviazione di iFrame, sono disponibili a partire dall’HTML4 e nel frattempo vengono supportati da tutti i browser. I webmaster utilizzano questi elementi prima di tutto per integrare contenuti esterni di altri siti, come video di YouTube o cartine geografiche di Google Maps. Come gli elementi object, gli iFrame consentono il collegamento della grafica vettoriale con JavaScript, l’inserimento di link, oltre che la definizione di un’immagine o di un testo diverso, nel caso in cui la grafica SVG non possa essere caricata. Inoltre sono utilizzabili su tutti i domini. Anche se i CMS comuni supportano questa tecnologia, la creazione di un inline frame responsive comporta un notevole impegno. Il seguente esempio mostra la struttura generale di un iFrame SVG che riproduce una grafica PNG alternativa in caso di problemi di compatibilità:

Potete integrare una grafica SVG, così come una grafica pixel, anche come sfondo tramite CSS. Così approfittate della scalabilità senza perdita di qualità che è collegata al formato SVG: lo sfondo SVG si adatta automaticamente al viewport, cioè l’area disponibile del display del rispettivo dispositivo, mantenendo invariata la qualità. Se avete una grafica vettoriale che volete usare come sfondo, create semplicemente un corrispettivo container div:

Al posto di utilizzare elementi HTML che rimandano a un luogo di memorizzazione esterno del file SVG, potete inserire la grafica anche direttamente nel codice HTML. Per questo motivo avete bisogno dell’elemento HTML5 <svg>, previsto appositamente per le grafiche SVG. Tramite questo SVG inline decade il processo di caricamento di un file esterno, mentre i vantaggi della modifica tramite CSS e JavaScript rimangono invariati. Inoltre potete anche inserire queste grafiche con link.

Il metodo nasconde però anche un chiaro svantaggio relativo all’integrazione di un file esterno: l’inserimento di grafiche SVG molto complesse va a scapito del vostro documento HTML che risulterà quindi meno chiaro per via delle righe di codice aggiuntive. La soluzione migliore sarebbe quella di ridurle, ma nel dubbio, in caso di grafiche molto complesse, dovreste ricorrere piuttosto a una variante che si basa su un file SVG esterno. Questa tecnologia non si adatta particolarmente bene nemmeno per le grafiche che compaiono più volte all’interno di una singola pagina.

Nel seguente esempio abbiamo inserito una piccola variante SVG della bandiera italiana nella struttura di base HTML: