I file SVG (Scalable Vector Graphics) sono eccezionali per lo sviluppo e la progettazione web. Questo tipo di immagine non fa pixel se la si può ridimensionare in alto o in basso e di solito è più leggera di altri tipi di file come le JPEG. Tuttavia, aprire e modificare i file SVGs può essere complicato senza gli strumenti giusti.
Aprire un file SVG è essenziale se volete modificarlo prima di caricarlo su WordPress. Alcuni strumenti permettono sia di aprire che di modificare i file SVG, il che significa che vi permettono di creare la grafica di cui avete bisogno per il vostro sito web.
In questo articolo spiegheremo brevemente cosa sono i file SVG. Spiegheremo perché sono così popolari e vi diremo quando utilizzarli. Poi vi mostreremo come convertire i file in SVG e come aprirli. Cominciamo!
Cos’è un File SVG?
Un vettore è un oggetto definito da uno o più punti collegati. Quando combinate un numero sufficiente di vettori, potete creare praticamente qualsiasi tipo di grafico.
Un file SVG è una collezione di dati vettoriali messi insieme in formato XML. Prendete ad esempio il logo di Kinsta.
A differenza di una PNG o di una JPEG, questa immagine non è composta di pixel, ma è vettoriale. Ecco come appare lo stesso file se lo aprite con un editor di testo.
La maggior parte dei dati all’interno di questo file si trova all’interno dell’elemento path. Questo elemento permette di definire i vettori in qualsiasi direzione. Abbiamo aggiunto un po’ di colore alle linee utilizzando i CSS.
Se provate ad aprire un file JPEG o PNG utilizzando un editor di testo, quello che vedrete sarà incomprensibile. Tuttavia, potete prendere un altro formato di immagine e convertirlo in SVG traducendo quei pixel in percorsi o vettori. Vi mostreremo come funziona tra un minuto, ma, per ora, vediamo perché e quando usare i file SVG.
Perché Usare un File SVG
Un file SVG viene utilizzato per qualsiasi tipo di grafica che potreste aver bisogno di ridimensionare. Di solito, se provate a impostare diverse dimensioni dell’immagine, avrete problemi di pixelatura. I file SVG, invece, sono infinitamente scalabili perché state lavorando con vettori invece che con pixel.
Come si vede, se si ridimensiona, l’immagine non si distorce e non fa pixel. Questo rende i file SVG perfetti per loghi, illustrazioni, immagini in primo piano, grafica in linea e altro. Significa anche che potete ridurre la dimensione del file immagine per velocizzare il vostro sito WordPress, senza compromettere la qualità.
Ecco alcuni dei file SVG che usiamo sul nostro sito web, per darvi un’idea più chiara dei tipi di grafica di cui stiamo parlando.
Oltre ad essere ridimensionabili all’infinito, i file SVG offrono anche una serie di altri vantaggi, tra cui:
- Sono indicizzati da Google. I file SVG appaiono nelle ricerche di immagini su Google, il che significa che non presentano alcun inconveniente dal punto di vista dell’ottimizzazione per i motori di ricerca (SEO).
- La dimensione del file è relativamente piccola. Se prendete una semplice immagine o un’illustrazione e la salvate nei formati SVG, JPEG e PNG, la SVG sarà di solito molto più piccola di tutte le altre. Tuttavia, questo vale solo per immagini “semplici”, di cui parleremo tra poco.
- I file SVG possono essere animati. Dal momento che avete a che fare con file XML, cioè con del codice, potete stilizzare e animare i file SVG utilizzando i CSS.
Anche se i file SVG sono incredibilmente versatili, non sono adatti a tutte le situazioni. Se confrontate SVG, JPEG e PNG, vi renderete subito conto che JPEG e PNG vanno molto meglio per la grafica complessa e le fotografie.
Prendete questo file JPEG, per esempio. Non è un’immagine ad alta risoluzione, ma è più che sufficiente per distinguere i dettagli.
Se convertite questo file JPEG in SVG utilizzando uno qualsiasi degli strumenti disponibili online, vi ritroverete con una notevole riduzione dei dettagli.
Questa immagine non manca solo di dettagli e di colore, ma ha anche una dimensione del file superiore rispetto all’originale. Questo perché i dati vettoriali si sommano rapidamente quando si tratta di fotografie o altri tipi di grafica complessa.
Per riassumere, gli SVG dovrebbero essere il vostro formato preferito per le immagini con un numero ridotto di linee, come i loghi e le illustrazioni. Tuttavia, per le fotografie è meglio ricorrere a JPEG e PNG ad alta risoluzione (purché le ottimizziate).
Come Convertire un File SVG
Un software di fotoritocco dovrebbe permettervi di acquisire altri tipi di file immagine e convertirli in formato SVG e viceversa. Ecco un esempio utilizzando uno dei nostri strumenti di fotoritocco gratuiti preferiti, Photopea.
Se non avete un software di fotoritocco, ci sono molti strumenti online gratuiti che possono prendere immagini in quasi tutti i formati ed esportarle in SVG o viceversa. Lo svantaggio di utilizzare questi strumenti gratuiti è che i risultati spesso non sono così dettagliati come vorreste.
Nella nostra esperienza, l’utilizzo di software gratuiti per la conversione di immagini spesso risulta in file SVG senza colore o in file che assomigliano a malapena all’immagine originale. Tuttavia, convertire i file SVG in altri formati immagine è molto più semplice e non comporta quasi mai una notevole perdita di qualità, indipendentemente dallo strumento che usate.
Come Aprire i File SVG (3 Modi)
Ci sono diversi modi per aprire i file SVG a seconda di quello che volete fare. Iniziamo parlando dei browser.
1. Aprire un SVG in un Browser
A differenza di altri file grafici, quando aprite un SVG, questo verrà lanciato nel browser predefinito. Questo perché il computer riconosce gli SVG non come grafica, ma come file XML.
I file SVG esistono già da un po’ e vengono utulizzati, in una forma o nell’altra, da circa il 33% di tutti i siti web. Questo per dire che la maggior parte dei browser moderni supporta i file SVG, compresi Edge, Firefox, Chrome, Safari e praticamente ogni altro browser vi venga in mente.
A meno che tu stiate utilizzando un browser oscuro o obsoleto (cosa che non dovreste fare), potrete aprire i file SVG con un paio di clic. Tuttavia, non potrete modificare i file SVG dall’interno del vostro browser. Per questo, dovrete utilizzare un editor di testo o un software di editing delle immagini.
2. Aprire i File SVG con un Editor di Testo
Dato che i file SVG sono immagini basate su XML, potete aprirli e modificarli utilizzando un editor di testo. Prima abbiamo mostrato come appare il logo Kinsta come SVG. Abbiamo anche visto il suo codice.
In teoria, potete modificare o creare un file SVG utilizzando un editor di testo. Tuttavia, questo va bene solo per immagini molto semplici con pochi vettori. Per un file come quello sopra, modificare ogni vettore a mano è quasi impossibile.
Quello che potete fare è aggiungere i CSS utilizzando un editor di testo, il che è abbastanza semplice. In questo esempio, si può vedere che abbiamo riempito le linee vettoriali con il brand viola di Kinsta. Potete utilizzare i CSS per aggiungere al file vettoriale qualsiasi tipo di stile, comprese le animazioni. Non potete farlo con i formati immagine tradizionali.
3. Usare un Editor di Foto o Immagini
La maggior parte dei moderni software di editing fotografico supporta i file SVG. Questo significa che potete aprirli, modificarli e poi salvare le modifiche o esportare l’immagine in altri formati.
Se lavorate con un file SVG utilizzando un software di fotoritocco, avrete accesso a tutti gli stessi strumenti che potete utilizzare per personalizzare altri tipi di immagini. Questo vi permette di modificare l’SVG, aggiungere dettagli, eliminare delle parti e fare qualsiasi altra cosa vogliate.
Il software di editing delle immagini o delle foto offre anche il modo più semplice per creare file SVG da zero. Potete utilizzare strumenti vettoriali o di linea per disegnare immagini e salvarle in formato SVG. Una volta che i vostri file SVG sono pronti, potete andare avanti e caricarli su WordPress in modo che i visitatori possano vederli.
Riepilogo
Gli SVG sono perfetti per le illustrazioni e per semplici elementi grafici come i loghi. Per fortuna, ci sono molti strumenti per gestire questo tipo di contenuti. Inoltre, i file SVG sono supportati dalla maggior parte dei browser internet.
Potete aprire un file SVG in tre modi:
- Con un browser
- Con un editor di testo
- Con un editor di foto o immagini
Avete bisogno di aiuto per il vostro web design? Tutti i piani di hosting di Kinsta offrono supporto 24/7 da parte dei nostri sviluppatori WordPress di classe mondiale.
