PNG vs SVG : quel format pour les logos, icônes et graphismes ?

PNG et SVG sont tous deux des formats populaires pour les logos et graphismes — mais ils fonctionnent très différemment. Choisir le mauvais donne soit un logo flou, soit un fichier qui ne peut pas s'ouvrir partout.

PNG vs SVG : la différence fondamentale

• PNG (Portable Network Graphics) est un format matriciel — il stocke une image comme une grille de pixels. Un PNG de 200×200 a exactement 40 000 pixels. Agrandissez-le et il devient flou.
• SVG (Scalable Vector Graphics) est un format vectoriel — il stocke des formes sous forme d'instructions mathématiques. Un logo SVG reste parfaitement net à n'importe quelle taille, du favicon (16×16) au panneau d'affichage.

Quand utiliser PNG

• Images complexes ou photographies : Le SVG n'est pas pratique pour les photos
• Compatibilité multiplateforme : Le PNG s'ouvre partout — navigateurs, traitements de texte, messagerie
• Quand vous avez besoin d'une taille de sortie fixe : Pour les publications sur les réseaux sociaux, l'impression à un DPI connu
• Captures d'écran et maquettes UI : Matriciels par nature

Quand utiliser SVG

• Logos et identité de marque : Les logos SVG restent nets à n'importe quelle taille
• Icônes : Les icônes UI en SVG s'adaptent parfaitement sur les écrans Retina/HiDPI
• Illustrations composées de formes : Graphiques, diagrammes, infographies
• Animations : SVG prend en charge les animations CSS et JavaScript
• Web design responsive : SVG s'adapte automatiquement à la fenêtre du navigateur

Comparaison PNG vs SVG

Utiliser les deux ensemble

• De nombreux flux de travail utilisent les deux formats :
• Conservez le SVG comme fichier logo maître pour l'édition et la mise à l'échelle
• Exportez des versions PNG aux dimensions spécifiques pour les réseaux sociaux, présentations et e-mails
• Utilisez un PNG 2× (ex. 400×400 pour un logo 200×200) pour les écrans Retina
• Si vous n'avez qu'un logo PNG, utilisez notre Redimensionneur d'images pour créer des versions haute résolution et PNG → WebP pour le web.