Menu
Menu
Contattaci
Il nostro settore richiede uno studio continuo e una forte attenzione all’innovazione. Incentiviamo quindi dei programmi formativi annuali per tutti i componenti del team, con ore dedicate (durante l’orario di lavoro) e serate formative sia online che in presenza. Sponsorizziamo eventi, sia come partner che semplicemente come partecipanti, e scriviamo articoli su quello che abbiamo imparato per essere, a nostra volta, dei divulgatori.
Vai alla sezione TeamScalable 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!
*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.
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?
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 |
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">
Come nei CSS si possono inserire con molteplici modalità di scrittura:
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.
See the Pen Animated Unsubscribe Page by agathaco (@agathaco) on CodePen.
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!
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.
Segui Giuneco sui social