Immagini SVG come inserirle in HTML, dove trovarle e come modificarle?

Inserire una immagine SVG (acronimo di: Scalable Vector Graphics) può essere fatto usando sempre il tag <img
src=”…” /> qui di seguito puoi copiare un codice di esempio da completare con i dati relativi alla tua immagine.

Esempio codice

<img decoding="async" src="esempio.svg" alt="descrizione immagine" height="" width="" /><br />

Dove trovare immagine SVG free

Comer per i siti che propongono immagini free, libere da diritti d’uso, quindi
copy left, esistono siti con immagine SVG free, libere. A questo link è
possibile trovare moltissime immagini SVG.

• freesvg.org
• www.svgrepo.com

Programmi di grafica che esportano in SVG

• www.photopea.com
  Con questo programma è possibile anche aprire e modificare online file svg direttamente dal browser, senza dover installare nulla.

• inkscape.org/it
  programma vettoriale gratuito open source.

Nota bene che è possibile convertire i file vettoriali di illustrator o in formato .eps (Encapsuled PostScript) in formato .svg (Scalable Vector Graphics).

Video Tutorial

In questo video molto ben fatto è possibile vedere come inserire i file SVG in
HTML, inoltre spiega i PRO ed i CONTRO relativi ai 2 metodi di inserimento in
HTML delle immagini SVG.

Approfondimenti sulle immagini SVG

Le immagini SVG, o Scalable Vector Graphics, sono un formato di file grafico
basato su XML (eXtensible Markup Language) che rappresenta immagini
vettoriali. A differenza delle immagini raster, che sono composte da pixel e
possono diventare sfocate quando ingrandite, le immagini SVG sono composte
da oggetti geometrici come linee, curve, forme e testo, che possono essere
ridimensionati senza perdere la qualità o la nitidezza.

Ecco alcune caratteristiche chiave delle immagini SVG:

1. Vettoriali e Scalabili: Le immagini SVG sono scalabili all’infinito
   senza perdita di qualità. Sia che tu le visualizzi su un piccolo schermo
   di smartphone o su un grande monitor, mantengono la stessa nitidezza.

2. Testo e Grafica: Gli SVG possono contenere sia testo che elementi
   grafici. Questo li rende molto flessibili per rappresentare dati, grafici,
   icone, loghi e molto altro.

3. XML-Based: Gli SVG sono basati su XML, il che significa che sono
   leggibili sia da esseri umani che da computer. Puoi modificarli
   direttamente con un editor di testo o con strumenti di disegno
   vettoriale.

4. Interattività: Gli SVG possono essere resi interattivi utilizzando
   JavaScript e CSS. Puoi aggiungere eventi come clic, passaggi del mouse o
   animazioni.

5. Compatibilità: La maggior parte dei browser web moderni supporta
   pienamente gli SVG. Possono essere incorporati direttamente nelle pagine
   web utilizzando il tag <svg> o inclusi come file esterni.

6. Dimensioni Ridotte: Gli SVG tendono ad avere dimensioni di file più
   piccole rispetto alle immagini raster, il che li rende ideali per la
   visualizzazione su web e in applicazioni web.

7. Accessibilità: Gli SVG possono essere resi accessibili a persone
   con disabilità visive, consentendo l’aggiunta di descrizioni testuali e
   metadati utili per le tecnologie di assistenza.

Gli SVG sono ampiamente utilizzati per l’illustrazione, l’animazione,
l’elaborazione dati e molto altro. Sono una scelta popolare quando è
necessario visualizzare grafica di alta qualità su diverse piattaforme e
dimensioni dei dispositivi.

Fonte: OpenAI GPT 3.5