8 siti da cui scaricare immagini SVG senza copyright

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 infatti una rappresentazione nel sistema binario di ogni singolo pixel che le compongono e ad ogni pixel è associato il suo codice di colore. In sostanza l'immagine viene vista come un insieme di punti, chiamati appunto pixel, in un riferimento cartesiano ortogonale a cui associare a ciascuno di essi un colore e un livello di trasparenza, nel formato PNG.

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 editor quali 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.

Come trasformare in vettoriali le immagini raster

Le immagini a cui siamo maggiormente abituati su internet sono solitamente immagini del tipo raster, ovvero di immagini definite da un insieme di pixel o punti, associati a un determinato codice di colore. Ciascun pixel è individuato in modo univoco dalle sue coordinate, essendo le immagini raster organizzate come dei sistemi di riferimento cartesiani ortogonali, con la larghezza che è l'asse delle x e l'altezza che è l'asse delle y.

Le immagini vettoriali sono figlie di una tecnica di rappresentazione delle immagini che risale al 1959, sviluppata da un ingegnere che lavorava alla progettazione di autovetture. Successivamente questa tecnologia è stata ulteriormente migliorata e dagli anni 80 è entrata a far parte dei videogiochi che in quel periodo hanno appunto sostituito la grafica raster con quella vettoriale. Tra la fine degli anni 90 e il 2000, questo nuovo modo di rappresentare le immagini, è stato implementato nei linguaggi di programmazione dal consorzio W3C e da allora è possibile inserire file vettoriali all'interno del codice delle pagine web.

Le immagini vettoriali sono quindi formate da elementi grafici primitivi come punti, segmenti, curve a cui possono essere attributi colori e sfumature. Questi elementi vengono inseriti nella immagine, insieme ai loro punti di applicazione. Il miglioramento qualitativo consiste nel fatto che, mentre le immagini raster perdono di qualità quando si ingrandiscono, le immagini vettoriali potenzialmente la mantengono immutata e non diventano sgranate quando se ne aumenta la dimensione.

Creare immagini vettoriali SVG con link a 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.

Come creare una finestra popup che mostri una immagine con link a una pagina del blog.

In un articolo di qualche tempo fa ho illustrato come si possa mostrare una finestra modale (o popup) che appaia ai nuovi visitatori del blog. In questa immagine ci poteva essere un testo con un invito a sottoscrivere i feed, ad acquistare un prodotto o a contribuire a una campagna di sensibilizzazione.

Il limite di quella personalizzazione è che l'immagine non poteva essere linkata cioè l'avviso presupponeva una azione diversa da un semplice click da parte del lettore. Il metodo utilizzato si serviva di un iframe che non può essere linkato e anche i link con i CSS sono molto difficili da inserire. L'utilizzo dei javascript avrebbe comportato una rifacimento completo di tutto il codice che non mi andava di fare e che forse sarebbe stato anche non alla portata delle mie modeste capacità.

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

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

Tutorial per Inkscape il programma gratis per creare SVG.

Dopo aver parlato di icone Material Design e di immagini in formato SVG in questo post darò ulteriori informazioni a chi voglia approfondire l'argomento con l'avvertenza che si tratta di un campo piuttosto vasto. Bisogna dire però che anche dopo aver assimilato solo un paio di cosette su questo linguaggio siamo in grado di creare delle immagini particolarmente originali e di qualità.

La grafica vettoriale del formato SVG permette di avere immagini che non perdono in definizione quando se ne aumenti le dimensioni. Infatti mentre le immagini raster JPG e PNG non sono altro che una griglia di pixel, il formato PNG è invece un insieme di relazioni tra punti che si adattano automaticamente al variare delle dimensioni dell'immagine.

Che cosa sono le immagini in formato SVG e come si creano.

Cercando le icone senza copyright su siti per esempio come Iconfinder ci si può imbattere su formati diversi dal solito come appunto SVG. Si tratta dell'acronimo di Scalable Vector Graphics ovvero di quella che può anche essere definita come Grafica Vettoriale Bidimensionale.  Il suo sviluppo è iniziato nel 2003 e recentemente sono state aggiunte nuove specifiche per i dispositivi mobili.

Il formato SVG è di tipo testuale e i file SVG non si aprono con un Editor grafico come potrebbe 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 souce e non è proprietario. A differenza delle immagini raster come JPG o PNG le immagini SVG non perdono qualità quando vengono aumentate le loro dimensioni.