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

Nel 1998 vennero pre­sen­ta­ti al World Wide Web Con­sor­tium (W3C) due po­ten­zia­li candidati per lo standard di un lin­guag­gio di markup per grafiche vet­to­ria­li bi­di­men­sio­na­li su base XML: mentre Microsoft e Ma­cro­me­dia (oggi Adobe Systems) portarono avanti il Vector Markup Language (VML), IBM, Adobe e altri si pre­sen­ta­ro­no 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 pub­bli­ca­to il risultato in una “Re­com­men­da­tion” (in italiano “rac­co­man­da­zio­ne”) con il nome di Scalable Vector Graphics (SVG) 1.0 Spe­ci­fi­ca­tion. Con la sua decisione il W3C non è però stato in grado di sod­di­sfa­re tutti i par­te­ci­pan­ti al progetto, così per un lungo periodo di tempo Microsoft ha preferito con­ti­nua­re a servirsi del proprio lin­guag­gio, il VML, nelle sue ap­pli­ca­zio­ni 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 spe­ci­fi­ca­zio­ne con­si­glia­ta per la de­scri­zio­ne di grafici vet­to­ria­li bi­di­men­sio­na­li, il lin­guag­gio XML era visto come una soluzione ottimale per la rap­pre­sen­ta­zio­ne di simili grafiche, di­spo­ni­bi­li 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 stret­ta­men­te necessari dei plug-in esterni, come Adobe SVG Viewer o Batik SVG Toolkit di Apache, per poter leggere e rap­pre­sen­ta­re le grafiche scritte in XML. In al­ter­na­ti­va il webmaster doveva occuparsi delle grafiche PNG come soluzione fallback. Da quando i browser sup­por­ta­no HTML5 non sono più ne­ces­sa­rie misure simili: il parser integrato in HTML5 rende possibile inserire gli elementi SVG di­ret­ta­men­te nel codice HTML senza indicare lo space name XML che svela, so­li­ta­men­te, al browser in­ter­pre­tan­te il contesto degli elementi integrati. Così non c’è neanche bisogno di uno specifico parser come quello contenuto nei plug-in nominati. A dif­fe­ren­za delle grafiche raster/pixel, quelle in formato SVG si con­trad­di­stin­guo­no ge­ne­ral­men­te per il fatto che i singoli oggetti grafici di un’immagine si possono de­scri­ve­re da un punto di vista ma­te­ma­ti­co e non si clas­si­fi­ca­no in un raster di pixel. Per questo motivo le Scalable Vector Graphics possono essere uti­liz­za­te in par­ti­co­la­re per scalare forme geo­me­tri­che, 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 in­for­ma­zio­ni sulle dif­fe­ren­ze tra grafiche vet­to­ria­li e pixel nel nostro articolo com­pa­ra­ti­vo sul tema.

A partire dall’im­ple­men­ta­zio­ne dei browser, l’SVG viene uti­liz­za­to sempre più spesso nei documenti HTML, dove un grande con­tri­bu­to è stato dato anche dal re­spon­si­ve design: le grafiche vet­to­ria­li puntano a rea­liz­za­re il design di progetti web adatti a tutti i di­spo­si­ti­vi e display, so­prat­tut­to grazie alla loro ec­cel­len­te capacità di ri­di­men­sio­na­men­to. Ma da tempo questo non è più l’unico motivo che induce a uti­liz­za­re l’SVG durante la creazione grafica del proprio sito, come l’elenco seguente dimostra ef­fi­ca­ce­men­te:

• file di piccole di­men­sio­ni: tra­la­scian­do le forme molto complesse, le grafiche SVG si con­trad­di­stin­guo­no per i file di piccole di­men­sio­ni, che rimangono invariate anche nel caso di un in­gran­di­men­to della grafica. In­di­pen­den­te­men­te dai di­spo­si­ti­vi che ricorrono ai file di immagine, viene quindi garantita una per­for­man­ce stabile e veloce del server. Il minor tempo di ca­ri­ca­men­to 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 uti­liz­za­re il lin­guag­gio di markup senza li­mi­ta­zio­ni, su tutte le piat­ta­for­me e in com­bi­na­zio­ne con gli altri linguaggi XML.

