Si vous avez déjà essayé d'agrandir un logo pour le voir devenir flou et pixellisé, vous savez à quel point c'est frustrant. Le SVG existe précisément pour régler ce problème. C'est un format d'image qui fonctionne de façon radicalement différente du JPG et du PNG — et comprendre cette différence est essentiel pour choisir le bon format dans chaque situation.
Que signifie SVG ?
SVG signifie Scalable Vector Graphics — « graphiques vectoriels redimensionnables ». C'est un format d'image ouvert, normalisé par le W3C (le consortium qui définit aussi les spécifications du HTML et du CSS), et pris en charge nativement par tous les navigateurs modernes.
À la différence du JPG et du PNG, qui stockent l'image sous forme de grille de pixels colorés, le SVG décrit l'image en texte, à l'aide de coordonnées mathématiques représentant formes, lignes, courbes et couleurs. Un fichier SVG est en pratique un fichier texte — que l'on peut ouvrir et modifier dans n'importe quel éditeur de code.
Comment fonctionne le SVG en interne ?
Un fichier SVG est écrit en XML, un langage de balisage proche du HTML. Par exemple, un cercle rouge en SVG se décrit ainsi :
Le navigateur lit ces instructions mathématiques et affiche l'image directement à l'écran, en calculant les pixels en temps réel. C'est pourquoi un SVG peut s'afficher à n'importe quelle taille — d'un favicon de 16x16 pixels à un panneau publicitaire de 10 mètres — sans aucune perte de qualité.
Quels sont les avantages du SVG ?
- Redimensionnable sans perte de qualité : agrandissez ou réduisez à volonté — l'image reste nette à toute résolution, y compris sur les écrans Retina et 4K.
- Des fichiers légers : les logos et icônes simples en SVG sont généralement bien plus légers qu'en PNG, surtout en grandes tailles.
- Modifiable par le code : on peut changer couleurs, tailles et animations directement en CSS ou en JavaScript, sans passer par un logiciel de retouche.
- Indexable par les moteurs de recherche : comme le contenu est du texte, Google peut lire et indexer le texte contenu dans un SVG.
- Animations possibles : on peut créer des animations CSS et SMIL directement en SVG, sans dépendre de GIF ni de vidéos.
- Accessibilité : des titres et descriptions peuvent être ajoutés au SVG à l'intention des lecteurs d'écran.
Quelles sont les limites du SVG ?
- Inadapté aux photos : une photographie comporte des millions de variations de couleur et des dégradés complexes. Les représenter en vecteurs produirait des fichiers énormes et peu efficaces — le JPG reste toujours le bon choix pour les photos.
- Les images complexes deviennent lourdes : des illustrations très détaillées, avec beaucoup de formes et de dégradés, peuvent produire des SVG volumineux et lents à afficher.
- Une prise en main exigeante pour l'édition manuelle : modifier un SVG directement dans le code demande des notions de XML et de géométrie vectorielle. Des outils comme Illustrator ou Figma simplifient ce travail.
💡 Règle pratique : utilisez le SVG pour les logos, icônes, illustrations, graphiques, cartes et toute création devant s'afficher à plusieurs tailles. Utilisez le JPG ou le WebP pour les photographies et les images riches en détails et en dégradés complexes.
SVG, PNG ou JPG — lequel choisir ?
| Caractéristique | SVG | PNG | JPG |
|---|---|---|---|
| Type | Vectoriel | Matriciel (pixels) | Matriciel (pixels) |
| Redimensionnable sans perte | Oui | Non | Non |
| Transparence | Oui | Oui | Non |
| Idéal pour les photos | Non | Non | Oui |
| Idéal pour les logos et icônes | Oui | Oui | Non |
| Modifiable via CSS/JS | Oui | Non | Non |
| Pris en charge par les navigateurs | Oui | Oui | Oui |
Comment utiliser le SVG dans un site ou une application
Il existe trois façons principales d'intégrer un SVG dans une page web :
- Via une balise <img> : la méthode la plus simple. Le SVG est traité comme n'importe quelle image, mais ne peut pas être manipulé en CSS ni en JavaScript.
- En ligne dans le HTML : le code SVG est inséré directement dans le HTML de la page. Cela offre un contrôle total via CSS et JS — couleurs, animations et interactions. C'est l'approche privilégiée pour les icônes interactives.
- En arrière-plan CSS : avec
background-image: url('icone.svg'). Pratique pour les icônes décoratives, mais avec un accès limité depuis JavaScript.
Comment convertir des images en SVG ?
Convertir une photo ou un PNG en SVG est possible grâce à un procédé appelé vectorisation, qui transforme les pixels en formes géométriques. Le résultat est meilleur sur des images simples, à peu de couleurs et à contours bien définis — comme un logo sur fond blanc. Le convertisseur d'images d'ImageTools permet de convertir des fichiers entre les principaux formats, y compris du PNG et du JPG vers d'autres formats compatibles avec le web.
Convertissez vos images dès maintenant
Transformez vos fichiers entre les principaux formats d'image, rapidement et gratuitement, directement dans le navigateur.
Convertir une imageLe SVG est-il bon pour le SEO ?
Oui. Comme le SVG est un format à base de texte, Google peut explorer et indexer son contenu. De plus, les logos et icônes en SVG sont généralement plus légers qu'en PNG, ce qui accélère les pages — un facteur de classement direct chez Google depuis l'arrivée des Core Web Vitals.
Pour optimiser un SVG côté SEO, ajoutez les balises title et desc à l'intérieur du code SVG : elles font office de texte alternatif pour les lecteurs d'écran et les moteurs de recherche.