Cum se inserează SVG într-un document HTML?

Există mai multe modalități de a insera SVG în HTML:

• SVG inline: Inserarea codului SVG direct în HTML folosind tag-ul <svg>.
• Tag-ul <img>: Utilizarea tag-ului <img> cu atributul src care indică către fișierul SVG.
• Tag-ul <object>: Inserarea SVG-ului folosind tag-ul <object>.
• Tag-ul <embed>: Inserarea SVG-ului folosind tag-ul <embed>.
• CSS: Utilizarea SVG ca imagine de fundal prin CSS.
• <iframe>: Inserarea unei pagini HTML cu SVG folosind <iframe>.

Fiecare metodă are propriile caracteristici și avantaje:

Metodă	Avantaje	Dezavantaje	Aplicație
SVG inline	Control total, interactivitate JS/CSS	Crește dimensiunea HTML, complexitate în cache	SVG mici și care se schimbă frecvent, pictograme
<img>	Simplitate, cache	Control limitat, fără interactivitate JS	Imagini statice
<object>	Semantica (obiect extern), interactivitate JS	Puțin mai complex decât <img>, suport browser	SVG complexe, conținut fallback
<embed>	Mai simplu decât <object>, suport pentru plugin-uri vechi	Nu recomandat în HTML5	Compatibilitate cu cod vechi
CSS Background	Poziționare flexibilă, fără etichete suplimentare în HTML	Fără interactivitate JS, control limitat	Elemente decorative, modele
<iframe>	Izolare completă, încărcare pagină separată	Supraaglomerare, dificultăți în interacțiune	Inserarea elementelor complexe și independente

Exemplu de SVG inline:

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

Exemplu de utilizare a tag-ului <img>:

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

Exemplu de utilizare a tag-ului <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Conținut fallback -->
  <img src="image.png" alt="Imagine alternativă">
</object>

Exemplu de utilizare CSS:

.element {
  background-image: url('image.svg'); /* Utilizarea SVG ca fundal */
  background-size: cover; /* Exemplu de stilizare */
}