Come usare gli SVG sul web

Per chi non lo sapesse, SVG (Scalable Vector Graphic) è un formato vettoriale che può essere letto nelle pagine web. Oltre ad essere l’unico formato per immagini vettoriali disponibile attualmente per i browser, grazie allla sua struttura possiamo integrarlo direttamente nel codice HTML (la sintassi è infatti molto simile).

Ma perché usare SVG, invece di semplici file PNG ad esempio? I motivi sono diversi, e tra i principali troviamo:

• Minor peso, in quanto i file non sono rappresentazioni di una griglia di pixel, bensì un insieme di tag/codici di cui è composto il vettoriale.
• Possibilità di modificare l’elemento tramite CSS, andando ad esempio a creare effetti di cambio colore al passaggio del mouse (hover)
• Ridimensionamento senza perdita di qualità, caratteristica intrinseca dei vettoriali
• Possibilità di applicare animazioni alle forme, creando ad esempio degli effetti detti “SVG Morph”

Ovviamente gli SVG non sostituiscono tutti i tipi d’immagine, ma solo le illustrazioni, icone e loghi. Per le immagini “fotografiche” la soluzione migliore resta il JPG (o meglio ancore, il Webp).

Come si crea un vettoriale SVG?

Essendo un formato vettoriale, l’SVG può essere creato a partire da un comunissimo programma di grafica come Adobe Illustrator, Affinity Designer o anche i classici Adobe XD, Figma, Sketch, ecc.. Insomma, ogni piattaforma che permette di creare tracciati, può essere usato per esportare un file SVG.

Il risultato potrà essere un file .svg o direttamente il codice SVG (che, come detto prima, risulta molto simile sintatticamente al codice HTML). Di seguito un esempio per chiarire questa similitudine:

<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewBox="0 0 1 1">
  <path id="Tracciato_1" data-name="Tracciato 1" d="M586.8,135.644c.229.006.335.156.431.381s.11.389-.045.519a.463.463,0,0,1-.576,0,.515.515,0,0,1-.3-.544A.467.467,0,0,1,586.8,135.644Z" transform="translate(-586.301 -135.643)" fill="none"/>
</svg>

Come potete vedere la struttura ricorda molto l’HTML, ovviamente con tag differenti. Questa soluzione ci permette di aggiungere id o class e di intercettare tramite CSS ogni elemento interno dell’SVG.

I diversi usi di SVG

Grazie agli SVG abbiamo la possibilità di creare qualsiasi tipo di forme, risultando molto interessanti anche nella creazione di icone e loghi. Scopo di questo articolo è quello di vedere i diversi ambiti di applicazione in cui poter far uso di questo utilissimo formato.

N.B.: Prima di andare avanti, c’è una cosa importante da dire: se vogliamo utilizzare pienamente le potenzialità di SVG, dovremo inserire il codice direttamente in linea, cioè nella pagina HTML. Richiamare infatti il file dall’esterno è possibile (attraverso il tag <img>) ma ci preclude la possibilità di modificare i suoi elementi tramite CSS.

SVG nei loghi e icone

Sempre più spesso si vede l’utilizzo di SVG nelle icone in quanto è una soluzione più performante dei normali Web-font. Anche i loghi delle aziende sulle pagine web sono sempre più spesso in SVG. Il motivo è legato principalmente ad un più semplice ridimensionamento dell’immagine ma anche al fatto che è possibile, tramite CSS, trasformare un logo ricreando la versione alternativa.

Ipotizzate ad esempio di avere una testata con sfondo trasparente e logo in bianco per meglio integrarsi all’immagine sottostante. Scrollando la pagina, volete mettere uno sfondo chiaro e di conseguenza il logo da bianco deve passare a nero. Con SVG questa cosa si può fare con poche e semplici regole CSS. Qui sotto il relativo codice:

.logo path {
  fill: #ffffff;
}

.scroll-menu .logo path {
  fill: #000000;
}

Esistono infatti diverse proprietà CSS che permettono di modificare riempimento e traccia di ogni singola parte del vettoriale. Le principali proprietà sono:

• fill: colore di riempimento dell’elemento
• stroke: colore del bordo
• stroke-width: spessore del bordo

SVG e separatori

Un altro utilizzo di SVG è nei separatori tra le diverse sezioni della pagina. Come sappiamo, gli elementi HTML vengono “disegnati” come rettangoli. Per questo motivo le sezioni di una pagina si dividono tra loro con una semplice linea orizzontale. Con SVG possiamo creare separatori più complessi, come onde, triangoli, ecc.

L’idea alla base di questo metodo è quello di posizionare il nostro SVG inlinea direttamente all’inizio o fine della sezione interessata, richiamando il colore della sezione precedente e successiva.

A tal proposito esistono un sacco di tool online che permettono proprio di creare questi separatori, fornendo sia il codice SVG, che le regole CSS necessarie. Ecco alcuni esempi:

• https://www.shapedivider.app: Crea il separatore in SVG e fornisce anche il relativo codice HTML
• https://app.haikei.app: Crea SVG più complessi e interessanti del precedente link, ma dovrete gestire poi voi l’implementazione web

SVG come maschere di ritaglio

E “dulcis in fundo” arriviamo a una delle caratteristiche che trovo più interessanti nell’uso degli SVG: le maschere di ritaglio.

Due anni fa parlai della proprietà clip-path (trovate l’articolo a questo link). E in quello stesso articolo ponevo l’attenzione su un problema di compatibilità presente a quel tempo tra i browser. Ad oggi le cose sono decisamente cambiate. Soprattutto in ambito SVG.

