Chapitre 570 | Les intégrations SVG

1. En tant qu’image (<img>)

La méthode la plus simple consiste à utiliser une balise <img> pour insérer le fichier SVG.

HTML :

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

• Avantages :
  • Simple à utiliser.
  • Pas besoin de modifier le SVG.
• Inconvénients :
  • Pas de contrôle direct sur le contenu ou le style à l’intérieur du SVG via CSS.

---

2. En tant que fond avec CSS

Le SVG peut être utilisé comme une image de fond dans une règle CSS.

HTML :

<div class="svg-background"></div>

CSS :

.svg-background {
  width: 200px;
  height: 200px;
  background: url('image.svg') no-repeat center;
  background-size: contain;
}

• Avantages :
  • Idéal pour des icônes ou motifs de fond.
• Inconvénients :
  • Le SVG n’est pas interactif.

---

3. En intégrant le code SVG directement dans le HTML

Vous pouvez copier le contenu du fichier SVG et l’insérer directement dans le code HTML.

HTML :

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

• Avantages :
  • Le SVG devient entièrement manipulable avec CSS ou JavaScript.
  • Permet d’appliquer des styles directement sur les éléments SVG.
• Inconvénients :
  • Nécessite de modifier le HTML, ce qui peut alourdir le fichier.

---

4. Via une balise <object>

Cette méthode permet d’intégrer le fichier SVG tout en conservant une certaine interactivité.

HTML :

<object type="image/svg+xml" data="image.svg" width="300" height="200"></object>

• Avantages :
  • Le SVG reste indépendant et interagit avec son propre code.
• Inconvénients :
  • Moins bien pris en charge que <img>.