SVG vs PNG : Guide Complet pour Choisir le Bon Format

Pourquoi le choix du format d'image compte vraiment

SVG ou PNG ? Faites le mauvais choix et votre section hero charge un fichier raster de 2 Mo qui devient flou sur les écrans Retina. Ou vous passez des heures à convertir une photo en chemins vectoriels qui explosent à 14 Mo de XML.

SVG et PNG ne sont pas concurrents — ce sont des outils complémentaires pour des usages fondamentalement différents. Comprendre cette distinction est la chose la plus impactante que vous puissiez faire pour la performance, l'accessibilité et la qualité visuelle de votre site.

Comment fonctionne SVG en coulisses

SVG (Scalable Vector Graphics) est un langage de balisage XML. Au lieu de stocker les valeurs de couleur de chaque pixel, il stocke des instructions : « dessine un cercle en (50, 50) avec un rayon de 40 et remplis-le en bleu. » Le navigateur exécute ces instructions au moment du rendu, ce qui rend la sortie indépendante de la résolution par design.

<!-- Une icône SVG simple — 247 octets -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
  <path d="M35 50 L45 60 L65 40" stroke="#fff" stroke-width="6"
        fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Comme le SVG vit dans le DOM, vous pouvez le styler avec CSS, l'animer avec JavaScript et le rendre interactif — une puissance unique pour les visualisations et les interfaces dynamiques.

• Rendu mathématique — net du favicon de 16 px au panneau de 3 mètres.
• Le texte reste du texte — indexable par les moteurs de recherche, lisible par les lecteurs d'écran.
• Stylable et scriptable — changez les couleurs dynamiquement, ajoutez des effets hover, créez des animations.
• Compression excellente — gzip réduit le SVG de 60 à 80% car le XML est répétitif.

Comment fonctionne PNG en coulisses

PNG (Portable Network Graphics) est un format raster sans perte qui stocke la couleur exacte de chaque pixel. Affichez un PNG de 1000×1000 et le navigateur mappe ces millions de valeurs sur les pixels de l'écran. Si la zone d'affichage est plus grande, le navigateur interpole — c'est là que le flou apparaît.

PNG supporte une transparence alpha complète sur 8 bits (256 niveaux d'opacité par pixel) et utilise la compression DEFLATE pour réduire les fichiers sans perdre de données.

• Fidélité pixel-perfect — chaque valeur de couleur préservée exactement.
• Transparence alpha complète — bords lisses sur n'importe quel arrière-plan.
• Support universel — chaque navigateur, client mail et OS gère le PNG.
• Rendu prévisible — pas d'analyse complexe de chemins ; le navigateur affiche directement les pixels.

Tableau comparatif définitif

Caractéristique	SVG	PNG	Gagnant
Scalabilité	Infinie — net à toute résolution	Fixe — flou à l'agrandissement	SVG
Taille (simple)	Minuscule (souvent < 1 Ko pour les icônes)	Plus lourd (souvent 5-50 Ko)	SVG
Taille (complexe)	Énorme (millions de chemins)	Raisonnable avec compression	PNG
Transparence	Support complet via fill-opacity	Canal alpha 8 bits complet	Égalité
Animation	CSS, SMIL, JS, Lottie, GreenSock	Pas nativement (APNG nécessaire)	SVG
Accessibilité	Title/desc/aria-labels dans le markup	Attribut alt uniquement	SVG
Éditabilité	Ouvrir dans n'importe quel éditeur texte	Nécessite un éditeur d'image	SVG
Sécurité	Risque XSS avec SVG inline	Pas de risque d'exécution de script	PNG

Benchmarks de performance

Temps de chargement et rendu pour 24 icônes UI (affichage 64×64) :

Métrique	SVG Sprite	SVGs individuels	PNG Sprite	PNGs individuels
Taille totale	12 Ko	18 Ko (24 req.)	48 Ko	96 Ko (24 req.)
Transfert gzippé	4 Ko	6 Ko	44 Ko	88 Ko
Temps d'analyse	2,1 ms	3,8 ms	0,4 ms	0,6 ms
Premier affichage (3G)	120 ms	340 ms	180 ms	890 ms

Les SVG sprites gagnent en taille de transfert (gzip adore le XML), mais les PNG gagnent en temps d'analyse. Pour la plupart des sites, les gains de transfert l'emportent sur le coût d'analyse.

Matrice de cas d'utilisation

Quand SVG gagne

• Logos et marques — un fichier, toutes les tailles, pour toujours.
• Icônes et éléments UI — stylisez avec les custom properties CSS pour le theming.
• Visualisations de données — D3.js, Chart.js, Recharts produisent tous du SVG.
• Illustrations animées — Lottie, GreenSock ou CSS pur.
• Cartes et diagrammes — zoomables, interactifs, accessibles.

Quand PNG gagne

• Photographies — millions de couleurs uniques avec dégradés lisses.
• Captures d'écran — la précision au pixel compte.
• Textures complexes — les détails organiques ne se convertissent pas en vecteurs.
• Campagnes email — beaucoup de clients mail ne gèrent pas le SVG.

Règle de décision rapide : « Pourrais-je recréer ceci dans Figma avec les outils de formes uniquement ? » Si oui, utilisez SVG. Si vous devriez importer une photo, utilisez PNG. Besoin de convertir du raster en vecteur ? Le vectoriseur IA de VectoSolve le fait en quelques secondes.

Sécurité SVG : le vecteur XSS à connaître

Le SVG inline peut exécuter du JavaScript. Un fichier avec des balises <script> ou des attributs onload exécute du code arbitraire dans le navigateur de l'utilisateur. Ne rendez jamais du SVG uploadé par un utilisateur en inline sans sanitisation.

Patterns sécurisés :

• Servez les SVG utilisateurs via des balises <img> (scripts bloqués dans le contexte img).
• Utilisez DOMPurify avant d'injecter du SVG dans le DOM.
• Définissez un en-tête Content-Security-Policy strict interdisant les scripts inline.

Bonnes pratiques modernes

1. SVG Sprites pour les systèmes d'icônes

Regroupez les icônes dans un sprite et référencez avec <use> :

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

Une requête, des icônes illimitées, entièrement stylables.

2. Optimisez sans relâche

• SVG : Passez par l'optimiseur de VectoSolve ou SVGO pour supprimer les métadonnées et fusionner les chemins.
• PNG : Utilisez pngquant ou oxipng pour la compression lossy/lossless.

3. Convertir du raster en vecteur quand c'est pertinent

Vous avez un logo PNG qui devrait être en SVG ? VectoSolve utilise l'IA pour tracer les images raster en chemins vectoriels propres — souvent 90% plus petit.

Conclusion : il n'y a pas de « meilleur » format

SVG et PNG existent parce que les images viennent en deux catégories : construites (formes, texte, géométrie) et capturées (photos, scans, captures d'écran). Associez le format au contenu, optimisez agressivement, et vous livrerez des pages rapides, nettes et accessibles sur tous les appareils.

Attribut	SVG	PNG
Type	Vecteur (mathématique)	Raster (pixels)
Scalabilité	Infinie — aucune perte de qualité	Fixe — flou à l'agrandissement
Idéal pour	Logos, icônes, éléments UI	Photos, captures d'écran, images complexes
Taille typique (icône)	1–5 Ko	10–50 Ko
Support animation	Animations CSS + JS	APNG uniquement (support limité)