Come inserire SVG in un documento HTML?

Esistono diversi modi per inserire SVG in HTML:

• SVG inline: Inserimento diretto del codice SVG nel HTML usando il tag <svg>.
• Tag <img>: Uso del tag <img> con l'attributo src che punta al file SVG.
• Tag <object>: Inserimento di SVG tramite il tag <object>.
• Tag <embed>: Inserimento di SVG tramite il tag <embed>.
• CSS: Uso di SVG come immagine di sfondo tramite CSS.
• <iframe>: Inserimento di una pagina HTML con SVG usando <iframe>.

Ogni metodo ha le sue caratteristiche e vantaggi:

Metodo	Vantaggi	Svantaggi	Applicazione
SVG inline	Controllo completo, interattività JS/CSS	Aumenta la dimensione dell'HTML, complessità di caching	Piccoli SVG e icone che cambiano frequentemente
<img>	Semplicità, caching	Controllo limitato, nessuna interattività JS	Immagini statiche
<object>	Semantica (oggetto esterno), interattività JS	Un po' più complesso di <img>, supporto browser	SVG complessi, contenuto fallback
<embed>	Più semplice di <object>, supporto plugin vecchi	Non raccomandato in HTML5	Compatibilità con codice legacy
CSS Background	Posizionamento flessibile, nessun tag aggiuntivo in HTML	Nessuna interattività JS, controllo limitato	Elementi decorativi, pattern
<iframe>	Isolamento completo, caricamento di pagina separata	Sovraccarico, difficoltà di interazione	Inserimento di elementi complessi e indipendenti

Esempio di SVG inline:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Esempio di utilizzo del tag <img>:

<img src="image.svg" alt="Descrizione SVG">

Esempio di utilizzo del tag <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Contenuto fallback -->
  <img src="image.png" alt="Immagine alternativa">
</object>

Esempio di utilizzo di CSS:

.element {
  background-image: url('image.svg'); /* Uso di SVG come sfondo */
  background-size: cover; /* Esempio di stilizzazione */
}