Crea icone SVG che catturano i tuoi clienti

svg
Tempo stimato di lettura: 4 minuti, 24 secondi
Pubblicato il 2 maggio 2016

Nel design e nella realizzazione dei siti web si cerca sempre di dare importanza all’usabilità di un sito web, ma anche al design accattivante che attiri l’occhio del cliente in misura maggiore rispetto a quello che può fare un sito web statico. In questo articolo voglio parlarti di come migliorare l’interfaccia di una pagina web utilizzando icone svg con l’effetto hover sulle immagini.

Vedi l’esempio

In un precedente articolo di Webhouse si è già parlato delle immagini svg con una guida generale ed esaustiva sull’argomento.

Ma perché utilizzare un’immagine svg in un sito web?

Le immagini jpg o png sono formate da pixel e quando il sito web viene visualizzato su uno schermo grande, queste immagini  potrebbero risultare sgranate. Questo non può accadere con le immagini vettoriali come le svg che sono formate da vettori, cioè da punti che collegati tra di loro formano linee e quindi forme che non sgranano e che possiamo vedere a qualsiasi risoluzione senza che perdano la loro qualità.
L’immagine svg non va usata sempre, ma solo quando dobbiamo utilizzare un logo o un’immagine con pochi dettagli, mentre nel caso opposto è meglio utilizzare un’immagine raster.

SVG utilizza il linguaggio SMIL, acronimo di Synchronized Multimedia Integration Language (Linguaggio di integrazione e sincronizzazione di files multimediali) ed è simile al linguaggio a marcatori (TAG) come l’html, ed è stato sviluppato come una estensione xml, che consente l’integrazione nei siti web di filmati, suoni e testo.

Il linguaggio SMIL si differenzia dal linguaggio html sia per gli elementi che per i loro attributi. Mozilla ha pubblicato sul suo sito una guida di riferimento del sul linguaggio SVG. Puoi notare elementi simili a quelli del linguaggio html ma anche moltissimi elementi nuovi che non usiamo in html.

Ci sono 3 metodi per includere un file svg in una pagina web:
  1. creare un file svg direttamente nel file html con il linguaggio SMIL
  2. inserire il codice SVG direttamente nel file html dopo aver creato l’immagine in un programma di grafica vettoriale
  3. includerlo come immagine con il tag “img” o come immagine background con il tag “background”.

Prima di includerlo in un file html, in alcuni casi è meglio utilizzare un software come SVGOptimizer Graphical User Interface che ti permette di ridurre la pesantezza del file. E questo è molto importante quando si parla di immagini svg.
Nella risorsa creata per questo articolo ho realizzato una serie di icone che con il mouseover creano effetti accattivanti per la tua pagina web.

Come inserire l’immagine svg in html

Apri il file svg in un programma di text editor, copia il codice dell’icona svg e inseriscilo nel file html.

1

La cosa più importante da fare è assegnare una classe a ogni elemento svg dell’icona. In questo caso siamo in grado di gestire ogni elemento dell’immagine svg e associare a ognuno di questi elementi una transizione, animazione o trasformazione.

Con le classi possiamo modificare lo stile degli elementi svg grazie agli attributi, che come detto prima sono diversi dai tag html, ma la maggior parte sono facilmente intuibili.
Per esempio, il riempimento si esprime con il tag “fill”, il bordo o contorno con il tag “stroke” e “stroke-width”.

Un’immagine svg può essere anche “trasformata” con azioni come rotazione, traslazione e scala di dimensioni. Per applicare la trasformazione a tutta l’immagine possiamo raggrupparla con il tag “g” per creare un oggetto unico. L’ elemento g non è altro che un contenitore di tutta l’immagine svg. Quindi quando facciamo l’hover sull’intero gruppo, la trasformazione di ruotare e scalare sarà attribuita a tutta l’immagine nella sua interezza.

La proprietà transform-origin

La trasformazione delle immagini svg si comporta in maniera uguale in tutti i browser, tranne che nella proprietà “transform-origin.”
La proprietà “trasform-origin” delle immagini svg è diversa rispetto a quella degli elementi html. L’impostazione di default della trasformazione di un elemento html è al centro dell’immagine, quindi 50% 50%.

