La guida pratica per principianti a SVG
Sebbene il formato non sia particolarmente nuovo, le immagini SVG sono sempre più popolari nella progettazione di siti Web. Tutti i principali browser Web supportano il formato e SVG sta cambiando il modo in cui pensiamo e rappresentiamo le immagini per il Web.
Perché sono così popolari? E cosa è esattamente diverso in un file SVG? Oggi abbiamo le risposte e tutto ciò che devi sapere per iniziare con questo tipo di file. (Come piccolo bonus, tutte le immagini in questo post sono disponibili in SVG da Creative Market.)
Esplora Envato Elements
Che cos'è SVG?
La grafica vettoriale scalabile, o SVG, è un formato di immagine basato su vettori sviluppato per il web. (Puoi saperne di più sui formati vettoriali rispetto ai formati raster in un precedente articolo di Design Shack.)
Il formato è cresciuto in popolarità grazie ai display ad alta definizione, in cui gli utenti possono vedere ogni pixel (se esistono). Poiché SVG è un formato vettoriale, l'immagine viene riprodotta nello stesso modo - e con dettagli perfetti - indipendentemente dalle dimensioni.
Il linguaggio di markup è stato sviluppato per la prima volta dal World Wide Web Consortium, che è più comunemente noto come W3C, nel 1999. W3C definisce SVG come "un linguaggio di markup per la descrizione di applicazioni e immagini grafiche bidimensionali e un insieme di interfacce di script grafici correlate “. È supportato da tutti i browser moderni, quindi non devi preoccuparti se i file SVG verranno visualizzati correttamente o meno, e funziona indipendentemente dal tipo di dispositivo.
Applicazioni pratiche
Quindi, cosa rende SVG così popolare e perché lo usano più designer? Semplicemente, perché funziona.
I file SVG sono piccoli e scalabili. Mentre il formato è più adatto per le forme, ha una varietà di applicazioni pratiche. Loghi di marca, icone, elementi dell'interfaccia utente e molti altri bit di progettazione possono funzionare in formato SVG. Il vantaggio più grande è che sono vettori. Quindi un'immagine SVG può essere utilizzata in quasi tutte le dimensioni. (Alcuni dei file più piccoli possono essere solo così grandi.)
Anche i file SVG sono facili da manipolare e controllare. Non solo un SVG può essere salvato come immagine statica, ma è anche possibile aggiungere interattività e filtri per rendere l'immagine ancora più divertente. (I file SVG possono essere animati e colorati.)
Ecco alcune applicazioni pratiche per l'uso di SVG:
- Loghi o immagini
- Come immagine di sfondo
- Come oggetto, come un pulsante
- Mappatura
- Grafici o disegni
Come regola generale, SVG è più adatto per le immagini che potrebbero evolversi o cambiare nel tempo o per tipo di dispositivo o includere animazioni o altri effetti dinamici. Utilizzare il formato per elementi visivi come loghi, schizzi, forme, grafica e grafici o altre immagini semplici.
Pro dell'utilizzo di SVG
Quindi perché dovresti allontanarti dal fidato JPG o GIF in SVG? Ci sono molte ragioni per cui questo formato potrebbe essere il miglior uso nei tuoi progetti. (E c'è anche il potenziale di usare SVG anche per la stampa.)
- SVG è un formato vettoriale. Questo da solo è importante quando si pensa al design reattivo, in cui le dimensioni dell'immagine spesso cambiano in base al dispositivo. Un file SVG è abbastanza piccolo da consentire a un solo file di svolgere tutto il lavoro e non vi è alcuna perdita di qualità su schermi più grandi.
- Le immagini e i comportamenti SVG sono definiti con XML, il che significa che le immagini possono essere ricercate indicizzate, gestite da script e compresse.
- Puoi fare quasi tutto con un'immagine SVG che puoi fare con qualsiasi altra immagine, come includere una varietà di tecniche di progettazione. È facile aggiungere filtri, metodi di fusione, effetti fresa, colore, ritaglio e mascheratura, ombreggiature e quasi ogni altra tecnica che ti piace.
- I file SVG sono accessibili.
- SVG funziona con standard web aperti.
- Puoi creare SVG usando il codice testuale o con l'immagine che disegni. Ciò consente un po 'di libertà, a seconda delle esigenze e del livello di competenza in diverse aree.
- Le dimensioni dei file sono minuscole e possono essere minimizzate. Ciò significa che la grafica che potrebbe essere stata di grandi dimensioni non lo è, aumentando i tempi di caricamento. (Sempre un bonus.)
Contro dell'utilizzo di SVG
Probabilmente sei venduto su SVG dopo aver letto tutti i vantaggi, giusto? Ma ci sono anche alcuni aspetti negativi da considerare.
- I browser meno recenti, come Internet Explorer 8 o precedenti, non supportano SVG. Probabilmente puoi trovare una soluzione (o potrebbe non interessarti), ma dovresti sapere che potrebbero esserci degli utenti che non vedono le tue immagini.
- SVG non funziona per immagini complesse come le foto. È un formato progettato solo per forme e linee.
Quali sono le prospettive per SVG?
Il futuro di SVG è appena iniziato. Come formato di immagine mobile adottato (e standard), l'uso e lo sviluppo di SVG continueranno a crescere.
Secondo W3C, "SVG 2 è attualmente in fase di sviluppo e aggiungerà nuove funzionalità di facile utilizzo a SVG, oltre a una più stretta integrazione con HTML, CSS e DOM e funzioni deprecanti non supportate da tutti i browser."
Altre aggiunte vengono anche lanciate. Le aziende di hardware di stampa stanno cercando modi per utilizzare meglio SVG per i processi di stampa e hanno il supporto di leader del settore come Adobe e Canon. Anche l'uso nella mappatura e nel GIS si sta espandendo, consentendo migliori funzionalità di mappatura e zoom.
Quando inizi davvero a pensarci, c'è un'opportunità quasi infinita su come utilizzare e implementare SVG nei progetti sul Web e nella progettazione stampata. (Questa è una delle bellezze del formato basato su vettori.)
Risorse SVG
Ora che sei un po 'più entusiasta di SVG e puoi vedere perché e come può essere utile per i tuoi progetti, abbiamo un elenco di risorse per aiutarti a iniziare.
- Esportazione di SVG per il Web con Adobe Illustrator
- Incorpora SVG direttamente nelle pagine HTML
- In esecuzione con SVG Video Series
- Profili SVG
- Trucchi CSS: utilizzo di SVG
Conclusione
Stai già utilizzando SVG per i tuoi progetti? In caso contrario, sei pronto per apportare la modifica?
SVG sta diventando sempre più popolare quasi ogni giorno e poiché è uno strumento open source, questi cambiamenti e progressi vengono letti immediatamente per te. Non sei legato a nessun fornitore o prodotto e puoi creare immagini completamente compatibili sul Web moderno.
Fotografie Stock Per gentile concessione del mercato creativo .
