Tutorial per Inkscape il programma gratis per creare SVG.

Elenco di risorse per imparare a usare Inkscape il software gratuito per creare immagini di grafica vettoriale in formato 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.

Il programma più utilizzato dai grafici professionisti per creare immagini SVG è Adobe Illustrator che è piuttosto costoso anche se ne possiamo scaricare una versione di prova. L'alternativa gratuita a Adobe Illustrator si chiama Inkscape e può essere installato su Windows, Linux e iOS. Si clicca su Scaricare per poi scegliere la versione di Inkscape adatta per il nostro sistema operativo

Si tratta di un programma piuttosto corposo di quasi 100MB. Inkscape ha questa interfaccia

Il programma ha una tale quantità di strumenti sulla sinistra e di comandi sulla destra da far invidia a Photoshop. Il layout è diviso in varie aree: Menù, Strumenti e Quadro

Non è mio compito illustrare in dettaglio tutte le funzioni di Inkscape, e poi non sarei neppure in grado di farlo, mi limito quindi a linkare delle risorse gratuite presenti nel web a cui attingere:

1. Guida SVG per un tutorial completo sul linguaggio SVG
2. Guida Inkscape da cui ho preso l'immagine precedente dell'interfaccia
3. Manuale Inkscape tradotto in italiano
4. Using SVG di CSS Trick
5. How to get started width SVG di Sara Vieira
6. Informazioni basiche su SVG e CSS Sprite
7. SVG Basic è un intero sito dedicato alla grafica vettoriale
8. Introduzione alle animazioni con SVG
9. Come animare del testo con SVG Paths
10. SVG Animate con CSS3 e Javascript
11. Creare infografiche con SVG
12. Come rendere SVG responsive con il CSS di Codrops 
13. Shape Hover Effect con SVG
14. Snap.svg è una libreria per creare SVG animate straordinarie

Anche senza grandi conoscenze si possono creare con Inkscape delle immagini di grafica vettoriale particolarmente interessanti. Per salvarle si va su File > Salva come per salvare l'immagine in SVG oppure File > Esporta immagine PNG per salvare il nostro lavoro in questo formato. Se però dovessimo salvare l'immagine in PNG allora tanto vale usare Photoshop o Gimp.