Comment insérer un SVG dans un document HTML?

Il existe plusieurs façons d'insérer un SVG dans HTML :

• SVG en ligne : Insertion du code SVG directement dans le HTML à l'aide de la balise <svg>.
• Balise <img> : Utilisation de la balise <img> avec l'attribut src pointant vers le fichier SVG.
• Balise <object> : Insertion de SVG via la balise <object>.
• Balise <embed> : Insertion de SVG via la balise <embed>.
• CSS : Utilisation du SVG comme image de fond via CSS.
• <iframe> : Insertion d'une page HTML avec SVG via <iframe>.

Chaque méthode a ses caractéristiques et avantages :

Méthode	Avantages	Inconvénients	Utilisation
SVG en ligne	Contrôle total, interactivité JS/CSS	Augmentation de la taille du HTML, complexité du cache	Petits SVG et icônes fréquemment modifiés
<img>	Simplicité, mise en cache	Contrôle limité, pas d'interactivité JS	Images statiques
<object>	Semantique (objet externe), interactivité JS	Un peu plus complexe que <img>, support navigateur	SVG complexes, contenu de secours
<embed>	Plus simple que <object>, support des anciens plugins	Non recommandé en HTML5	Compatibilité avec le code ancien
CSS Background	Positionnement flexible, pas de balises supplémentaires en HTML	Pas d'interactivité JS, contrôle limité	Éléments décoratifs, motifs
<iframe>	Isolation complète, chargement d'une page séparée	Surcharge, complexité d'interaction	Insertion d'éléments complexes et indépendants

Exemple de SVG en ligne :

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

Exemple d'utilisation de <img> :

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

Exemple d'utilisation de <object> :

<object data="image.svg" type="image/svg+xml">
  <!-- Contenu de secours -->
  <img src="image.png" alt="Image alternative">
</object>

Exemple d'utilisation de CSS :

.element {
  background-image: url('image.svg'); /* Utilisation du SVG comme fond */
  background-size: cover; /* Exemple de stylisation */
}