Eccoci, il momento è arrivato.
E’ ora di usare seriamente le SVG, perchè sono fighissime e la nuova ondata di material e flat design, ci calza proprio a pennello.
Con le statistiche che portano sempre di più la bilancia verso i dispositivi mobile, possiamo finalmente sfruttare questa “tecnologia” che il W3C sta portando avanti dal 2003, e ora che quasi tutti i browser supportano i SVG senza plugin o viewer necessari, beh, possiamo/dobbiamo sfruttare il codice XML per velocizzare e soprattutto migliorare la renderizzazione delle icone e dei loghi.
Non mi dilungo sui vantaggi vari che SVG portano, dico solo una cosa: sono vettoriali.
Stop, a buon intenditor poche parole.
Vera forza di un vettoriale SVG è che è semplicemente del testo XML, con uno standard proprio e anche abbastanza semplice.
Ci sono decinaia di software e applicativi per disegnare una immagine SVG, io uso Adobe Illustrator.
Vera natura Si potrebbero anche creare con Notepad, ma siamo sinceri, chi si mette a scrivere codice a mano di una immagine?
Disegniamo la nostra icona
parto con Illustrator, un nuovo disegno da 200px x 200px.
e disegniamo l’icona. Per essere efficienti, una SVG dovrebbe essere il più semplice e lineare possibile, perchè ogni punto del tracciato deve essere codificato, quindi meno punti, meno codice.
Fatto? Da qui è abbastanza semplice.
File > Salva con nome… formato SVG.
si potrebbe anche usare il formato SVGZ, compresso, ma è più difficile da capire per quello che serve a me in questo tutorial.
Qua si può anche decidere di che colore avere la maionese, tante sono le opzioni. Noi prendiamo tutto per buono, oppure seguiamo queste indicazioni di Adobe per una ottimale configurazione per il web:
- Profile: SVG 1.1
- Fonts: Type — SVG; Subsetting — Only Glyphs Used (if you use a special font for your artwork)
- Image Location: Link
- CSS Properties: Style Elements
- Decimal Places: 1
- Output Fewer <tspan> Elements: Select this option
- Use <textPath> Element For Text On Path: Select this option
salviamo.
a questo punto abbiamo un semplice file svg che può essere tranquillamente usato nel nostro HTML con una chiamata del tipo:
<img src="nuvola.svg" width="200" />
semplice, indolore e da provare.
Ma i vantaggi sono altri…
ok, figo, ora per le icone userò per sempre i file SVG, ma… ma se ho le icone di due misure diverse? di tre colori diversi? e se troppo piccola diventa troppo sottile? se se se se. le SVG servono apposta per questo.
Abbiamo detto che sono immagini scritte in XML, quindi in TESTO, quindi posso aprirle in NotePad e leggere il contenuto:
UAO!
quindi, se copio il codice da <svg> a </svg> e lo incollo, viene visualizzata? si, tutta.
manca solo la dimensione, che prima avevamo impostato con width=”200″, facciamo anche in questo codice e stop.
<svg width="200" version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 566.9 566.9" enable-background="new 0 0 566.9 566.9" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="3.864" d=" M361.6,411c15.4,0,25.4,0,40.8-0.1c6.7,0,13.4-0.6,20-1.8c35.6-6.9,58.2-40.4,59.7-67.2c2-36-19.1-66.7-52.7-77.7 c-1.9-0.6-3.7-1.4-5.5-2.1c12.2-28.4,8.9-49.4-9.7-65.2c-15.7-13.2-42.1-17.9-65.3,0c-0.7-1.2-1.1-1.9-1.4-2.6 c-25-56.2-94.3-76.6-144.6-44.5c-31.5,20.1-47.5,49.4-47.3,87c0,5.1-1,7.7-5.5,10.2c-33.3,18.2-51.3,57.7-43.1,93.9 c9.6,42.5,44.5,70.1,89.1,70.2"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="7" stroke-miterlimit="3.864" d=" M354,394.2c-22.3,22.8-44.9,45.3-67.5,67.8c-3.8,3.8-7.8,3.6-11.6-0.2c-22.4-22.4-44.9-44.7-67.1-67.4c-1.8-1.8-3-6.1-2.1-8.2 c0.9-2,4.8-3.8,7.5-3.9c13.8-0.4,27.6-0.2,42.2-0.2c0-22.6,0-75.5,0-97.1c0-8.6,1.2-9.8,9.8-9.8c10.7,0,21.4,0,32.1,0 c7.4,0,8.9,1.5,8.9,8.8c0,19.7,0,70.8,0,90.5c0,2.3,0,4.5,0,7.6c14.3,0,28.1-0.1,41.8,0.1c2.5,0,6.7,1,7.1,2.4 C355.9,387.7,355.9,392.3,354,394.2z"/> <circle fill="none" stroke="#000000" stroke-width="7" stroke-miterlimit="3.864" cx="283.1" cy="282.6" r="269.3"/> </svg>
prego, prego, fai pure la prova.
Vediamo cosa potremmo cambiare:
- anzitutto la dimensione dell’icona stessa (width=”200″) all’interno del tag <svg>, che può essere espresso anche in percentuale %
- il colore del singolo tracciato dell’icona, sostituendo stroke=”#000000″ nel nuovo colore
- lo spessore del singolo tracciato, modificando stroke-width=”7″
- eventualmente cambiare il riempimento da fill=”none” a fill=”colore”
altre modifiche comporterebbero rivoluzionare l’icona, quindi meglio rifarla o fare un set di icone pronte all’uso.
Sono furbo, uso una funzione php!
Implementare le immagini SVG abbiamo capito essere una figata. Con un minimo di conoscenza php, posso creare una funzione che, cambiano di parametri che le passo, mi visualizzano l’icona in diverse formati, a seconda di dove voglio usare la stessa.
<?
function fIcon_Nuvola($Width="100",$strokeWidth="10", $strokeColor="FFFFFF", $fill="none"){
?>
<svg width="<?=$Width?>" version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 566.9 566.9" enable-background="new 0 0 566.9 566.9" xml:space="preserve">
<circle fill="<?=$fill?>" stroke="<?=$strokeColor?>" stroke-width="<?=$strokeWidth?>" stroke-miterlimit="3.864" cx="283.1" cy="282.6" r="269.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="<?=$strokeColor?>" stroke-width="<?=$strokeWidth?>" stroke-linecap="round" stroke-miterlimit="3.864" d="
M361.6,411c15.4,0,25.4,0,40.8-0.1c6.7,0,13.4-0.6,20-1.8c35.6-6.9,58.2-40.4,59.7-67.2c2-36-19.1-66.7-52.7-77.7
c-1.9-0.6-3.7-1.4-5.5-2.1c12.2-28.4,8.9-49.4-9.7-65.2c-15.7-13.2-42.1-17.9-65.3,0c-0.7-1.2-1.1-1.9-1.4-2.6
c-25-56.2-94.3-76.6-144.6-44.5c-31.5,20.1-47.5,49.4-47.3,87c0,5.1-1,7.7-5.5,10.2c-33.3,18.2-51.3,57.7-43.1,93.9
c9.6,42.5,44.5,70.1,89.1,70.2"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="<?=$strokeColor?>" stroke-width="<?=$strokeWidth?>" stroke-miterlimit="3.864" d="
M354,394.2c-22.3,22.8-44.9,45.3-67.5,67.8c-3.8,3.8-7.8,3.6-11.6-0.2c-22.4-22.4-44.9-44.7-67.1-67.4c-1.8-1.8-3-6.1-2.1-8.2
c0.9-2,4.8-3.8,7.5-3.9c13.8-0.4,27.6-0.2,42.2-0.2c0-22.6,0-75.5,0-97.1c0-8.6,1.2-9.8,9.8-9.8c10.7,0,21.4,0,32.1,0
c7.4,0,8.9,1.5,8.9,8.8c0,19.7,0,70.8,0,90.5c0,2.3,0,4.5,0,7.6c14.3,0,28.1-0.1,41.8,0.1c2.5,0,6.7,1,7.1,2.4
C355.9,387.7,355.9,392.3,354,394.2z"/>
</svg>
<?
}
che viene chiamata così:
<?=fIcon_Nuvola($Width="100%",$strokeWidth="10", $strokeColor="#FFFFFF",$fill="none")?>
modificando i parametri ottengo nuove renderizzazioni dell’icona. Se non li specifico, recupera quelli di default della funzione. Attento, nella funzione di esempio ho volutamente specificato il fill solo al cerchio esterno, in modo da mantenere l’aspetto iniziale ma inserendo un colore background differente.
nell’esempio:
<?=fIcon_Nuvola("20%","5","#FFFFFF")?>
<?=fIcon_Nuvola("20%","10","#FFFFFF","#ff9900")?>
<?=fIcon_Nuvola("20%","20","#FF99FF","#000000")?>