Quando si crea un sito web, il web designer deve tenerne conto quattro punti essenziali pensando al layout e al visual design del web, il testo, immagini, colori e caratteri dipendenti.
Di questi quattro punti, quello a cui daremo più importanza in questo post sono le immagini, dal momento che parleremo come creare file svg poiché è molto importante tenere conto della qualità delle immagini con cui lavori.
Trattamenti con file SVG, è in aumento da parte dei professionisti e non così professionisti nel mondo del design.
Che cos'è un file SVG?
SVG è l'abbreviazione in inglese di Scalabe Vector Graphics, in spagnolo Scalable Vector Graphics. Si tratta di una formato aperto e gratuito con cui creare grafiche 2D, bidimensionali.
A differenza di altri formati di immagine, come JPG o PNG, SVG è un formato scalabile, indipendentemente da quanto vuoi aumentarne le dimensioni, poiché la qualità dell'immagine verrà mantenuta. È uno dei formati più utilizzati nelle pagine web per inserire grafici o immagini vettoriali.
Perché dovremmo usare SVG?
Con questo tipo di formato, le immagini vettoriali manterranno un'elevata qualità, indipendentemente dalle dimensioni e dalla risoluzione. Al contrario, le immagini composte da bitmap, composte da pixel, perdono di qualità se vengono ridimensionate. Il formato SVG è definito dalla sua leggerezza e versatilità.
Un altro punto a favore dell'utilizzo di questo formato è la sua piccola dimensione, cioè grazie a questo aumenta la velocità di caricamento delle pagine in cui si trovano. Queste immagini sono costruite dal browser, che aiuta a ridurre il carico e il consumo sul server.
Inoltre, possono creare immagini SVG animate con cui dare al nostro sito un'aria di vicinanza e attirare l'attenzione degli spettatori che lo visitano.
SVG è un formato aperto, ovvero può subire miglioramenti e aggiornamenti. Inoltre, i file SVG possono essere modificati con programmi di editing vettoriale, ad esempio Adobe Illustartor senza perdere la qualità nella sua visualizzazione, può essere visualizzato su qualsiasi dispositivo. Ci permette anche di stamparlo senza perdere qualità.
Come creare facilmente file SVG
Forse il modo più semplice per creare file SVG, se li conosci, è attraverso un programma di progettazione grafica, come Illustrator, Corel Draw, tra gli altri.
Concentrandoci sul programma Illustrator, quando utilizzeremo il formato SVG, dobbiamo tenere conto se abbiamo utilizzato gradienti o altri effetti, come l'effetto artistico, la sfocatura, i pennelli, i pixel, ecc. poiché vengono rasterizzati quando vengono salvati in formato file SVG. Si consiglia di utilizzare gli effetti filtro SVG, per aggiungere effetti in modo che non possano essere rasterizzati in seguito.
Un altro consiglio che vi diamo è quello di utilizzare semplici simboli e percorsi nelle illustrazioni per prestazioni migliori di detto formato. Evita di usare pennelli con molta traccia in quanto ciò genera un maggiore carico di dati.
Per creare un file SVG in questo programma, La prima cosa che dobbiamo tenere aperta è una tela bianca dove lavoreremo sulla nostra idea.
Una volta terminato il nostro lavoro, quello che faremo è andare sulla barra degli strumenti mostrata sopra il programma, e selezioneremo l'opzione di file, salva con nome e apparirà una schermata pop-up in cui ci dice di dare un nome al nostro file e indicare il formato in cui vogliamo salvarlo. È in quest'ultima sezione che dobbiamo contrassegnare l'opzione SVG.
Quando si seleziona il tipo SVG, viene visualizzata una finestra di dialogo che mostra diverse opzioni che devono essere prese in considerazione.
Come regola generale, nel primo campo che compare nella tabella compare il profilo SVG 1.1. Di seguito ci dà la possibilità di scegliere le fonti, in cui ci danno l'impostazione predefinita è il testo contrassegnato in SVG e il sottoinsieme come nessuno. Nel nostro caso, questo lavoro non ha caratteri, se lo avesse, l'opzione sottoinsiemi dovrebbe essere modificata da nessuno a tutti i pittogrammi.
La sezione seguente è molto importante, se segnaliamo il opzione incorpora, le immagini della composizione verranno incorporate nel file, che farà aumentare di peso se utilizziamo molte immagini bitmap. Se, invece, contrassegniamo l'opzione di collegamento, dobbiamo fare attenzione alle immagini se le utilizzeremo su un sito Web, poiché dobbiamo includere i file delle nostre immagini e anche, cosa molto importante, mantenerne sentiero. Il vantaggio di questa opzione è che i file peseranno molto meno.
Nella sezione delle opzioni avanzate troviamo l'opzione per Codice SVG, questa opzione indicherà come si trova il file, ovvero il codice alla base del nostro lavoro. Questa opzione è fondamentale se vuoi aggiungere il tuo file SVG, ad esempio al tuo WordPress personale, devi solo copiare il codice e aggiungerlo direttamente nel tuo editor HTML di WordPress.
L'ultimo consiglio che ti diamo è che quando salvi in formato SVG, tieni presente che se stai lavorando con diverse tavole da disegno, verrà conservata solo la tavola da disegno attiva.
Se vogliamo andare oltre e applicare gli effetti SVG alla nostra illustrazione, Illustrator ci offre una serie di effetti. Per fare ciò, dovremo selezionare un oggetto o un gruppo. Per applicare un effetto dobbiamo selezionare la finestra degli effetti, i filtri SVG e applicarlo.
Quando si applica un filtro SVG, il programma di progettazione ci mostra una finestra dove Viene visualizzato un elenco di filtri che possono essere applicati, una volta selezionato uno, Illustrator ci mostra come appare, ma in una versione rasterizzata.
Come hai visto, il Il formato SVG è stata una rivoluzione. Grazie al suo potenziale e alla qualità che offre, rende le pagine web che troviamo molto più attraenti senza sacrificare le prestazioni, purché facciano un uso corretto di detto formato. SVG è diventato il connubio perfetto tra il mondo del web design e dello sviluppo.