Come creare dei collegamenti con vari URL in aree diverse della stessa immagine SVG.

Come linkare delle singole parti di una immagine in formato SVG creata con Inkscape.

Leggere questo articolo fino all'aggiornamento a fine post in cui sono state aggiunte importanti informazioni -

Le informazioni assolutamente basiche sull'uso di Inkscape sono comunque sufficienti per realizzare degli oggetti che non sarebbe possibile creare con i normali programmi di grafica. Una immagine classica può essere linkata solo nella sua interezza mentre con una immagine SVG lo si può fare con una singola area.

Una funzionalità di questo tipo è possibile implementarla anche con immagini JPG o PNG ma bisogna utilizzare degli strumenti esterni che ci permettano di creare delle mappe di immagini. Vediamo un modesto esempio di come si possa linkare con URL diversi varie zone di una immagine SVG. Dopo aver aperto Inkscape si va su File > Importa per importare nell'area di lavoro le immagini in SVG, JPG, PNG o altro formato

Una immagine può servire anche come sfondo e le altre si possono inserire sopra di essa. Con le apposite maniglie possiamo ridimensionarle, trascinarle e posizionarle nell'area di lavoro. Si può andare su Modifica > Editor XML per visualizzare il codice testuale della immagine complessiva che abbiamo creato. Il formato SVG ha la particolarità di non essere altro che un file di testo da aprire con un programma come Notepad++.

Le immagini che sono state importate in formato SVG avranno dei tag come <path> o <rect> che sono appunto i tag che determinano le regole della grafica vettoriale. Le immagini importate con altro formato avranno invece un codice in cui viene utilizzato il formato Base64.

Cliccando con il mouse sopra a una singola immagine possiamo evidenziare quale sia il suo codice. Lasciando aperto Inkscape si va su File > Salva come per salvare l'immagine creata.

Per linkare un elemento di un file SVG bisogna aggiungere <a xlink:href="URL_LINK"> all'inizio dell'elemento e </a> alla fine dello stesso. Al posto di URL_LINK si deve mettere l'indirizzo della pagina web linkata. Con Notepad++ si apre il file SVG appena salvato. Per inserire il link nelle immagini convertite in Base64 si mette il primo tag prima di <image

mentre il tag </a> si incolla alla sua fine



Per le immagini SVG dobbiamo individuare il codice di ciascuna di esse e inserire il link prima dei tag path o rect mentre il tag </a> va incollato prima di </g>.

Quando si è terminato si incolla tutto il codice su un Editor come Real Time per verificare che che i link funzionino.  Poi però si elimina la prima parte per far iniziare il codice con il tag <svg

Una immagine in formato SVG non può essere caricata su Picasa ma si può aggiungere come file al nostro account Google Drive. Di tale file dobbiamo trovarne l'URL diretto tramite l'individuazione dell'ID della cartella.  Tale URL serve per pubblicare l'immagine con il codice

<div align="center"><img src="https://firebasestorage.googleapis.com/v0/b/progetto-1-79f16.appspot.com/o/bandiere-link.svg?alt=media&token=9d3498a7-b4ad-49bc-a159-4953cccb1b90" width="400"/></div>

che mostrerà l'immagine con una larghezza di 400 pixel ma che non avrà i link.


Per avere i link funzionanti dobbiamo incollare un iframe con un codice come questo

<iframe style="width:100%; height:300px;" src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/bandiere-link.svg"></iframe> 

Aggiornamento: Non mi ero accorto subito che su Inkscape c'era anche lo strumento per inserire dei collegamenti selezionando i vari elementi. Si clicca con il destro del cursore sulla parte della immagine in cui inserire il link 

quindi si va su Crea Collegamento che aprirà una finestra nella parte destra dell'interfaccia

in cui inserire gli Attributi. I più importanti sono Href dove incollare l'URL di destinazione, il target in cui incollare _blank se si vuole che il link si apra in un'altra scheda del browser e il Titolo che non è altro che quello che si vede nel tag Title. Questo lo si può fare selezionando ogni singolo oggetto per inserire link diversi nelle diverse aree della immagine.