SVG (Scalable Vector Graphics) est un format d’image vectorielle basé sur XML, utilisé pour représenter des graphiques en deux dimensions. Contrairement aux images matricielles (JPEG, PNG), qui sont composées de pixels, les images SVG sont définies par des formes géométriques et des instructions mathématiques. Cela signifie qu’un fichier SVG peut être agrandi ou réduit sans perte de qualité.
SVG est largement utilisé sur le web pour afficher des logos, des icônes, des animations et des graphiques interactifs. Son adoption est favorisée par sa compatibilité avec les navigateurs modernes et son intégration avec CSS et JavaScript.
Fonctionnement et caractéristiques de SVG
SVG repose sur un langage XML qui décrit les éléments graphiques et leurs propriétés. Un fichier SVG peut contenir des formes simples (cercles, rectangles, lignes), du texte, des dégradés, des filtres, et même des animations.
Caractéristiques principales :
- Scalabilité parfaite : Une image SVG peut être redimensionnée sans perte de qualité, ce qui la rend idéale pour les écrans haute résolution.
- Basé sur XML : Un fichier SVG est un fichier texte structuré contenant des balises définissant les formes et les styles.
- Compatibilité avec CSS et JavaScript : Les éléments SVG peuvent être stylisés avec CSS et rendus interactifs avec JavaScript.
- Support natif des animations : SVG permet d’animer des formes et des couleurs avec les balises
<animate>et<animateTransform>, ainsi qu’avec CSS et JavaScript. - Poids réduit : Comparé aux formats bitmap, un fichier SVG est souvent plus léger, surtout pour les icônes et les graphiques simples.
- Accessibilité et recherche : Étant du texte, un fichier SVG peut être indexé par les moteurs de recherche et être accessible aux lecteurs d’écran.
Avantages de SVG
- Qualité d’affichage optimale : Contrairement aux images raster, SVG ne pixellise pas et conserve une netteté parfaite à toutes les résolutions.
- Idéal pour le web responsive : SVG s’adapte automatiquement aux différentes tailles d’écran sans nécessiter plusieurs versions d’une même image.
- Interactivité et animation : Peut être manipulé dynamiquement avec JavaScript, idéal pour les graphiques interactifs et les animations.
- Fichiers légers : Un SVG bien optimisé est souvent plus petit qu’un fichier PNG ou JPEG, améliorant les performances web.
- Accessibilité et SEO : Le texte contenu dans un SVG est lisible par les moteurs de recherche et les technologies d’assistance.
Inconvénients de SVG
- Complexité pour les images détaillées : Pour des images très complexes, le fichier SVG peut devenir volumineux et difficile à gérer.
- Moins performant pour les photographies : SVG est inadapté aux images réalistes avec beaucoup de détails, où les formats raster sont plus efficaces.
- Support limité sur certaines plateformes : Bien que largement pris en charge sur les navigateurs modernes, certaines anciennes versions de logiciels peuvent mal gérer SVG.
- Nécessite des connaissances en XML : La création et la modification manuelles d’un fichier SVG nécessitent une certaine maîtrise du langage XML.
- Problèmes de sécurité : Un fichier SVG peut contenir du JavaScript malveillant, nécessitant des précautions lors de son utilisation en ligne.
Conclusion
SVG est un format incontournable pour le web moderne, particulièrement adapté aux logos, icônes et graphiques interactifs. Grâce à sa scalabilité, son poids léger et sa compatibilité avec les technologies web, il est idéal pour les interfaces responsives. Cependant, il n’est pas adapté aux images complexes comme les photographies et nécessite une gestion sécurisée pour éviter des risques liés au JavaScript intégré.
Source : https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics