Qu'est-ce que SVG?

SVG, ou Graphiques Vectoriels Évolutifs, est un format d’image vectorielle basé sur XML pour la graphie bidimensionnelle.

Caractéristiques principales:

• Évolutivité: Les images restent nettes à toute échelle, car elles sont décrites par des formules mathématiques, pas par des pixels.
• Format XML: La structure des fichiers SVG est décrite par des balises, semblables à HTML. Cela les rend lisibles et modifiables en texte.
• Interactivité: Possibilité d’ajouter des éléments interactifs avec JavaScript.
• Animation: Support de l’animation d’éléments avec CSS ou JavaScript.
• Accessibilité: Capacité à décrire le contenu pour les personnes avec des handicaps.
• Légèreté: Les fichiers SVG peuvent être plus petits que les images rasterisées de même qualité.

Utilisations du SVG:

• Intégration dans HTML via la balise <svg>:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Utilisation comme image de fond en CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Via la balise <img>:

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

• Via la balise <object> ou <iframe>.

SVG est parfait pour les logos, icônes, illustrations, graphiques et diagrammes, où la netteté à différentes tailles et la possibilité d’interactivité sont importantes.