• Ani­ma­zio­ni di diverso tipo: gli elementi SVG possono essere animati in diversi modi. Perciò può essere uti­liz­za­ta la lingua propria del W3C, SMIL (Syn­chro­ni­zed Mul­ti­me­dia In­te­gra­tion Language), anche se nel frattempo il suo sviluppo è stato sospeso. Inoltre l’SMIL non è stato mai im­ple­men­ta­to su Internet Explorer ed Edge, e non sarà neanche più sup­por­ta­to nelle future versioni di Chrome. Più comune è perciò l’ani­ma­zio­ne con Ja­va­Script, quando volete ad esempio che gli elementi SVG rea­gi­sca­no a spe­ci­fi­che azioni, come click degli utenti o movimenti del mouse. Una terza (limitata) opzione è rap­pre­sen­ta­ta dalle proprietà CSS “animation” e “motion-path” che sono ugual­men­te poco sup­por­ta­te sui browser.

• For­mat­ta­bi­le con CSS: le grafiche in formato SVG possono essere ma­ni­po­la­te con il lin­guag­gio di fogli di stile CSS. Così per mo­di­fi­ca­re l’aspetto della grafica si possono adattare tutti gli attributi di pre­sen­ta­zio­ne tra cui colori, filtri, font, relative di­men­sio­ni, ecc., in un file CSS separato o di­ret­ta­men­te su SVG.

• Elevata com­pa­ti­bi­li­tà: il fatto che le funzioni dei diversi parser si di­stin­gua­no no­te­vol­men­te le une dalle altre ha poca influenza sul rendering delle grafiche, poiché il formato SVG è com­pa­ti­bi­le sia in avanti sia all’indietro. Tutti i browser for­ni­sco­no come risultato l’immagine cor­ri­spon­den­te in base alle proprie pos­si­bi­li­tà e ignorano gli elementi XML sco­no­sciu­ti, senza giungere a com­pli­ca­zio­ni serie.

• Ac­ces­si­bi­le a tutti: le grafiche SVG sono basate sul testo e sono così leggibili dalle macchine per le ap­pli­ca­zio­ni di lettura (screen reader) e da tutti i di­spo­si­ti­vi che possono com­pren­de­re il codice sorgente e ri­pro­dur­lo.

• Visibile nel codice sorgente: se la grafica SVG è segnalata con il markup di­ret­ta­men­te nel documento HTML, si può adattarla senza problemi nell’editor del programma e mo­di­fi­ca­re, ad esempio, il colore o le di­men­sio­ni senza dover ricorrere ad altre soluzioni.

I vantaggi elencati mostrano come sia difficile per i webmaster avanzati ri­nun­cia­re a integrare gli elementi SVG. Le in­nu­me­re­vo­li com­pli­ca­zio­ni con i diversi browser, che hanno fornito per anni argomenti decisivi a sfavore del loro uso, ap­par­ten­go­no ormai al passato; il formato grafico sembra quindi avere solo vantaggi per quanto riguarda l’usabilità, la SEO, l’ac­ces­si­bi­li­tà e tutti gli altri aspetti. Tuttavia, come spesso accade, anche nel formato SVG non è tutto oro quello che luccica. Uno svan­tag­gio decisivo, che va di pari passo con le grafiche vet­to­ria­li, è ad esempio la selezione limitata di programmi. Nel caso delle grafiche pixel, potete scegliere ab­ba­stan­za li­be­ra­men­te tra i programmi di ela­bo­ra­zio­ne di immagini di­spo­ni­bi­li e comuni, mentre per la creazione, la me­mo­riz­za­zio­ne e la con­ver­sio­ne dei file SVG avete bisogno di tool specifici, come Adobe Il­lu­stra­tor o Inkscape. Di con­se­guen­za l’in­tro­du­zio­ne al lavoro con le grafiche SVG è anche più com­pli­ca­ta e richiede più tempo. Tra gli svantaggi del lin­guag­gio grafico si possono perciò nominare i seguenti:

• elevata richiesta di risorse al client: HTML5 ha risolto il problema della necessità di uti­liz­za­re plug-in, ma ha così spostato il processo di rendering sul browser. Il presunto vantaggio di tempi di ca­ri­ca­men­to più veloci, che risultano da un al­leg­ge­ri­men­to del carico del server e da di­men­sio­ni inferiori del file, può però ri­bal­tar­si in fretta. Se il computer del vi­si­ta­to­re non dispone delle capacità ne­ces­sa­rie, le grafiche vet­to­ria­li complesse nel formato SVG possono portare ra­pi­da­men­te a un ral­len­ta­men­to nella ri­co­stru­zio­ne del sito. Per con­tra­sta­re il problema, si dovrebbe ot­ti­miz­za­re il codice SVG, eli­mi­nan­do gli elementi superflui.

• Limitate pos­si­bi­li­tà di ap­pli­ca­zio­ne: per via della tec­no­lo­gia su cui si basa, il formato SVG è l’unità di misura uni­ver­sa­le quando si tratta di creare e scalare semplici grafiche, loghi, font, e così via. Le rap­pre­sen­ta­zio­ni complesse e mo­di­fi­ca­bi­li a po­ste­rio­ri si possono invece rea­liz­za­re solo grazie a un’ar­chi­tet­tu­ra strut­tu­ra­ta e complessa con aree chia­ra­men­te de­li­mi­ta­te. Quando si arriva alle grafiche rea­li­sti­che, il formato SVG raggiunge però i suoi limiti, per via della ristretta varietà di dettagli (pro­fon­di­tà, om­breg­gia­tu­re, effetti di luce, ecc.).

Se volete quindi basare il vostro sito in­te­ra­men­te sulle grafiche vet­to­ria­li nel formato SVG, dovete ri­nun­cia­re a grafiche complesse, oppure crearle o ancora im­ple­men­tar­le in un secondo momento con molta fatica e dedizione. Perciò pia­ni­fi­ca­te le grafiche vet­to­ria­li mi­ra­ta­men­te, laddove emergono i punti di forza della tec­no­lo­gia. Per la rap­pre­sen­ta­zio­ne di grafiche complesse, immagini e foto con­ti­nua­te sem­pli­ce­men­te a uti­liz­za­re i formati co­no­sciu­ti di grafica raster.

Visto che i contenuti SVG vengono descritti per mezzo del lin­guag­gio di markup XML, sono anche soggetti alle ca­rat­te­ri­sti­che sin­tat­ti­che e strut­tu­ra­li, come ogni altro documento XML: il codice è ordinato ge­rar­chi­ca­men­te 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 com­pren­do­no in­for­ma­zio­ni ag­giun­ti­ve 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-tag attributo-nome="Attributo-valore">).

Inoltre possono essere aggiunti commenti e istru­zio­ni. Ogni documento SVG in XML deve portare esat­ta­men­te a un elemento sul piano più elevato (<svg>), al di sotto del quale possono venire annidati molti altri elementi. Op­zio­nal­men­te si può uti­liz­za­re una de­fi­ni­zio­ne del tipo di documento e una di­chia­ra­zio­ne 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ù ne­ces­sa­rio alcun plug-in ag­giun­ti­vo. Al suo posto si possono integrare le grafiche vet­to­ria­li di­ret­ta­men­te nel documento HTML e qui avete a di­spo­si­zio­ne diverse pos­si­bi­li­tà.