È possibile infatti utilizzare come maschera di ritaglio un vettoriale, a patto che sia inserito nella stessa pagina (La compatibilità riguardo ad SVG esterni è ancora molto bassa).

Questa cosa ci permette di inserire nella pagina web immagini con forme diverse dal classico rettangolo. Ovviamente possiamo ottenere lo stesso risultato anche estrapolando da un qualsiasi programma di grafica l’immagine già con la forma di ritaglio. Ma ovviamente questa soluzione non ci permette di avere una certa libertà sull’immagine. Con clip-path e SVG possiamo invece caricare qualsiasi immagine, per poi applicare a livello di CSS una maschera di ritaglio.

A livello pratico c’è da seguire alcuni passaggi che potranno sembrare strani, ma che sono necessari per posizionare correttamente la maschera all’oggetto/immagine da voler ritagliare. Cerco quindi di riassumerli qui sotto:

1 – Creare la forma SVG da usare come maschera

Prima di tutto dovete creare il vettoriale tramite un qualsiasi programma di grafica che lo permetta. Eviterei Adobe XD perché personalmente mi ha creato qualche grattacapo (l’SVG prodotto presenta un “transform” che non sono riuscito ad evitare).

Una volta creata la forma dovrete applicare le seguenti modifiche:

1. Eliminare qualsiasi bordo (altrimenti aggiungerebbe spessore alla forma). Il riempimento invece è ininfluente.
2. Ridimensionare l’intero oggetto alla dimensione di 1px di larghezza per un 1px di altezza (anche se questo distorce la forma nelle sue originali proporzioni)

L’ultimo passaggio può sembrare strano, ma serve a fare in modo che i riferimenti delle tracce interne abbiano valori tra 0 e 1. Questo è un aspetto fondamentale affinché la maschera si applichi sull’intera superficie dell’immagine da ritagliare (e serviranno in combinazione alla proprietà “clipPathUnits” che vedremo tra poco).

Fatto questo, selezionate l’elemento ed esportatelo (solo quello, mi raccomando) in un file SVG. Se il programma permette anche solo di copiare il codice, va bene lo stesso, altrimenti dovete poi recuperare il codice dal file estrapolato. Dovreste quindi avere a disposizione un codice simile a quello che vedete qui sotto:

<svg width="1" height="1" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 0H0.266394C0.204822 0 0.0588099 0.120677 0.0140995 0.316062C-0.0532858 0.610537 0.135741 1 0.266394 1H1V0Z" fill="#54E1D0"/>
</svg>

2 – Inserire l’SVG nella pagina HTML

Ora inserite l’SVG nella pagina. La posizione non è fondamentale, perché andremo a richiamarlo tramite CSS. L’importante è che sia nella stessa pagina in cui è presente l’immagine da ritagliare.

Una volta incollato il codice togliete tutti gli attributi dal tag <svg> ad eccezione di viewBox. Questo attributo non va eliminato e nemmeno modificato. Serve a definire le coordinate e la dimensione dello spazio in cui vengono inseriti gli elementi al suo interno.

N.B.: Oltre al viewBox vi consiglio d’impostare gli attributi “width” ed “height” a 0. Così facendo l’SVG non occuperà spazio sulla pagina.

Subito dentro il tag <svg> inseriamo il tag <defs> che serve ad informare la pagina che l’oggetto non deve essere renderizzato, ma che verrà utilizzato in futuro.

Subito dentro al tag <defs> inseriamo un ulteriore elemento, il tag <clipPath>, fondamentale a definire l’area SVG che sarà utilizzata successivamente dalla proprietà CSS “clip-path”.

A questo tag aggiungete anche l’attributo clipPathUnits=”objectBoundingBox”. Questo è fondamentale perché informa che il clip-path deve far riferimento alle coordinate dell’oggetto a cui verrà applicato (e non alla pagina direttamente).

Infine, mettete dentro a questi nuovi tag le varie tracce create dall’SVG. Di seguito un esempio modificato del codice di partenza:

<svg width="0" height="0" viewBox="0 0 1 1">
    <defs>
        <clipPath clipPathUnits="objectBoundingBox" id="maschera">
            <path d="M1 0H0.266394C0.204822 0 0.0588099 0.120677 0.0140995 0.316062C-0.0532858 0.610537 0.135741 1 0.266394 1H1V0Z" fill="#C4C4C4"/>
        </clipPath>
    </defs>
</svg>

3 – Applicare il clip-path CSS

Ora non ci resta che applicare il clip-path. Ma prima di farlo, dovete dare un “id” al tag <clipPath> precedentemente creato. Questo aspetto è necessario per poterlo richiamare nel CSS.

Ora spostatevi nel foglio di stile e selezionate l’immagine da ritagliare. All’interno della regola richiamate la proprietà “clip-path” come mostrato qui sotto (l’ID fa riferimento al relativo attributo inserito poco fa sul tag <clipPath>):

.hero__image img {
    clip-path: url(#maschera);
}

Se avete seguito bene tutti i passaggi dovreste vedere la vostra immagine ritagliata con la forma indicata. La stessa forma potrà essere utilizzata su più immagini e quindi non dovrete ricreare un SVG per ogni singola immagine.

N.B.: La forma viene applicata all’intera area dell’immagine, quindi se le proporzioni non sono le stesse della forma originale, potreste vedere il ritaglio un po’ “stirato”.

Ora avete uno strumento in più per creare nuove forme all’interno delle vostre pagine, carino vero?