Inserire una immagine SVG (acronimo di: S calable V ector G raphics) può essere fatto usando sempre il tag <img src="...&...
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
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.
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:
- 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.
- 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.
- 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.
- Interattività: Gli SVG possono essere resi interattivi utilizzando JavaScript e CSS. Puoi aggiungere eventi come clic, passaggi del mouse o animazioni.
- 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.
- 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.
- 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
Nessun commento