SVG vs PNG : images vectorielles vs matricielles expliquées en détail

SVG et PNG résolvent des problèmes différents. SVG décrit une géométrie vectorielle et peut aussi intégrer du raster ; PNG stocke une grille fixe de pixels. Le choix dépend de l’œuvre source, de la sécurité, de l’accessibilité, du parcours de retouche, du rendu et de la taille mesurée.

La différence fondamentale entre SVG et PNG

La distinction SVG-PNG correspond à celle entre graphismes vectoriels et raster.

SVG repose sur XML et décrit formes, chemins, texte, filtres, styles et ressources intégrées. Les parties vectorielles sont redessinées à la taille rendue, mais la netteté dépend de la géométrie, des traits, effets, alignements et éventuels rasters.

PNG stocke une grille fixe. L’agrandir exige un rééchantillonnage et peut produire du flou ou des pixels visibles. Livrer une source bien plus grande que son emplacement ajoute transfert et décodage, sauf si des candidats responsives permettent au navigateur de choisir.

Cette différence influence taille, mise à l’échelle, retouche et catégories d’images bien gérées par chaque format.

Quand utiliser SVG

SVG est un bon candidat pour une œuvre vectorielle examinée quand ses exigences de sécurité, accessibilité, rendu et intégration sont comprises :

• Logos — un SVG propre couvre de nombreuses tailles sans agrandir de raster. Une très petite marque peut nécessiter une simplification optique, des traits ajustés ou une variante.
• Icônes — interface, navigation et réseaux peuvent partager géométrie et style. SVG peut être plus léger que plusieurs résolutions raster, mais des chemins complexes ou des répétitions inline peuvent inverser le résultat.
• Illustrations et schémas — lignes nettes et aplats. Le texte SVG peut rester sélectionnable lorsqu’il est du texte, mais accessibilité et indexation exigent un balisage et une intégration corrects.
• Animations — les éléments SVG peuvent être animés par CSS, JavaScript ou SVG. Préférences de mouvement, coût CPU, CSP, accessibilité et interactions doivent être vérifiés.
• Favicons — les principaux navigateurs actuels utilisent SVG, mais un jeu complet peut encore demander raster ou ICO. Créez les sorties courantes avec le Générateur de favicon.

SVG est largement pris en charge par les navigateurs actuels et les outils de création. Sa popularité ne garantit pas qu’une ressource doive être vectorielle : comparez complexité, sûreté, cache, accessibilité et rendu.

Quand utiliser PNG

PNG est un bon candidat lorsque les pixels raster sans perte ou l’alpha comptent et que la taille obtenue respecte le budget :

• Photos avec transparence — PNG offre alpha et pixels sans perte, mais une photo détaillée peut être lourde. Comparez WebP/AVIF avec alpha ; sans transparence, testez JPEG et les formats photo modernes.
• Captures d’écran — PNG peut conserver les pixels encodés ; profils, métadonnées, redimensionnement et conversion de palette restent des sujets distincts.
• Œuvres complexes aux nombreuses couleurs — peintures, textures et illustrations photoréalistes impossibles à réduire en formes vectorielles propres.
• Graphismes raster avec texte — lorsque les contours doivent être reproduits pixel par pixel, PNG évite les défauts des formats avec perte.

Taille des fichiers et performances comparées

Pour les icônes, logos et illustrations simples, un SVG optimisé ou un raster peut être plus léger selon géométrie, dimensions, répétition, compression et cache :

Une compression textuelle telle que Brotli ou gzip peut réduire le transfert SVG, selon le balisage et le serveur. Comparez les octets transférés compressés, pas seulement le fichier sur disque.

SVG inline évite une requête, mais alourdit le HTML et ne se met pas en cache séparément. Un SVG externe peut profiter du cache. La géométrie vectorielle n’exige généralement pas de variantes de densité, tandis qu’un SVG complexe ou avec raster peut nécessiter une gestion responsive. Mesurez la page entière.

Pour les photos et textures détaillées, la vectorisation crée trop de géométrie ou supprime des détails. Intégrer le raster dans SVG ajoute un conteneur et souvent du base64 sans le transformer en vecteur. Utilisez PNG, JPEG, WebP ou AVIF.

SVG vs PNG : comparaison rapide

Exemple pratique : refonte d’un site d’entreprise

Imaginez un site d’entreprise avec un logo, 30 icônes de navigation et de fonctions, une photo principale et plusieurs captures produit. Attribuez les formats ainsi :

• Logo → SVG si une source vectorielle propre existe ; testez traits et lisibilité en petite taille.
• Jeu d’icônes → un sprite ou des composants SVG peuvent partager la géométrie. Validez accessibilité, cache, CSP et balisage transféré.
• Photo principale → testez JPEG, WebP et AVIF aux mêmes dimensions et à qualité visible comparable, avec les solutions de repli nécessaires. Voir le guide d’optimisation.
• Captures produit → commencez par PNG si les pixels doivent être préservés, puis comparez d’autres options sans perte et une éventuelle version avec perte.

Comment convertir entre SVG et PNG

Convertissez les fichiers pris en charge dans le navigateur sans installer de logiciel. Vizua traite le fichier dans le navigateur et ne l’envoie pas à notre serveur d’images ; des services de page peuvent encore utiliser le réseau :

• SVG en PNG — rasterisez un SVG pris en charge à une échelle disponible puis examinez le résultat
• Vectoriser l’image — tracez un raster en chemins approximatifs ; l’outil ne récupère pas la géométrie d’origine
• Générateur de favicon — créez des sorties courantes depuis une image prise en charge

Pour les dimensions et budgets d’octets propres à chaque page, consultez le guide des tailles de fichiers image.

Questions fréquentes