{"id":164048,"date":"2025-04-14T09:00:00","date_gmt":"2025-04-14T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/svg-html-grafica-vettoriale-scalabile\/"},"modified":"2025-04-14T09:00:00","modified_gmt":"2025-04-14T07:00:00","slug":"svg-html-grafica-vettoriale-scalabile","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/svg-html-grafica-vettoriale-scalabile\/","title":{"rendered":"SVG in HTML: Grafica Vettoriale Scalabile per il Web"},"content":{"rendered":"

La Scalable Vector Graphics<\/strong> (SVG) \u00e8 un formato di immagine basato su XML che descrive la grafica attraverso forme geometriche, testo e percorsi matematici anzich\u00e9 pixel. Questa natura vettoriale rende le immagini SVG perfettamente scalabili a qualsiasi dimensione senza perdita di qualit\u00e0, un vantaggio cruciale nell’era dei display ad alta densit\u00e0 e del responsive design. In questa guida vedremo come integrare e sfruttare SVG all’interno delle pagine HTML.<\/p>\n

SVG Inline vs SVG Esterno<\/h2>\n

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\u00e0, performance e manutenibilit\u00e0 del progetto.<\/p>\n

L’SVG inline<\/strong> consiste nell’inserire il codice SVG direttamente nel markup HTML, utilizzando il tag <svg><\/code> come un qualsiasi altro elemento HTML. Questo approccio offre il massimo controllo: \u00e8 possibile stilizzare ogni elemento con CSS, manipolarlo con JavaScript, animarlo e renderlo interattivo. Lo svantaggio principale \u00e8 che il codice SVG non viene memorizzato nella cache separatamente e aumenta le dimensioni del documento HTML.<\/p>\n

L’SVG come immagine esterna<\/strong> si include tramite il tag <img><\/code> con l’attributo src che punta al file .svg. Questo metodo \u00e8 il pi\u00f9 semplice e permette la cache del file, ma limita le possibilit\u00e0 di interazione: non \u00e8 possibile stilizzare i singoli elementi dell’SVG con CSS esterno n\u00e9 manipolarli con JavaScript. \u00c8 il metodo ideale per illustrazioni decorative che non richiedono interattivit\u00e0.<\/p>\n

L’SVG pu\u00f2 essere incluso anche come sfondo CSS<\/strong> tramite background-image, come oggetto incorporato tramite <object><\/code> (che permette l’interattivit\u00e0 ma \u00e8 meno comune), o come riferimento <use><\/code> per sistemi di icone sprite. Il tag <object><\/code> \u00e8 particolarmente utile quando si necessita di interattivit\u00e0 con SVG esterni, poich\u00e9 permette l’accesso al DOM interno dell’SVG tramite JavaScript.<\/p>\n

Elementi SVG Fondamentali<\/h2>\n

SVG definisce un ricco set di elementi geometrici<\/strong> per la costruzione di grafiche. Gli elementi base includono forme primitive che possono essere combinate per creare composizioni complesse:<\/p>\n