Quelle est la différence entre une icône SVG et une icône PNG ?

Une icône SVG est un fichier vectoriel basé sur du code XML : elle est redimensionnable à l'infini sans perte de qualité et pèse généralement 60 à 80 % moins lourd qu'un PNG équivalent. Le PNG est un format bitmap, figé à une résolution donnée, qui devient flou lorsqu'on l'agrandit. Le SVG est donc le choix idéal pour les icônes web modernes, surtout sur les écrans Retina.

Comment rendre une icône SVG accessible aux lecteurs d'écran ?

Pour rendre un SVG accessible, ajoutez un attribut role="img" sur la balise , puis insérez une balise avec une description courte et un attribut aria-labelledby pointant vers cet élément. Si l'icône est purement décorative, utilisez aria-hidden="true" pour que les lecteurs d'écran l'ignorent.

Icônes SVG : créer et utiliser l'iconographie web moderne

Pourquoi le format SVG s’impose pour l’iconographie web

Les icônes sont partout : menus de navigation, boutons d’action, fiches produits, réseaux sociaux. Pourtant, beaucoup de sites utilisent encore des PNG ou des icon fonts qui alourdissent les pages et nuisent à l’expérience utilisateur.

Le SVG (Scalable Vector Graphics) a changé la donne. Ce format vectoriel, basé sur du XML, offre des icônes parfaitement nettes sur n’importe quel écran — du smartphone au moniteur 4K — tout en pesant une fraction du poids d’un bitmap.

Quelques chiffres parlants :

Une icône SVG typique pèse entre 300 octets et 2 Ko, contre 5 à 15 Ko pour un PNG équivalent en haute résolution.
Un sprite SVG regroupant 50 icônes dépasse rarement 20 Ko, là où 50 fichiers PNG atteignent facilement 300 Ko.
Google recommande explicitement les formats vectoriels pour améliorer les Core Web Vitals, notamment le LCP.

Créer des icônes SVG : outils et bonnes pratiques

Les outils de création

Plusieurs logiciels permettent de dessiner ou d’exporter des icônes au format SVG :

Figma — collaboratif, gratuit pour les petits projets, export SVG natif.
Adobe Illustrator — référence du dessin vectoriel, export SVG très paramétrable.
Inkscape — open source et gratuit, parfait pour débuter.

Vous pouvez aussi partir de bibliothèques existantes comme Heroicons, Phosphor Icons ou Lucide, qui proposent des milliers d’icônes SVG libres de droits.

Les règles de conception

Pour obtenir des icônes légères et cohérentes :

Travaillez sur une grille fixe (24×24 px est le standard le plus répandu).
Simplifiez les tracés : fusionnez les formes, supprimez les points d’ancrage inutiles.
Évitez les effets bitmap (ombres portées, flous gaussiens) qui gonflent le fichier.
Utilisez currentColor comme valeur de fill pour que l’icône hérite de la couleur CSS du texte parent.

Optimiser ses fichiers SVG

Un SVG brut exporté depuis Illustrator contient souvent des métadonnées, des commentaires et des attributs superflus. L’outil SVGO (en ligne de commande ou via l’interface SVGOMG) permet de réduire la taille de 30 à 60 % sans altérer le rendu.

Exemple de commande :

npx svgo icon.svg -o icon.min.svg

Chez Lueur Externe, nous intégrons systématiquement cette étape dans nos pipelines de build pour garantir des performances optimales sur chaque projet.

Intégrer les icônes SVG dans votre site

SVG inline

Coller le code SVG directement dans le HTML permet de le styliser et animer via CSS :

<svg role="img" aria-labelledby="icon-cart" width="24" height="24" viewBox="0 0 24 24">
  <title id="icon-cart">Panier</title>
  <path fill="currentColor" d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 ..."/>
</svg>

C’est la méthode la plus flexible, idéale pour les icônes interactives.

Sprite SVG

Pour les sites comportant des dizaines d’icônes, le sprite SVG (un seul fichier contenant toutes les icônes référencées par <use>) réduit le nombre de requêtes HTTP :

<svg><use href="/sprites.svg#icon-cart"></use></svg>

Balise `<img>`

Si l’icône n’a pas besoin d’être stylisée dynamiquement, un simple <img src="icon.svg" alt="Panier" width="24" height="24"> suffit. Le navigateur met le fichier en cache comme n’importe quelle image.

Méthode	Stylisation CSS	Cache navigateur	Requêtes HTTP
SVG inline	✅ Totale	❌ Non	0
Sprite SVG	⚠️ Limitée	✅ Oui	1
Balise img	❌ Non	✅ Oui	1 par icône

Accessibilité : un détail qui change tout

Une icône sans texte alternatif est invisible pour les 800 millions d’utilisateurs en situation de handicap visuel dans le monde. Pensez à :

Ajouter role="img" et une balise <title> pour les icônes porteuses de sens.
Utiliser aria-hidden="true" pour les icônes purement décoratives.
Toujours proposer un label textuel à côté des boutons d’action critiques.

Conclusion : soignez vos icônes, soignez votre image

L’iconographie SVG est un levier souvent sous-estimé. Elle améliore simultanément la performance, l’accessibilité et la cohérence visuelle de votre site. Que vous conceviez une boutique Prestashop ou un site WordPress, des icônes SVG bien pensées font la différence.

Besoin d’un accompagnement pour créer un système d’icônes sur-mesure ou optimiser votre design web ? Lueur Externe, agence web experte depuis 2003 dans les Alpes-Maritimes, vous accompagne de la conception à l’intégration. Parlons de votre projet →