SVG: Grafica di Nuova Generazione

Cosa sono le SVG?

Scalable Vector Graphics, letteralmente Grafica Vettoriale Scalabile.
Si tratta una derivazione dell’XML (cioè di un’applicazione del metalinguaggio per la definizione di linguaggi di markup posto a base degli sviluppi del Web) ed è una raccomandazione del consorzio W3C (vale a dire, uno standard a tutti gli effetti), che si pone l’obiettivo di descrivere figure bidimensionali statiche e animate.

Viene pubblicato nel 2001, ma i browser dell’epoca non erano ancora pronti per il nuovo formato SVG e, come nel caso di Internet Explorer, l’avevano addirittura rifiutato per molto tempo; erano strettamente necessari dei plug-in esterni per poter leggere e rappresentare le grafiche scritte in XML. In alternativa il webmaster doveva occuparsi delle grafiche PNG come soluzione di fallback; per fortuna, con la versione di SVG 1.1 rilasciata nel 2011 e un browser aggiornato, non abbiamo più bisogno né di plug-in né di una PNG di fallback.

Bene, ora che abbiamo fatto un po’ di chiarezza e su cosa sono le SVG e sulla loro storia, passiamo alle parti più interessanti e divertenti!

Perché usare SVG

• Alta risoluzione
• Velocità di caricamento
• Animazione
• Indicizzazione
• Supporto esteso dei browsers*

*La domanda che ci poniamo per prima infatti, quando ci interfacciamo con qualcosa di nuovo è: lo posso davvero usare? È compatibile con tutti i browser?
Ebbene sì, Can I Use (sito specializzato nella valutazione della compatibilità cross browser) ci mostra infatti una sfilza di verdi!

Passiamo ora alla parte più pratica.

Come si creano le immagini in SVG?

Le SVG possono essere create con programmi di grafica vettoriale come Illustrator, Affinity Design, Inskape, Sketch e molti altri tool gratuiti disponibili in rete.

Una volta creata la nostra illustrazione, sarà il programma stesso a generare un codice che identificherà ogni elemento al suo interno; tuttavia quello che otterremo dal salvataggio sarà una prima versione grezza e piuttosto pesante, perché i programmi di grafica inseriscono elementi spesso inutili, che andremo tranquillamente ad eliminare. Come fare? Abbiamo un grandissimo alleato: SVGOMG

No, non è SVG OH MY GOD ma SVGO MISSING GUI.
Uno strumento online gratuito che ci aiuterà a dare una maggiore pulizia, una formattazione visiva e soprattutto che snellirà il nostro codice per renderlo più leggero!
Nel seguente screenshot vi mostro una schermata di SVGOMG, per poterlo usare ci basterà inserire il codice oppure direttamente il file e “giocare” con i parametri sulla destra per ottimizzare appunto il nostro codice.

Ecco un esempio di codice pre SVGOMG; è un vero casino!

Ed ecco lo stesso codice dopo SVGOMG, molto meglio vero?

Come posso inserire la mia grafica SVG in una pagina?

Niente di più semplice, di seguito alcuni possibili metodi, con tag diversi:

<img src="esempio.svg" alt="Integrare SVG con il tag image" />

<iframe src="esempio.svg" scrolling="no"> </iframe>

<object data="esempio.svg" type="image/svg+xml"> </object>

Altri si affidano direttamente ai CSS:

.esempio{
Background-image: url(esempio.svg);
}

Quello che non vi ho ancora detto, però, è che le SVG possono essere modificate ed animate con i CSS, ma nessuna delle soluzioni precedenti ci permette di farlo in modo diretto; l’unico tag che ci da questa possibilità è

<svg></svg>

Qui sotto vi riporto alcune proprietà CSS condivise con i normali fogli di stile per il web e alcune proprietà esclusive per SVG:

Proprietà condivise con i CSS

Proprietà esclusive per SVG

font, font-family, font-size, font-stretch, font-size-adjust, font-style, font-variant, font-weight, direction, text-spacing, visibility, text-rendering, text-decoration, unicode-bidi, word-spacing, writing-mode, clip-path, mask-opacity, filter, pointer-events, image-rendering, color, clip, cursor, display, overflow

Clip-rule, flood-color, flood-opacity, color-profile, color-rendering, fill, stop-opacity, kerning, tech-anchor, fill-opacity, fill-rule, marker, marker-end, marker-mid, marker-start, stroke, stroke-width, stroke-dashoffset, stroke-dasharrey, stroke-linejoin, stroke-linecap, stroke-miterlmit, stroke-opacity, stop-color, lighting-color, enable-background,  shape-rendering, baseline-shift, glyph-orientation-vertical, glyph-orientation-horizontal, alignment-baseline

Fogli di stile interni, inline ed esterni

Proprio come per i documenti HTML, anche per SVG i fogli di stile possono essere esterni, inline e interni al documento.
Nei fogli di stile interni, lo stile può essere inserito come da esempio:

