Comparatif18 avril 20265 min de lecture

SVG vs PNG – quand vectoriel, quand matriciel ?

SVG et PNG occupent souvent le même terrain : logos, icônes, graphismes. Pourtant ils fonctionnent radicalement différemment. SVG est vectoriel, PNG est matriciel – et cette différence décide de la netteté, de la taille et de la flexibilité.

Vectoriel vs matriciel – la différence de fond

PNG stocke des pixels : une grille de points colorés à résolution fixe. Agrandi, un PNG montre vite ses pixels ou des bords flous. SVG, lui, stocke des descriptions mathématiques – lignes, courbes, surfaces.

Conséquence : un SVG reste net à toute taille, du favicon au panneau publicitaire. Un PNG demande idéalement une version par résolution cible, ou au minimum une grande résolution d'origine.

Quand SVG est meilleur

Logos, icônes, illustrations simples, schémas : un SVG ne pèse souvent que quelques kilo-octets, s'agrandit librement et se colore ou s'anime via CSS. Navigateurs et outils de design le gèrent parfaitement.

Bonus : les SVG sont recherchables et accessibles aux lecteurs d'écran car ce sont des fichiers XML. Pour des icônes inline sur un site, c'est souvent la meilleure option de performance.

Où PNG reste imbattable

Dès qu'il s'agit de photos, de rendus photo-réalistes ou d'illustrations complexes avec des centaines de couleurs et de détails, un SVG devient énorme ou inadapté. Là, PNG tire son épingle du jeu.

Beaucoup de logiciels bureautiques, d'éditeurs anciens et de pièces jointes mail gèrent mieux PNG. Règle simple : géométrique → SVG, pixel → PNG (ou JPG/WebP).

Quand le SVG devient coûteux

Les SVG, c'est du XML — le navigateur le parse, le rend et parfois le re-rend à chaque tic d'animation. Des SVG complexes avec des centaines de tracés et de filtres peuvent consommer plus de CPU qu'un PNG équivalent.

Règle : sous ~5 Ko, le SVG reste léger. Au-delà de 50 Ko, vérifie si un PNG 2x ou un WebP n'irait pas plus vite. SVGO réduit encore les SVG de 30 à 60 % avant déploiement.