SVG – Scalar Vector Graphics

Warning: Undefined array key "juiz_sps_order" in /membri/saitfainder/wp-content/plugins/juiz-social-post-sharer/inc/front/buttons.php on line 302

Mentre anche sul forum di Altervista si discute del futuro del linguaggio per il web, facciamo un piccolo viaggio temporale. La prima “versione” di web era quella usava molti elementi prefabbricati ed era fondamentalmente orientato al testo, fatto dovuto alla poca banda a disposizione. Da qui si è passato ad un web più colorato e sono stati introdotti i CSS, poi i contenuti multimediali.

Fondamentalmente però le pagine sono ancora costituite da box e la grafica viene realizzata colorando questi box con colori o immagini. Da molto tempo ormai i webmaster avrebbero voglia di avere a disposizione una strumento che permetta di uscire da questi noiosi canoni.

Nascono per queste esigenze Flash o Silverlight. Entrambi questi plugin permettono grafica vettoriale, streaming, interattività. Sono però degli strumenti chiusi, che causano problemi alla navigazione. Quali sono le alternative?

Negli anni si sono accumulate diverse soluzioni. Una, ad esempio, è questa libreria Javascript che permette di disegnare direttamente sulla pagina. Funziona bene e usa dei DIV posizionati in modalità assoluta. Con un po’ di impegno si potrebbe anche realizzare l’antialiasing.

Un’altra soluzione è il VML (Vector Markup Language), un  linguaggio markup che permette di realizzare grafica vettoriale. Nato in seno al W3C non ha mai incontrato fortuna tra gli sviluppatori.

Più recenti invece sono l’SVG (Scalable Vector Graphics) e il tag Canvas inserito nelle specifiche dell’HTML 5.

Partiamo dal secondo. Canvas è stato inventato dal team di Safari per realizzare alcune componenti. E’ pensato come un contenitore su cui è possibile disegnare via Javascript con una semplice API 2D. Le critiche a questo componente non mancano: permette una scarsa interattività, non si integra nel DOM, realizza un’immagine raster immodificabile. Insomma, un oggetto non molto utile.

SVG è invece uno standard W3C che offre un’area su cui è possibile disegnare degli elementi vettoriali. Gli elementi sono degli oggetti che è possibile manipolare in un secondo momento via API DOM e in questo modo è possibile realizzare delle animazioni utilizzando Javascript o SMIL (Synchronized Multimedia Integration Language), un linguaggio studiato proprio per questi scopi.

Purtroppo SVG non è mai stato preso molto in considerazione fino ad ora. Adobe aveva sviluppato un plugin per Explorer mentre solo recentemente i browser standard hanno cominciato a integrare SVG. In particolare volevo parlare del supporto SVG che da il browser Opera.

Opera permette di utilizzare SVG come una qualsiasi immagine. Possiamo quindi assegnare come sfondo del body un’immagine SVG, per esempio, per riempire lo sfondo con un gradiente col vantaggio di avere lo sfondo in pochi byte e in più anche il fatto che occuperà tutta la superficie senza nessuna degradazione della qualità. Opera non supporta l’attributo CSS3 border-radius, ma permette di utilizzare un’immagine SVG per ottenere lo stesso effetto, anzi, possiamo avere angoli di qualsiasi tipo, non solo rotondi. Soprattutto permetterebbe di fare a meno di Flash nella realizzazione di elementi grafici interattivi.

Due sono i problemi che affliggono SVG in questo momento. Il primo è la mancanza di unire facilmente una componente audio alla grafica. E’ vero che nasce per realizzare elementi grafica, ma con la possibilità dell’audio permetterebbe di sostituire Flash in molte applicazioni. In realtà il plugin Adobe prevedeva questa possibiltà. La seconda è che solo con la versione 2 si permetterà una formattazione migliore del testo. Attualmente è possibile definire un box, ma non la formattazione del testo contenuto e quindi realizzare interamente in SVG potrebbe avere dei limiti.

Infine un indubbio vantaggio: ogni oggetto SVG è open source, esattamente come l’HTML. Ciò permette di visionare il codice di altri per migliorare il proprio e quindi di migliorare il livello globale, nonché permettere ai motori di ricerca di indicizzarne il contenuto. Wow!files/files/