DI COSA STIAMO PARLANDO

Scalable Vector Graphics, comunemente abbreviato SVG,  è un linguaggio usato per descrivere testualmente la grafica vettoriale. Probabilmente gli amici dinosauri sfuggiti all’estinzione ricorderanno il disegno tecnico sperimentale che si studiava a scuola, realizzato a computer con un programma di nome Logo. Questo Logo programmava il disegno, gli si diceva, ad esempio, di creare un cerchio con determinate coordinate e raggio, poi linee e tutto il resto. Il vantaggio di questo sistema è risalire alla sorgente pura di un disegno vettoriale, ovvero ricordare esattamente le operazioni compiute per crearlo. In questo tutorial non starò certo a spiegarvi come puntare un compasso con Logo, ma sfrutteremo il codice svg con il reverse engineering, ovvero partendo da una grafica già pronta andremo a ricavarne il codice di testo SVG.

 

PARTIAMO DA ILLUSTRATOR

Per questa icona d’esempio ho disegnato un cerchio su illustrator, inserito in uno spazio di 28 x 28 pixel. Fate attenzione ad usare un solo colore, perché ogni colore verrà tradotto in formato testuale sotto forma di codice.

fill: “#colore” (colore di riempimento del tracciato)

stroke: “#colore” (colore del bordo del tracciato)

In caso vogliate usare più colori, in seguito dovrete sapere dove mettere le mani. Ecco quindi il nostro disegno d’esempio: un cerchio nero con stagliata all’interno una piuma

1

 

GENERARE IL CODICE SVG

Non ci interessa salvare l’immagine, Ricordatevi che ogni singolo caricamento di immagine in un sito richiede una connessione, uno scambio dati fra i molteplici protocolli. Molte immagini rallentano il caricamento di una pagina, quindi perché non sfruttare gli svg inserendoli direttamente nel codice html principale? Esattamente quello che faremo. Andiamo quindi a salvare l’immagine in formato svg, con un unico accorgimento.

2

Invece di generare un nuovo file, chiediamo ad illustrator di mostrarci il testo. Quindi si aprirà il blocco note testuale di default del vostro sistema operativo, ed ecco generato il codice svg.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<svg 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 28 28″ style=”enable-background:new 0 0 28 28;” xml:space=”preserve”>
<g>
<g>
<path d=”M14,0C6.3,0,0,6.3,0,14s6.3,14,14,14s14-6.3,14-14S21.7,0,14,0z M18.8,22.4l0.9,0.8l-1-0.7L18.6,22l0-0.5L18.4,22l0,0.6
l-0.2-0.6l0-0.5l-0.8,0.2L17,22.4l0.2-0.6l0.7-0.3l-0.8,0.1l0.5-0.2L17.6,21l-0.7,0.1l-0.6-0.6l0.7,0.4l0.5-0.2l-0.9-0.4l-0.7-0.6
L15,19.5l0.9,0.1l0.4,0.2l-0.7-0.5L14.7,19l1.1,0L15,18.7l-0.6-0.6l-0.5-0.4l0.5,0l-0.7-0.3l-0.6-0.8l0.6,0.1L12.5,16l0.5-0.2
l-0.7,0L11.6,15l1.4,0.2l-1.5-0.3l2.2-0.2L13,14.6l-1.7-0.2L11,13.9l-0.5-0.5l1.5,0.3l-1.9-0.6l1.5,0.1l0.5-0.1l-0.6-0.1L11,12.7
l0.3-0.2l-0.4,0l-0.4-0.5l0.2-0.1l-0.3-0.1l-1.2-0.9l0.7,0.2l-1.1-0.5l0.8-0.1l-1.2-0.3l0.9,0.1l0.7-0.3L8.4,10l0.5-0.3L8.5,9.5
l-0.4,0l0.7-0.3L8.2,9.3L7.5,8.5l0.7,0.3L7.4,8.2L8,8.3L7.6,7.9L7.3,7.4l0.9,0.3L7.6,7.2L7,7.1l0.2-0.3l0.3,0.1L7.1,6.5l0.4,0
L6.9,6.1L6.7,5.7l0.2-0.5l0.5,0.4L7.2,5.2l0-0.3l0.7,0.4L7.2,4.6l0.6,0.1L7,4.2l0.6,0.2L8.1,5l12.7,19.6l-2.1-2.9L18.8,22.4z
M8.5,5.3L8.3,4.9l0-0.3l0.1-0.5l0.3,0.1l0.2,0.9l0.2-0.7l0.2,0.9L9.5,6l0.1-0.8L9.5,4.1l0.2,0.8l0.2-0.5l0.7,0.5l0.1,0.7l0.1-0.7
l0.9,0.8l0.5,0.8l0.1,0.9l0.4-0.3l-0.1-0.5L13,7.1l0,0.9l0.5-0.8l0,0.4l-0.2,0.8l0.4,0.1L13.9,8l0.2,0.5l0,0.3l0.2-0.4l0.2,0.4
l0.2,0.8l0.1,0.7l0.1-0.7l-0.1-0.2l0.1,0.1l0,0l0.5,1.1l0.1,0.6l0.1,1.5l0.3-1.9l0.1,0.6l0.3,0.5l0.1,1l0.2-0.8l0.1,0.5l0,0.5
l-0.1,1.3l0.6-1.2l0-0.2l0.2,0.6l0.1,0.3l0.1,0.2l0.3-0.6L17.5,14l0.1,0.8l0.1,0.8l0.3-0.7l0.2,1.5l-0.1,1.4l0.2-0.1l0.6,0.1
l0.3,0.7L18.9,18l-0.5,0l-0.7,0.9l0.8-0.3l0.8,0.1l0.2,0.1l-0.7,0l-0.7,0.3l0.8,0l0.5,0l0.9,0.3l-0.8,0.1l-0.9,1l0.8-0.5l0.9,0
L19.6,20l0.6,0.3l-1-0.1l0.8,0.4l-0.8-0.2l-0.4,0.5l0.2,0.4l0.2-0.3l0.7,0l-0.4,0.1l-0.3,0.1l0.3,0.3l-0.3,0l0,0.2l1.6,2.9
L8.5,5.3z”/>
<polygon points=”14.8,9.3 14.9,9.5 14.9,9.4 “/>
</g>
</g>
</svg>

In verde ho evidenziato quello che è il codice essenziale. Vediamolo ora con un semplice copia/incolla all’interno di un editor html. Quali sono i vantaggi immediati? Vi chiedo da subito di usare il classico tasto dentro del mouse o l’ispeziona elemento: noterete che non esiste alcuna immagine, nonostante ce l’abbiate sotto gli occhi, proprio perché stiamo dicendo al broswer come disegnare qualcosa, quindi generiamo immagine attraverso il codice.

Un secondo vantaggio indiscusso? Vi metto a confronto la stessa immagine salvata in formato raster statico png e in formato testuale svg. Non solo ho ridotto ad un decimo il peso del file, ma ottengo un disegno scalabile di precisione, nitido e perfetto dall’infinitamente piccolo all’infinitamente grande, animabile, il cui codice non richiede un file a parte ma può essere inserito nel html, quindi successivamente compresso ulteriormente. Notevole.

cd

 

OTTIMIZZARE LE IMMAGINI, USIAMO IL CSS

Qui viene il bello. Dal momento in cui le forme generate fanno parte del codice html, possiamo sfruttare le classi css dei fogli di stile per colorare ed animare i nostri disegni. Questo css può essere scritto sia “inline”, quindi ogni volta che inseriamo una icona in una pagina html, ma ancora meglio può essere definito una singola volta nel foglio di stile principale .css, quindi richiamato infinite volte senza affaticare di calcoli inutili il nostro broswer. Pensate semplicemente alla velocità di caricamento e quanto tempo si risparmia sui grandi numeri.

In questo primo esempio vi mostrerò come animo una icona usando il nostro primo codice, definendo alcune classi.

<style>

.stroke-solid {
stroke-dashoffset: 0;
stroke-dashArray: 300;
stroke-width: 3px;
transition: stroke-dashoffset 0.3s ease, opacity 0.5s ease;
}

.stroke-under {
stroke-dashoffset: 00;
stroke-dashArray: 300;
stroke-width: 2px;
}

.icona {
transform: scale(2.5);
transform-origin: -10px -10px;
fill: #808080;

}

#play:hover .stroke-solid {
opacity: 1;
stroke-dashoffset: 300;
}

#play {
cursor: pointer;
}

</style>

<path class=”stroke-under” fill=”none” stroke=”#808080″ d=”M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5″/>
<path class=”stroke-solid” fill=”none” stroke=”#dcdcdc”d=”M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5″/>
<path class=”icona” d=”……………………./>

 

CREARE IL PROPRIO SET

Una volta definite le classi nel foglio di stile, potete replicare la regola un numero infinito di volte. Per il mio sito ho messo quattro icone di diversi social network.

 

VARIANTE: SVILUPPARE UN PERCORSO

Giocando con le classi che abbiamo appena analizzato, le possibilità sono infinite. Il logo del mio studio, ad esempio, potrebbe essere ricostruito con due singole linee spesse (meglio chiamarli percorsi) i cui vertici sono arrotondati. Con i percorsi svg ottengo il marchio, con le transizioni css posso animare il risultato.

Per oggi è tutto. Sperimentate, giocate, sbagliate, migliorate e divertitevi. Non c’è migliore studio della pratica. Ciao a tutti.

Comments

comments