<style> 
   <![CDATA[ 
   .esempio{
      Fill: #cd3512;
      Stroke: #000000;
      Stroke-width: 4;
   }
   
</style>

NB: Il W3C raccomanda sempre di inserire il costrutto CDATA, 
dato che le dichiarazioni CSS possono contenere caratteri come > , 
che possono generare conflitti.

In modalità inline, le proprietà CSS vengono dichiarate tramite l’attributo Style:

<esempio cx="60"cy="60" r="50" style="fill:#cd3512; fill-opacity:1; stroke:#000000; stroke-width:4; stroke-opacity:1"/>

Ed infine i fogli di stile esterni, che possono essere richiamati nella pagina in modo classico (nella head) oppure, come in questo caso inclusi nel file SVG tramite l’istruzione xml-stylesheet, da collocare prima dell’elemento SVG:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg  version="1.1" width="200" height="200" viewBox="0 0 1000 500">

Colori in SVG

Come nei CSS si possono inserire con molteplici modalità di scrittura:

• Keyword: acqua, black, blue, fucsia, gray, green, white
• Codice esadecimale: #000000
• Codice esadecimale compatto: #000
• Forma RGB: rgb(000, 000, 000)

Punti di forza di SVG

Una delle cose belle delle SVG è il fatto che sono Open Source.
È possibile fare delle animazioni che possono essere un mezzo potente per trasmettere un messaggio e possono guidare gli utenti ad intraprendere un’azione ben precisa; inoltre riducono il tempo di attesa percepito e se costruite bene possono essere assolutamente utili e performanti.
Vi farà molto piacere sapere che le SVG pesano pochissimo (sono molto più leggere rispetto alle classiche jpg, png, gif, …), non sgraneranno mai, sono formattabili con i CSS e possono essere anche molto divertenti ed interattive.
E poi diciamocelo, senza l’uso delle SVG non stiamo usando il web al massimo del suo potenziale! 🙂

Per i neofiti, ecco a confronto delle immagini raster e vettoriali. Semplificando, le immagini raster sono formate da pixel a cui è assegnato un colore e con un eventuale ridimensionamento attuato dal browser tenderanno a sgranare, il vettoriale invece viene generato da calcoli matematici, sarà quindi il browser stesso a rielaborare la figura per adattarla alle dimensioni dello schermo.

Punti di debolezza di SVG

• Limitate possibilità di applicazione: SVG è il formato migliore quando si tratta di creare e scalare semplici grafiche, loghi, font, e così via. Quando ha la necessità di 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, dovrete rinunciare a grafiche estremamente complesse.

• Non si può modificare un tracciato in ambiente di sviluppo direttamente con i CSS, ma occorre usare Javascript. Ci sono alcune librerie dedicate che possono aiutarci: GreenSock, Snap.svg, SVG.js, vivus.js, (e molte altre).

Riepilogo delle opportunità offerte da una animazione

• L’animazione può essere un mezzo potente per trasmettere un significato
• Può guidare i tuoi utenti ad intraprendere un’azione
• Riduce il tempo percepito nell’attesa di un caricamento o di un contenuto

See the Pen Animated Unsubscribe Page by agathaco (@agathaco) on CodePen.

Rischi

• HTML5 ha risolto il problema della necessità di utilizzare plug-in, ma ha così spostato il processo di rendering sul browser. Se il computer del visitatore non dispone delle capacità necessarie, le grafiche vettoriali complesse nel formato SVG possono portare a un rallentamento nella ricostruzione del sito (bisogna ricordarsi sempre di utilizzare SVGOMG).
• La sua introduzione non significa automaticamente che sarà un successo, ci sarà bisogno di investimenti in termini di risorse e tempo da dedicare per la sua corretta applicazione e per sfruttarne al massimo le potenzialità.

Divertiamoci con i CSS!

Ecco alcuni esempi estremamente semplici.
Qui ho creato una piccola animazione con la bordatura che disegna il logo di Giuneco ed il CSS usato è pochissimo!

See the Pen Giuneco contorno by Jessica (@sysmajex) on CodePen.

Un altro esempio è un ipotetico loading:

See the Pen Loading Giuneco by Jessica (@sysmajex) on CodePen.

Passiamo adesso a delle grafiche un po’ più complesse. Le possibilità con l’utilizzo JavaScript sono nettamente superiori; prendiamo ad esempio l’animazione di una piccola fabbrica di panda! (credits: Sarah Drasner )

See the Pen Responsive Huggy Laser Panda Factory by Sarah Drasner (@sdras) on CodePen.

In questo CodePen potrete notare come al singolo click su una delle leve parta la fabbricazione di un piccolo panda, e ad ogni leva corrisponda un panda differente. In più la grafica è stata progettata a blocchi così da permettere all’animazione di adattarsi alle varie risoluzioni dello schermo.

Fiesta! Ecco un altro esempio di animazione interattiva (credits: Sarah Drasner ):

See the Pen Make a Party by Sarah Drasner (@sdras) on CodePen.

Adesso che conoscete meglio le SVG ed il loro potenziale, potrete sbizzarrirvi nel crearne di vostre; condividetele qui nei commenti, sarei molto felice di vedere i vostri esperimenti!

Fonti e Ringraziamenti

https://it.wikipedia.org/wiki/Scalable_Vector_Graphics
https://www.html.it
http://www.dmi.unict.it/~battiato/download/SVG_Part_I.pdf
Un ringraziamento va sia al CSSDay2018 organizzato da GRUSP sia ad Andrea Barghigiani che mi hanno fatta incuriosire!
Sarah Drasner alla quale ho preso come esempi l’adorabile fabbrica di Panda e l’animazione Party e agathaco per l’animazione unsubscribe.