Creare immagini vettoriali SVG con link a pagine web

Come creare delle immagini di grafica vettoriale SVG con Inkscape, inserirvi dei collegamenti, caricarle nel web con Firebase e usarle nei siti, blog e pagine web

Le immagini in formato SVG sono sostanzialmente diverse dai file di immagini a cui siamo più abituati come JPG, PNG o GIF. Le immagini dei formati più comuni sono una rappresentazione nel sistema binario di ogni singolo pixel che le compongono e ad ogni pixel è associato il suo codice di colore.

Vista la relativa pesantezza dei file immagine classici, spesso vengono applicati degli algoritmi di compressione per alleggerirli senza perdere in qualità. Nei primi anni 2000 è stata però messa a punto una nuova tecnologia, attraverso il linguaggio VML (Vector Markup Language) che ha portato allo sviluppo del formato SVG (Scalable Vector Graphics) ovvero di quella che può anche essere definita come Grafica Vettoriale Bidimensionale.

Il formato SVG è di tipo testuale e i file SVG non si aprono con un Editor grafico come potrebbero essere Photoshop, Gimp o Paint.NET, ma con Notepad++ o addirittura con il Blocco Note. I file SVG sono quindi formati da un codice testuale e il loro linguaggio è stato codificato dal W3C, quindi è open source, e non è proprietà di nessuna azienda. A differenza delle immagini raster, come lo sono JPG o PNG, le immagini SVG non perdono qualità quando vengono aumentate le loro dimensioni.

In questo articolo vedremo come creare una immagine vettoriale in formato SVG, in cui inserire dei collegamenti a altre pagine web che si apriranno in altre schede quando ci si clicca sopra. Per questa operazione utilizzeremo un programma gratuito e open source per Windows, MacOS e Linux.

Si tratta solo di una piccola cosa tra le tante che si possono fare con la grafica vettoriale. Le immagini in formato SVG non possono essere caricate su Blogger, Wordpress o altre piattaforme. Sono supportate da Dropbox e Google Drive, che però non ne permettono l'utilizzo dell'hotlink. Nell'articolo vedremo come bypassare il problema, caricando l'immagine su Firebase, servizio gratuito di Google, per poi aggiungerle al codice HTML di una pagina web tramite un iframe. Ho pubblicato sul mio Canale Youtube il video tutorial di tutta la procedura.

I file SVG possono essere aperti con i normali browser ma anche con degli Editor di Testo. La struttura di tali file è simile a quella delle pagine XML e iniziano con una riga di testo di questo tipo

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Le immagini raster che possono essere contenute nel file SVG sono individuate tramite Base64.

SCARICARE E INSTALLARE INKSCAPE

Per creare gratuitamente delle immagini vettoriali SVG, si può usare il programma gratuito Inkscape, disponibile per Windows, MacOS e Linux. Si va su Download -> Download per poi scegliere il nostro sistema operativo e la versione a 32-bit o a 64-bit. Gli utenti Windows scaricheranno un file in formato .exe su cui fare un doppio click per visualizzare il wizard di installazione.

Nella prima schermata si sceglie la lingua, di solito viene rilevato l'italiano in modo automatico. Si va su OK per passare alla seconda schermata, in cui andare su Avanti. Si clicca ancora su Avanti nelle due finestre successive, per poi andare su Installa. Verrà mostrato un cursore con il procedere della installazione per poi andare su Chiudi.

Inkscape si aprirà automaticamente se abbiamo lasciato la spunta di default. Ha una interfaccia in italiano che a prima vista potrebbe sembrare molto complessa ma, come per i programmi di grafica, le operazioni più semplici da fare, sono alla portata di tutti. Per prima cosa si va su File -> Proprietà del documento.

Verrà aperta una finestra in cui scegliere la scheda Pagina. Si devono impostare le dimensioni della immagine da creare. Di default viene creata una immagine per un formato di carta A4. Si va quindi su Personalizzata e si sceglie px, cioè pixel, come unità di misura, quindi si imposta larghezza e altezza del documento (p.e 600x400 pixel).

CREAZIONE DI UN FILE SVG

Con la rotellina del mouse che serve da zoom, si posiziona l'area del documento in modo adeguato.

