Différences principales : bitmaps raster et chemins vectoriels
Lors de la conception d'interfaces utilisateur, de barres de navigation et de sites Web marketing, le choix entre PNG et SVG détermine la netteté de vos graphiques sur divers appareils et la rapidité d'affichage de vos pages.
- PNG (Portable Network Graphics) : Format raster construit à partir d'une grille bidimensionnelle de pixels. Chaque pixel stocke des informations exactes sur la couleur et la transparence (canal alpha).
- SVG (Scalable Vector Graphics) : Format vectoriel basé sur XML qui décrit des lignes, des courbes, des polygones et les remplit mathématiquement à l'aide de coordonnées.
Écran Retina et mise à l'échelle infinie
À mesure que les écrans mobiles 4K, 5K et haute résolution deviennent omniprésents, le comportement de mise à l'échelle est essentiel :
- Bitmaps PNG : Lorsqu'une icône PNG de 24 x 24 pixels est agrandie à 96 x 96 pixels ou affichée sur un écran Retina 3x, le navigateur doit interpoler les pixels intermédiaires, provoquant ainsi un flou visible. bords.
- Vecteurs SVG : Les SVG recalculent les points vectoriels à la volée, quelle que soit la largeur de la fenêtre d'affichage ou la densité de pixels, restant 100 % nets, quel que soit le niveau de zoom.
Pour convertir des graphiques raster existants ou redimensionner des images sans dégradation des pixels, utilisez le Redimensionneur d'Image (Image Resizer) et le Convertisseur PNG en JPG.
Taille du fichier, charge utile du réseau et empreinte DOM
| Metrique | Icône SVG | PNG Icône |
|---|---|---|
| Taille moyenne du fichier | 0,8 Ko – 2,5 Ko | 3 Ko – 15 Ko |
| Compression Gzip/Brotli | Hautement compressible (text/XML) | Modérément compressible |
| Remplacement de couleur CSS | Instantané via fill : currentColor | Nécessite un piratage de filtre ou un échange de fichiers |
| Capacité d'animation | Transitions CSS/SVG natives | Statique uniquement (sauf APNG) |
Matrice de décision : Quand choisir SVG ou PNG
- Utilisez SVG pour : Logos de marque, icônes de la barre de navigation, badges d'état de l'interface utilisateur, illustrations géométriques et bascules interactives.
- Utilisez PNG pour : Captures d'écran complexes avec ombres portées semi-transparentes, photoréalistes des badges avec des centaines de dégradés de couleurs et des environnements existants qui ne prennent pas en charge les vecteurs modernes.
Visitez la suite d'Image Tools de ToolDolfen pour compresser, convertir et recadrer vos éléments avec la vitesse côté client.
Guides complémentaires recommandés
Explorez les didacticiels et utilitaires complémentaires de ce groupe de sujets pour améliorer votre flux de travail numérique :