Hoe voeg je SVG toe aan een HTML-document?

Er zijn verschillende manieren om SVG in HTML te plaatsen:

• Inline SVG: SVG-code direct in HTML plaatsen met behulp van de <svg>-tag.
• <img>-tag: Gebruik van de <img>-tag met de src-attribuut dat verwijst naar het SVG-bestand.
• <object>-tag: SVG invoegen via de <object>-tag.
• <embed>-tag: SVG invoegen via de <embed>-tag.
• CSS: Gebruik van SVG als achtergrondafbeelding via CSS.
• <iframe>: HTML-pagina met SVG invoegen via <iframe>.

Elke methode heeft zijn eigen kenmerken en voordelen:

Methode	Voordelen	Nadelen	Toepassing
Inline SVG	Volledige controle, interactiviteit JS/CSS	Verhoogt de HTML-grootte, caching complexiteit	Kleine en vaak veranderende SVG's, iconen
<img>	Eenvoud, caching	Beperkte controle, geen JS-interactiviteit	Statische afbeeldingen
<object>	Semantiek (externe object), JS-interactiviteit	Iets complexer dan <img>, browserondersteuning	Complexe SVG's, fallback-inhoud
<embed>	Simpler dan <object>, ondersteuning oude plugins	Niet aanbevolen in HTML5	Compatibiliteit met oude code
CSS Background	Flexibele positionering, geen extra tags in HTML	Geen JS-interactiviteit, beperkte controle	Decoratieve elementen, patronen
<iframe>	Volledige isolatie, laden van een aparte pagina	Overhead, interactieproblemen	Invoegen van complexe, onafhankelijke elementen

Voorbeeld van inline SVG:

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

Voorbeeld van gebruik van <img>:

<img src="image.svg" alt="SVG-beschrijving">

Voorbeeld van gebruik van <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Fallback-inhoud -->
  <img src="image.png" alt="Alternatief beeld">
</object>

Voorbeeld van CSS:

.element {
  background-image: url('image.svg'); /* SVG als achtergrond */
  background-size: cover; /* Voorbeeld van styling */
}