Nel menù si clicca su File -> Importa per poi selezionare l'immagine da aggiungere al documento. Tanto per fare un esempio creeremo un file SVG che contiene 4 icone con i relativi collegamenti. Si sceglie quindi la prima immagine da importare. Verrà aperta una finestra in cui lasciare le opzioni di default e andare su OK.

Verrà aggiunta nell'area di lavoro l'immagine selezionata, che potrà essere ridimensionata con le maniglie e posizionata nell'area del documento con il drag&drop. Si opera nello stesso modo per tutte le altre immagini.

Si clicca sopra a ciascuna immagine con il destro del mouse e si sceglie Crea collegamento dal menù contestuale.

Verrà aperta una finestra di configurazione sulla destra con alcuni campi da compilare. Il campo fondamentale da non lasciare vuoto è il primo, cioè Href, in cui incollare l'URL della pagina a cui collegare l'immagine selezionata. Opzionalmente si può compilare anche il campo Titolo, in cui digitare il testo da mostrare quando si passa sulla immagine in oggetto con il cursore. Il campo Target può essere riempito con la stringa _blank che serve, come nell'HTML, ad aprire il collegamento in un'altra finestra del browser.

Dopo aver configurato un collegamento, non occorre alcuna opera di salvataggio. Basterà cliccare con il destro del mouse su un'altra immagine, per poi aggiungere a tutte i relativi collegamenti. Per salvare l'immagine con link che abbiamo creato, si va su File -> Salva come... Verrà aperto Esplora File (OS Windows).

Si seleziona la cartella di destinazione, si dà un nome al file, quindi si sceglie il formato SVG nel menù verticale, infine si va su Salva. Il file creato potrà essere aperto con un qualsiasi browser moderno.

CARICARE ONLINE IL FILE SVG SU FIREBASE

Le normali piattaforme di blogging non supportano i file SVG caricati come immagini. Per risolvere useremo un servizio gratuito di Google, denominato Firebase, che permette tra l'altro anche di essere usato come hosting.

Si accede a Firebase con un nostro account Google, quindi si clicca su Vai alla Console. Se è la prima volta che lo usiamo si va su + Aggiungi progetto, per poi dare un nome al progetto. Se ne apre la Panoramica.

Nella colonna di sinistra si clicca su Storage. Verranno mostrati tutti i file che abbiamo caricato nel progetto.

Si va sul pulsante Carica file, per poi selezionare il file SVG che abbiamo creato con Inkscape. Dopo l'upload, verrà aggiunto all'elenco dei file già presenti, se non fosse il primo. Ci si clicca sopra per selezionarlo.

Ci si sposta sulla destra e si clicca sulla freccetta accanto a Posizione File. Verranno mostrati due URL, quello della Posizione di Storage e quello dell'URL di Download. Si clicca su quest'ultimo per copiarlo negli appunti. L'utilizzo dell'URL di download potrà anche essere revocato con un secondo click sul pulsante Revoca.

Avrà una struttura simile a questa

https://firebasestorage.googleapis.com/v0/b/progetto-1-79f16.appspot.com/o/link%20sociali.svg?alt=media&token=e96898bf-2dcc-4295-84a6-b4638447a3d2

con la prima parte, colorata di blu, che è il link diretto al file e la seconda parte, colorata di rosso è il token che permette di utilizzarlo solo al proprietario del progetto. Chi lo incollasse senza token, non potrebbe utilizzarlo in un codice. Adesso non resta che vedere come possa servire all'atto paratico.

AGGIUNGERE IMMAGINI SVG A UNA PAGINA WEB

Come ho già detto, le immagini SVG non possono essere caricate con i normali editor di testo delle piattaforme. Si può però usare il codice di un iframe, dove al posto dell'URL della pagina si mette l'indirizzo della immagine SVG ottenuto da Firebase. Il codice che si ricava avrà una sintassi simile a questa

<div align="center"> <iframe src="https://firebasestorage.googleapis.com/v0/b/progetto-1-79f16.appspot.com/o/link%20sociali.svg?alt=media&token=e96898bf-2dcc-4295-84a6-b4638447a3d2" width="600" height="400"></iframe></div>

nel cui codice sono state aggiunte 2 righe per centrare l'iframe oltre alle dimensioni della larghezza e della altezza.

Se tale codice si incolla in un Editor HTML Online, visualizzeremo l'immagine SVG con i collegamenti inseriti. Lo stesso codice può essere incollato in un post o in un widget di una qualsiasi piattaforma di blogging.