Vous avez déjà agrandi une petite photo sur votre téléphone en écartant deux doigts ? À force de zoomer, elle devient floue, puis apparaissent de petits carrés. Les logos de certains sites, eux, restent parfaitement nets, même énormes. Ce n’est pas de la magie : ils sont souvent en SVG.
Deux façons de fabriquer une image
La plupart des images, comme les photos en JPG ou en PNG, sont faites de milliers de petits points de couleur, rangés en grille. On appelle ces points des pixels, et ce type d’image une image matricielle. Le fichier retient la couleur de chaque point, un par un. Quand on agrandit, l’ordinateur doit inventer les points qui manquent : l’image devient floue ou pleine de petits carrés.
Le SVG fonctionne autrement. Le fichier ne contient pas de points, il contient des instructions : « un cercle jaune, à tel endroit, de telle taille », « une ligne bleue d’ici à là ». On parle d’image vectorielle. Au moment de l’afficher, le navigateur lit ces instructions et dessine les formes, à la taille demandée. Petite ou géante, la forme est recalculée : elle reste nette.
Les trois lettres veulent dire Scalable Vector Graphics, soit à peu près « dessin vectoriel qui change de taille ». Retenez « l’image faite de formes ».
À quoi ressemble un SVG de l’intérieur ?
Un SVG est un simple fichier de texte. Si vous l’ouvrez avec un éditeur de texte, vous lisez des lignes qui ressemblent à du HTML, avec des balises. Par exemple, un cercle jaune s’écrit ainsi :
<circle cx="50" cy="50" r="40" fill="yellow" />
Cela veut dire : un cercle dont le centre est à la position 50, 50, de rayon 40, rempli de jaune. Vous n’avez jamais besoin d’écrire ça vous-même. Les logiciels de dessin, comme Illustrator, Inkscape ou Figma, produisent le SVG à votre place. Mais savoir que c’est du texte aide à comprendre ses avantages.
Pourquoi c’est parfait pour les logos et les icônes
- Toujours net : le même fichier sert pour une petite icône du menu et pour le grand logo en haut de la page.
- Léger : un logo simple tient en quelques lignes de texte, donc il pèse souvent très peu. Votre page s’ouvre plus vite.
- Transparent naturellement : seules les formes sont dessinées, il n’y a rien autour. Pas de rectangle blanc sur un fond de couleur, comme l’explique la page sur l’image transparente.
- Modifiable par le code : comme c’est du texte, le CSS peut changer la couleur d’une icône, et le JavaScript peut l’animer.
Et pourquoi pas pour les photos ?
Une photo de votre terrasse contient des millions de nuances : la lumière sur les feuilles, le grain d’une nappe, le reflet d’un verre. Décrire tout ça avec des cercles et des lignes serait interminable, et le fichier deviendrait énorme. Pour une photo, les points restent la bonne méthode : JPG ou WebP, comme l’explique la page sur les images d’un site.
Le SVG, c’est donc pour les dessins aux formes nettes et aux couleurs franches : logos, icônes, pictogrammes, schémas, petites illustrations.
Les mots qu’on vous dira
- Vectoriel : fait de formes et de calculs. Le SVG en est le format le plus courant sur le Web.
- Matriciel (ou « bitmap ») : fait de points, comme le JPG, le PNG ou le WebP.
- Vectoriser : transformer un dessin fait de points en formes. Cela marche bien pour un logo simple, beaucoup moins pour une photo.
- « Le fichier source du logo » : souvent la version vectorielle, celle à partir de laquelle on peut tout refaire.
Ce que vous avez à retenir
Si quelqu’un crée votre logo, demandez-lui toujours une version en SVG en plus du PNG. C’est la version qui vous servira partout : sur le site, sur une carte de visite, sur une enseigne. Elle rejoindra les autres fichiers du site sur le serveur.
Un détail à connaître : comme un SVG est du texte, il peut aussi contenir du code. C’est pour cette raison que certains sites refusent qu’on leur envoie des SVG. Ce n’est pas un défaut du format, juste une précaution. Pour votre propre site, utilisez des SVG dont vous connaissez la provenance.