html

In un elemento svg è (0, 0), che corrisponde all’angolo sinistro superiore del riquadro dell’ svg. Il canvas è l’area dove l’icona svg è disegnata. Ecco perché gli elementi svg hanno un’asse di rotazione differente e apparentemente fuori asse dell’icona svg. Per cui, se vogliamo far ruotare l’elemento svg intorno al loro centro, dobbiamo esplicitamente impostare l’origine al centro con la proprietà transform-origin.

Mozilla

Utilizzando le percentuali l’elemento ruota intorno al suo contenitore. Questo avviene per tutti i browsers tranne che per Mozilla Firefox.

Supporto browser della proprietà “transform-origin”

Il supporto dei browser è eccellente per le animazioni svg. L’unica differenza è data dal fatto che Firefox non supporta la proprietà “transform-origin” espressa in percentuali. Per farla funzionare, abbiamo bisogno di valori assoluti come pixel oppure parole chiave come top, left center, ecc. Però se mettiamo la proprietà “transform-origin” in pixel, l’origine verrà settata in modo relativo rispetto all’angolo superiore sinistro del riquadro (canvas) dell’svg. Quindi, come possiamo risolvere questa questione?
Nell’html file, se guardiamo l’elemento che vogliamo far ruotare al centro, troviamo delle dimensioni che ci possono aiutare, cioè l’attributo cx e cy che definisce il centro dell’elemento.


Una volta che hai trovato queste coordinate importanti per definire il centro dell’elemento che vuoi ruotare, le tue icone saranno pronte e supportate da qualsiasi browser senza alcun problema.

Ecco quelle che ho preparato per te in questo tutorial.
DOWNLOAD

  • Airon3

    Articolo che potrebbe essere stato molto interessante, ma in realtà si da molto per scontato con il risultato che non si capisce nulla sul da fare. Viene mostrato un codice dell’svg nello screen editor, con id=layer_1 senza alcun cerchio all’interno. Poi viene scritta una porzione di codice su elemento cerchio con classe “cerchiostella”…

    ma è scritto di raggruppare tutto in g… come? cosa? quale parte del codice? Forse è il caso di rivedere il come si scrivono i tutorial… peccato l’argomento era interessante…

    Spero che vediate questo mio messaggio più come un consiglio e non come una polemica.

    • Ciao Airon, hai provato a vedere l’articolo a cui si linka per approfondire?

      “In un precedente articolo di Webhouse si è già parlato delle immagini svg con una guida generale ed esaustiva sull’argomento.” -> http://www.webhouseit.com/guida-svg-css-animare-stilizzare/

      Vedi se ti aiuta! 😉

      • Airon3

        Sicuramente leggendo l’altro articolo prima va molto meglio, ma comunque seguire una linea di esempio unica è sempre un bene.
        Il precedente articolo invece è ben fatto e mi ha chiarito molti dubbi.
        Grazie

        • Bene Airon, sono contento che tu abbia potuto risolvere i tuoi dubbi 🙂

    • Aledero design

      Caro Airon3,
      sicuramente sono laureata in scienze politiche e in graphic designer e non in “tutorial”, e ti chiedo scusa se ho omesso qualche passaggio anche se a me non sembra. Il codice mostrato nell’svg è il codice che viene generato dal programma vettoriale ( illustrator nel mio caso ). Questo codice poi viene modificato direttamente nel html. La classe “cerchiostella” viene infatti aggiunta direttamente nel foglio html per poter modificare lo stile e creare l’animazione. In ogni caso in ogni mio tutorial faccio sempre un esempio ed una demo ( che puoi benissimo scaricare e visionare ) per rendere più chiare le le cose che scrivo e che magari a volte scrivo in modo sbagliato. Comunque siamo qui anche per chiarire dubbi non solo per scrivere e basta, quindi era sufficiente che ponessi altre domande per chiarire i tuoi dubbi.

Shares