L’elemento HTML img è lo standard assoluto per integrare i file grafici in un sito. Essendo un elemento stan­da­lo­ne non prevede nessun contenuto e nessun tag finale. Inoltre nell’HTML decade la barra con­clu­si­va (/). Questo tipo di in­te­gra­zio­ne fornisce la sintassi più comune, motivo per cui WordPress, ad esempio, la applica au­to­ma­ti­ca­men­te alle grafiche SVG. Se il tag img è marcato da un’istru­zio­ne CSS per un design re­spon­si­ve, la grafica vet­to­ria­le si adatta au­to­ma­ti­ca­men­te alle diverse di­men­sio­ni del display senza che sia ne­ces­sa­rio applicare altre im­po­sta­zio­ni. Tuttavia con questo metodo di im­ple­men­ta­zio­ne non avete la pos­si­bi­li­tà di collegare la grafica SVG con un link o con un’ap­pli­ca­zio­ne Ja­va­Script. 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 dif­fe­ren­za di quanto accade con l’elemento image, con questo metodo di im­ple­men­ta­zio­ne avete la pos­si­bi­li­tà di integrare la soluzione fallback. Si può trattare di un messaggio di testo o di una grafica pixel che viene mostrata ai vi­si­ta­to­ri 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 ani­ma­zio­ni con Ja­va­Script. Il metodo object è però sup­por­ta­to solo di rado dai CMS comuni e ciò ne complica l’uso. Il codice per l’in­te­gra­zio­ne di SVG con il tag object, com­pren­si­vo di grafica fallback, si presenta come nell’esempio seguente:

Gli inline frame, meglio co­no­sciu­ti con l’ab­bre­via­zio­ne di iFrame, sono di­spo­ni­bi­li a partire dall’HTML4 e nel frattempo vengono sup­por­ta­ti da tutti i browser. I webmaster uti­liz­za­no questi elementi prima di tutto per integrare contenuti esterni di altri siti, come video di YouTube o cartine geo­gra­fi­che di Google Maps. Come gli elementi object, gli iFrame con­sen­to­no il col­le­ga­men­to della grafica vet­to­ria­le con Ja­va­Script, l’in­se­ri­men­to di link, oltre che la de­fi­ni­zio­ne di un’immagine o di un testo diverso, nel caso in cui la grafica SVG non possa essere caricata. Inoltre sono uti­liz­za­bi­li su tutti i domini. Anche se i CMS comuni sup­por­ta­no questa tec­no­lo­gia, la creazione di un inline frame re­spon­si­ve comporta un notevole impegno. Il seguente esempio mostra la struttura generale di un iFrame SVG che riproduce una grafica PNG al­ter­na­ti­va in caso di problemi di com­pa­ti­bi­li­tà:

Potete integrare una grafica SVG, così come una grafica pixel, anche come sfondo tramite CSS. Così ap­pro­fit­ta­te della sca­la­bi­li­tà senza perdita di qualità che è collegata al formato SVG: lo sfondo SVG si adatta au­to­ma­ti­ca­men­te al viewport, cioè l’area di­spo­ni­bi­le del display del ri­spet­ti­vo di­spo­si­ti­vo, man­te­nen­do invariata la qualità. Se avete una grafica vet­to­ria­le che volete usare come sfondo, create sem­pli­ce­men­te un cor­ri­spet­ti­vo container div:

Al posto di uti­liz­za­re elementi HTML che rimandano a un luogo di me­mo­riz­za­zio­ne esterno del file SVG, potete inserire la grafica anche di­ret­ta­men­te nel codice HTML. Per questo motivo avete bisogno dell’elemento HTML5 <svg>, previsto ap­po­si­ta­men­te per le grafiche SVG. Tramite questo SVG inline decade il processo di ca­ri­ca­men­to di un file esterno, mentre i vantaggi della modifica tramite CSS e Ja­va­Script rimangono invariati. Inoltre potete anche inserire queste grafiche con link.

Il metodo nasconde però anche un chiaro svan­tag­gio relativo all’in­te­gra­zio­ne di un file esterno: l’in­se­ri­men­to di grafiche SVG molto complesse va a scapito del vostro documento HTML che risulterà quindi meno chiaro per via delle righe di codice ag­giun­ti­ve. 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 tec­no­lo­gia non si adatta par­ti­co­lar­men­te 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: