SVG ou PNG pour les icônes : lequel choisir ?

Les icônes sont presque toujours des formes simples en couleurs unies — exactement ce que les tracés vectoriels représentent efficacement. Une icône SVG reste nette qu'elle soit affichée à 16 px ou 160 px, et un seul fichier couvre toutes les tailles dont une mise en page responsive pourrait avoir besoin, au lieu d'exporter des PNG séparés pour chaque résolution.

Comme le remplissage et le contour d'un SVG ne sont que de simples attributs, vous pouvez recolorer une icône avec CSS pour correspondre à un état de survol ou au mode sombre, sans avoir besoin d'un second fichier image. Les couleurs d'une icône PNG sont figées dans ses pixels, donc une couleur différente signifie un fichier exporté complètement à part.

Si une « icône » est en réalité une petite image photographique ou très détaillée — comme une icône d'application réaliste avec dégradés, ombres et texture —, le PNG peut reproduire ce détail plus fidèlement qu'une vectorisation. Mais pour des icônes purement graphiques et en couleurs unies, le SVG reste presque toujours le meilleur choix. Si vous partez d'un ensemble d'icônes PNG existant, vous pouvez le convertir en SVG et garder les deux formats disponibles.