La Scalable Vector Graphics (SVG) è un formato di immagine basato su XML che descrive la grafica attraverso forme geometriche, testo e percorsi matematici anziché pixel. Questa natura vettoriale rende le immagini SVG perfettamente scalabili a qualsiasi dimensione senza perdita di qualità, un vantaggio cruciale nell’era dei display ad alta densità e del responsive design. In questa guida vedremo come integrare e sfruttare SVG all’interno delle pagine HTML.
SVG Inline vs SVG Esterno
Esistono diversi modi per includere un’immagine SVG in una pagina HTML, ognuno con vantaggi e limitazioni specifici. La scelta del metodo dipende dalle esigenze di interattività, performance e manutenibilità del progetto.
L’SVG inline consiste nell’inserire il codice SVG direttamente nel markup HTML, utilizzando il tag <svg> come un qualsiasi altro elemento HTML. Questo approccio offre il massimo controllo: è possibile stilizzare ogni elemento con CSS, manipolarlo con JavaScript, animarlo e renderlo interattivo. Lo svantaggio principale è che il codice SVG non viene memorizzato nella cache separatamente e aumenta le dimensioni del documento HTML.
L’SVG come immagine esterna si include tramite il tag <img> con l’attributo src che punta al file .svg. Questo metodo è il più semplice e permette la cache del file, ma limita le possibilità di interazione: non è possibile stilizzare i singoli elementi dell’SVG con CSS esterno né manipolarli con JavaScript. È il metodo ideale per illustrazioni decorative che non richiedono interattività.
L’SVG può essere incluso anche come sfondo CSS tramite background-image, come oggetto incorporato tramite <object> (che permette l’interattività ma è meno comune), o come riferimento <use> per sistemi di icone sprite. Il tag <object> è particolarmente utile quando si necessita di interattività con SVG esterni, poiché permette l’accesso al DOM interno dell’SVG tramite JavaScript.
Elementi SVG Fondamentali
SVG definisce un ricco set di elementi geometrici per la costruzione di grafiche. Gli elementi base includono forme primitive che possono essere combinate per creare composizioni complesse:
- <rect>: rettangolo definito da posizione (x, y), dimensioni (width, height) e opzionalmente angoli arrotondati (rx, ry)
- <circle>: cerchio definito dal centro (cx, cy) e dal raggio (r)
- <ellipse>: ellisse definita dal centro (cx, cy) e dai raggi orizzontale (rx) e verticale (ry)
- <line>: linea tra due punti (x1, y1) e (x2, y2)
- <polyline>: serie di segmenti collegati definiti dall’attributo points
- <polygon>: come polyline ma con chiusura automatica della forma
L’elemento più versatile è <path>, che utilizza un mini-linguaggio di comandi nell’attributo d per definire percorsi arbitrari. I comandi principali sono: M (moveTo) per spostare il cursore, L (lineTo) per tracciare una linea, C per curve di Bézier cubiche, Q per curve quadratiche, A per archi ellittici e Z per chiudere il percorso. I comandi maiuscoli usano coordinate assolute, quelli minuscoli coordinate relative.
L’elemento <text> permette di inserire testo all’interno dell’SVG, con il vantaggio che il testo rimane selezionabile e indicizzabile dai motori di ricerca. Gli attributi x, y posizionano il testo, mentre font-family, font-size e font-weight controllano l’aspetto tipografico.
L’Attributo viewBox e il Sistema di Coordinate
Il viewBox è uno degli aspetti più importanti e spesso fraintesi di SVG. Definisce il sistema di coordinate interno dell’SVG attraverso quattro valori: min-x, min-y, width e height. In combinazione con gli attributi width e height dell’elemento <svg>, il viewBox controlla come il contenuto viene scalato e posizionato.
Quando le proporzioni del viewBox non corrispondono a quelle dell’elemento SVG, l’attributo preserveAspectRatio determina il comportamento di adattamento. Il valore predefinito “xMidYMid meet” centra il contenuto mantenendo le proporzioni e facendolo rientrare completamente nell’area di visualizzazione. Il valore “none” distorce il contenuto per riempire l’intera area, mentre “xMidYMid slice” mantiene le proporzioni ma ritaglia il contenuto eccedente.
Per creare SVG responsive, la tecnica più efficace è definire il viewBox e rimuovere gli attributi width e height dall’elemento SVG, impostandoli invece tramite CSS. In questo modo, l’SVG si adatta automaticamente alle dimensioni del suo contenitore, mantenendo le proporzioni definite dal viewBox. Questa è la stessa tecnica che rende le icone SVG scalabili perfettamente a qualsiasi dimensione.
Stilizzare SVG con CSS
Quando un SVG è inserito inline nel documento HTML, ogni suo elemento può essere stilizzato con CSS, utilizzando selettori, classi e proprietà come per qualsiasi altro elemento HTML. Tuttavia, le proprietà CSS per SVG differiscono in parte da quelle standard.
Le proprietà principali per la colorazione sono fill (equivalente a background-color, controlla il colore di riempimento), stroke (equivalente a border-color, controlla il colore del contorno) e stroke-width (lo spessore del contorno). La proprietà opacity e le sue varianti fill-opacity e stroke-opacity controllano la trasparenza.
È possibile applicare transizioni e animazioni CSS agli elementi SVG, rendendo possibile creare effetti hover, cambi di colore graduali e animazioni sofisticate senza JavaScript. Ad esempio, un’icona SVG inline può cambiare colore al passaggio del mouse semplicemente definendo una regola CSS con :hover che modifica la proprietà fill.
CSS offre anche proprietà specifiche per SVG come stroke-dasharray (per linee tratteggiate) e stroke-dashoffset (per animare il tratto delle linee), che permettono di creare il popolare effetto di “disegno progressivo” di un percorso SVG. Questo effetto è ampiamente utilizzato nelle animazioni di intro dei siti web moderni.
Animazioni SVG
SVG supporta tre approcci per le animazioni: SMIL (Synchronized Multimedia Integration Language), CSS e JavaScript. SMIL utilizza elementi XML come <animate> e <animateTransform> direttamente nel codice SVG. Sebbene Chrome avesse inizialmente annunciato la deprecazione di SMIL, ha poi fatto marcia indietro e il supporto è attualmente stabile in tutti i browser principali.
Le animazioni CSS sono generalmente preferite per la loro semplicità e integrazione con il workflow di sviluppo web esistente. Si possono usare @keyframes e la proprietà animation su qualsiasi elemento SVG inline, così come le transizioni per effetti al passaggio del mouse. Le proprietà transform (translate, rotate, scale) funzionano anche su elementi SVG, con la differenza che l’origine della trasformazione è l’angolo superiore sinistro dell’SVG e non il centro dell’elemento.
Per animazioni più complesse, le librerie JavaScript come GSAP (GreenSock Animation Platform) offrono un controllo preciso e performance eccellenti per animare elementi SVG. GSAP gestisce automaticamente le differenze tra browser e fornisce funzionalità avanzate come timeline, morphing di percorsi e animazioni basate sullo scroll. Per chi preferisce un approccio più leggero, la Web Animations API nativa offre un buon compromesso tra funzionalità e peso.
Icone SVG e Accessibilità
Uno degli usi più diffusi di SVG è la creazione di sistemi di icone. Le icone SVG offrono vantaggi decisivi rispetto ai font di icone: caricamento più affidabile, dimensioni più contenute (si caricano solo le icone utilizzate), nessun problema di rendering FOUT, supporto per multicolore e animazioni, e migliore accessibilità.
La tecnica moderna per i sistemi di icone SVG prevede l’uso di un sprite SVG (un file contenente tutti i simboli definiti con <symbol>) e il riferimento ai singoli simboli tramite <use> con l’attributo href. Questo approccio combina i vantaggi della cache del file esterno con la possibilità di stilizzazione CSS tramite la proprietà currentColor.
L’accessibilità delle immagini SVG richiede attenzione specifica. Per SVG decorativi, aggiungere role=”img” e aria-hidden=”true” nasconde l’elemento dalle tecnologie assistive. Per SVG informativi, aggiungere un elemento <title> all’interno dell’SVG fornisce un’alternativa testuale equivalente all’attributo alt delle immagini raster. L’attributo aria-labelledby può collegare l’SVG al suo titolo per una migliore compatibilità con gli screen reader.
Per approfondire le differenze tra Canvas e SVG in scenari specifici, leggi il nostro articolo su HTML Canvas. La scelta tra le due tecnologie dipende dal caso d’uso, e conoscere entrambe è fondamentale per ogni sviluppatore web moderno.
Hai bisogno di aiuto con la grafica SVG per il tuo sito web? G Tech Group offre servizi di sviluppo web professionale e web design. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.