SVG vs PNG pour les graphiques Web : quand utiliser chaque format

SVG et PNG ont des objectifs fondamentalement différents, mais ils se chevauchent suffisamment pour prêter à confusion. On stocke des formes mathématiques. L'autre stocke les pixels. Choisir le mauvais vous coûte soit en qualité, soit en performances – parfois les deux.

SVG (Scalable Vector Graphics) est un format vectoriel basé sur XML. Au lieu de stocker des données de pixels, il décrit des formes, des chemins et du texte à l'aide de coordonnées mathématiques. Un fichier SVG est essentiellement du code : vous pouvez l'ouvrir dans un éditeur de texte et lire les instructions qui indiquent au navigateur comment dessiner l'image.

Les SVG peuvent être stylisés avec CSS et manipulés avec JavaScript. Vous pouvez modifier les couleurs au survol, animer des éléments individuels et rendre les SVG réactifs en ajustant les attributs viewBox. Pour les graphiques simples tels que les logos et les icônes, les fichiers SVG pèsent généralement entre 1 et 5 Ko.

PNG (Portable Network Graphics) est un format raster qui stocke les images sous forme de grille de pixels colorés. Il utilise une compression sans perte, la qualité est donc identique à l'original — pas d'artefacts de compression comme JPEG. PNG prend en charge la transparence totale (canal alpha), ce qui en fait un favori pour les images nécessitant un arrière-plan transparent.

PNG excelle dans la reproduction d’images complexes : captures d’écran, photographies avec transparence, textures détaillées et dégradés fluides. Cependant, comme il stocke chaque pixel, les fichiers PNG peuvent être volumineux. Une capture d’écran 4K au format PNG peut facilement dépasser 5 Mo.

Pour un logo d'entreprise typique, la version SVG peut peser entre 2 et 5 Ko. Le même logo exporté au format PNG à une résolution 2x pour les écrans Retina pourrait facilement faire 30 à 80 Ko. Cela représente une différence de 10 à 15 fois.

Multipliez cela sur toutes les icônes, logos et éléments d’interface utilisateur d’une page, et SVG offre une charge utile considérablement plus légère. Après des tests sur un site de commerce électronique comportant plus de 60 icônes, le passage du PNG au SVG a réduit de 87 % la bande passante liée aux icônes.

Mais cet avantage s’applique aux graphiques complexes. Une illustration SVG avec des milliers de points d’ancrage et des chemins détaillés peut en réalité dépasser la taille d’un fichier PNG bien compressé. Si votre concepteur a créé une illustration comportant des centaines d'éléments individuels, vérifiez les deux formats et comparez-les.

C’est l’avantage déterminant du SVG. Un SVG semble parfait au pixel près, qu'il soit affiché à 32 pixels ou à 3 200 pixels de large. Il n'y a pas de concept de résolution : le navigateur redessine les chemins vectoriels quelle que soit la taille nécessaire.

Cela est important sur les écrans allant des moniteurs de bureau de 72 DPI aux téléphones de plus de 460 DPI. Un fichier SVG couvre chaque appareil. Un PNG ne le fait pas.

PNG a une grille de pixels fixe. Affichez un PNG 200 x 200 à 400 x 400 pixels (ce qui se produit sur les écrans Retina) et le navigateur interpole, ce qui rend l'image douce ou floue. La solution de contournement consiste à exporter des fichiers PNG à une résolution de 2x ou 3x, mais cela augmente proportionnellement la taille du fichier : un jeu d'icônes 3x peut être 9 fois plus grand.

PNG est le bon choix chaque fois que l’image est photographique ou photographiquement complexe. Captures d'écran, photos de produits avec transparence, textures complexes, images avec des milliers de couleurs et des dégradés subtils, tout cela appartient aux formats raster.

Le PNG gagne également pour le pixel-art et les images où chaque pixel compte à une taille spécifique. Les sprites de jeu, les détails des favicon en 16x16 et les images où le comportement d'anticrénelage nécessite un contrôle précis sont tous mieux servis en format PNG.

SVG est clairement le gagnant pour les logos, les icônes, les illustrations, les infographies, les cartes, les graphiques et les éléments d'interface utilisateur, tout ce qui est composé de formes, de lignes et de couleurs unies épurées. Si le graphique a été créé dans Figma ou Illustrator, l'exportation au format SVG préserve parfaitement la qualité source.

SVG excelle également pour le design réactif. Vous pouvez créer une illustration SVG qui redistribue ou masque les éléments à différents points d'arrêt à l'aide de requêtes multimédias CSS à l'intérieur du SVG lui-même. Les icônes en SVG peuvent changer de couleur en fonction du thème (mode sombre/mode clair) sans servir de fichiers image séparés.

Les SVG peuvent contenir de véritables éléments de texte que les moteurs de recherche peuvent indexer. Si votre infographie contient des titres et des étiquettes sous forme de texte SVG, Google peut les lire. Il s'agit d'un avantage SEO significatif par rapport au PNG, où tout le texte est intégré dans la grille de pixels et invisible pour les robots.

Pour les lecteurs d'écran, inline SVGs avec le bon role et aria-label les attributs offrent une meilleure accessibilité que les images raster. Les images PNG dépendent entièrement du alt attribut pour l’accessibilité.

Besoin de basculer entre les formats ? Vous pouvez convertir SVG en PNG lorsque vous avez besoin d'une version raster pour le partage sur les réseaux sociaux, de clients de messagerie qui ne restituent pas le SVG ou de plates-formes qui n'acceptent que les images raster.

Dans l'autre sens, vous pouvez convertir PNG en SVG pour les images qui bénéficieraient de l’évolutivité vectorielle. La conversion fonctionne mieux sur des graphiques simples avec des bords nets et des couleurs limitées. Les photographies détaillées ne seront pas bien converties en SVG.

Pour des changements de format rapides sans installer de logiciel, iformat.io gère les deux conversions directement dans votre navigateur. Téléchargez, convertissez et téléchargez en moins de 10 secondes.

Utilisez SVG pour les logos, les icônes, les illustrations et tout ce qui a des formes épurées : il s'adapte parfaitement et conserve les fichiers petits (1 à 5 Ko typiques). Utilisez PNG pour les captures d’écran, les photos avec transparence et les illustrations au pixel près. Pour la plupart des projets Web, la conversion de votre jeu d'icônes de PNG en SVG réduira le poids de la page et améliorera le rendu sur les écrans à haute résolution. Testez les deux formats en cas de doute : la comparaison de la taille du fichier prend 30 secondes et le bon choix est généralement évident.