Come Usare Immagini SVG in CSS e HTML – Una Guida per principianti

Michele Bonatti — Thu, 17 Feb 2022 05:30:00 +0000

Articolo originale: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

SVG sta per Scalable Vector Graphics. È un tipo speciale di formato immagine per grafiche vettoriali scritto in Extensible Markup Language (XML).

In questa guida, spiegherò perché utilizzare immagini SVG e come sfruttarle in CSS e HTML.

Perché dovresti usare immagini SVG?

Ci sono varie ragioni per usare immagini SVG, alcune di queste sono:

Le immagini SVG non perdono la loro qualità quando ridimensionate.
Possono essere create o modificate con un IDE o con un editor di testo.
Sono accessibili e animabili.
Hanno un file di piccole dimensioni e sono scalabili.
E possono essere cercate, indicizzate, elaborate e compresse.

Ora andiamo a vedere come puoi effettivamente lavorare con immagini SVG.

Come scaricare le immagini SVG usate in questa guida

Se vuoi lavorare con le immagini SVG che ho usato in questa guida, segui i passi (e il diagramma) qui sotto per scaricarli.

Vai su unDraw.
Cambia il colore dello sfondo in giallo.
Nella casella di ricerca, scrivi la parola happy.

‌

Clicca sull'immagine chiamata Happy news.
Sulla finestra di pop-up, clicca sul pulsante Download SVG to your projects.

Se segui correttamente i passi qui sopra, le immagini SVG dovrebbero essere sul tuo computer ora.‌‌

Ora, apri l'immagine SVG nel tuo IDE o editor di testo preferito. Rinominalo happy.svg o in qualunque modo tu preferisca.

Come usare immagini SVG in CSS e HTML

Ci sono diversi modi per usare immagini SVG in CSS e HTML. Noi esploreremo sei metodi diversi in questa guida.

1. Usare un SVG come un elemento

Questo metodo è il modo più semplice per aggiungere immagini SVG su una pagina web. Per usare questo metodo, aggiungi l'elemento al tuo documento HTML e menzionalo nell'attributo src in questo modo:

Assumendo che hai scaricato l'immagine SVG da unDraw e l'hai rinominata happy.svg, puoi andare avanti e aggiungere il frammento di codice sopra il tuo documento HTML.

Se hai fatto tutto correttamente, la tua pagina web dovrebbe assomigliare alla demo in basso. 👀

Quando aggiungi un'immagine SVG usando l'etichetta senza specificare le dimensioni, avrà le stesse dimensioni del file SVG originale.

Per esempio, nella demo sopra, non ho modificato le dimensioni dell'immagine SVG, quindi avrà le sue dimensioni originali (larghezza di 600.53015px e altezza di 915.11162px).

Nota: per cambiare le dimensioni, dovrai specificare width e height con CSS come puoi vedere nella demo in basso. puoi anche aggiornare width e height direttamente.

Nonostante possiamo cambiare le dimensioni delle immagini SVG attraverso il tag , ci sono comunque alcune restrizioni se vuoi fare grandi cambiamenti di stile alle immagini SVG.

2. Usare SVG come un CSS `background-image`

Questo è simile all'aggiungere SVG ad un documento HTML usando l'etichetta . Ma questa volta useremo CSS invece del HTML come puoi vedere nel frammento di codice in basso.

body {
  background-image: url(happy.svg);
}

L'utilizzo di un SVG come un'immagine di sfondo CSS ha delle limitazioni simili a , ma permette un po' più di personalizzazione.

Controlla la demo in basso e sentiti libero di fare modifiche usando il CSS.

3. Usare immagini SVG in linea

Le immagini SVG possono essere scritte direttamente nel documento HTML usando i tag , .

Per farlo, apri l'immagine SVG in VS Code o il tuo IDE preferito, copia il codice e incollalo dentro l'elemento nel tuo documento HTML.


 // Incolla qui il codice SVG.

Se hai fatto tutto correttamente, la tua pagina web dovrebbe essere esattamente come la demo in basso.

L'uso delle SVG in linea nel documento HTML, riduce i tempi di carica perché funge da richiesta HTTP.

Questo metodo ti dà molta più libertà di personalizzazione rispetto ai metodi o background-image .

4. Usare SVG come un

Puoi anche usare un elemento HTML per aggiungere immagini SVG a una pagina web usando la sintassi:

Usa l'attributo data per specificare l'URL della risorsa che userai tramite object, che nel nostro caso è l'immagine SVG.

Usa width e height per specificare le dimensioni dell'immagine SVG.

Ancora, sotto c'è una demo per te da esplorare. 😃

è supportato da tutti i browser che supportano SVG.

5. Usare SVG come un

Nonostante non sia consigliabile, puoi anche aggiungere un'immagine SVG usando un come nella demo in basso.

Basta tenere a mente, però, che può essere difficile da mantenere e sarà pessimo per il Search Engine Optimization (SEO) del tuo sito.

inoltre vanifica il senso di Scalable in Scalable Vector Graphics, perché le immagini SVG aggiunte in questo formato non sono scalabili.

6. Usare SVG come un

L'elemento HTML è un altro modo per usare un'immagine SVG in HTML e CSS usando questa sintassi: .

Tieni a mente, comunque, che anche questo metodo ha delle limitazioni. Secondo MDN, molti browser moderni hanno rimosso il supporto per i plug-in. Questo significa che fare affidamento su è generalmente non saggio se vuoi il tuo sito sia utilizzabile sul browser di un utente medio.

Qui sotto c'è una demo dell'uso dell'elemento HTML usato per aggiungere un'immagine SVG.

Conclusione

Spero che questo articolo ti abbia aiutato a imparare i diversi modi per usare le immagini SVG in CSS e HTML. La prossima volta che dovrai aggiungere delle immagini SVG a un sito web, saprai scegliere il metodo migliore.

Michele Bonatti - freeCodeCamp.org