À retenir
- Qualité constante : ne devient jamais flou, peu importe le zoom.
- Poids plume : souvent beaucoup plus léger qu'une image classique pour des formes géométriques.
- Modifiable par code : on peut changer ses couleurs ou l'animer avec CSS et JavaScript.
Le SVG est un format d'image qui ne repose pas sur des pixels (petits carrés colorés), mais sur des formules mathématiques décrivant des formes (lignes, cercles, courbes). Imaginez une recette de cuisine : au lieu de vous donner une photo du gâteau fini, on vous donne les étapes pour le reconstruire ; peu importe la taille du plat, le résultat sera toujours parfait et net.
Étymologie
Acronyme de l'anglais Scalable Vector Graphics (graphiques vectoriels extensibles). Apparu à la fin des années 90 et standardisé par le W3C, il utilise le langage XML pour décrire les images sous forme de texte lisible par une machine.
Exemples d'usage
- Le logo d'un site web qui reste parfaitement net sur un écran de smartphone comme sur une télévision 4K.
- Une icône de menu qui change de couleur au survol de la souris grâce à quelques lignes de code CSS.
- Une carte géographique interactive où l'on peut zoomer sans jamais voir de flou ou de pixels.
Cas d'usage
Le SVG est omniprésent dans le développement web pour les icônes, les logos et les illustrations simples. Il est aussi très utilisé en data visualisation (graphiques animés) car chaque élément de l'image peut être manipulé par du code JavaScript.
Bonnes pratiques
Il est recommandé de toujours « minifier » (nettoyer) ses fichiers SVG pour supprimer les informations inutiles générées par les logiciels de dessin. Pensez également à l'accessibilité en ajoutant une balise <title> à l'intérieur du code pour que les lecteurs d'écran puissent décrire l'image.
Synonymes
Antonymes
Conseil
Pour bien comprendre le SVG, essayez d'ouvrir un fichier .svg avec un simple éditeur de texte (comme le Bloc-notes). Vous verrez que l'image est en fait composée de balises comme <circle> ou <rect>. C'est du dessin par le code !
Questions fréquentes
Peut-on mettre une photo en SVG ?
Non, le SVG est conçu pour des dessins, des logos ou des schémas. Pour une photographie complexe, les formats JPEG ou WebP restent bien plus adaptés.
Est-ce que tous les navigateurs lisent le SVG ?
Oui, tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) supportent parfaitement le format SVG depuis de nombreuses années.