Aller au contenu

Les images SVG

SVG (Scalable Vector Graphics) est un format d'image vectorielle basé sur le langage XML. Contrairement aux images de format JPEG et PNG, les SVG sont constitués de formes géométriques (lignes, cercles, textes, polygones…).

Avantages

  • Qualité optimale peu importe la taille ou la résolution de l'écran.
  • Personnalisable : couleurs, traits et effets modifiables via CSS.
  • Animation : possibilité d'ajouter des animations ou interactions via CSS.
  • Accessibilité : le code étant textuel, il peut être lu par les moteurs de recherche.

Insérer un SVG dans une page HTML

Si vous avez un fichier au format SVG, vous pouvez simplement utiliser la balise <img> comme pour les autres types d'images.

<img src="image.svg" alt="Illustration vectorielle">

On peut aussi l'intégrer directement dans un HTML avec la balise <svg>.

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

Dans cette exemple on indique avec la balise <circle> de dessiner un cercle selon les attributs donnés.

Pour plus de détail sur la création d'un SVG : Tutoriel SVG avec HTML5. Vous n'avez pas besoin d'apprendre à créer des SVG de cette façon. Certains sites vous en offre gratuitement et vous n'avez qu'à copier le SVG désiré.

Exemple tiré du site fontawesome.com
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM404.4 276.7L324.4 404.7C320.2 411.4 313 415.6 305.1 416C297.2 416.4 289.6 412.8 284.9 406.4L236.9 342.4C228.9 331.8 231.1 316.8 241.7 308.8C252.3 300.8 267.3 303 275.3 313.6L302.3 349.6L363.7 251.3C370.7 240.1 385.5 236.6 396.8 243.7C408.1 250.8 411.5 265.5 404.4 276.8z"/></svg>