SVG vs PNG : quel format d'image utiliser ?

Réponse rapide

Choisissez SVG pour les logos, les icônes, les diagrammes, les dessins au trait et les illustrations réalisées à partir de formes distinctes. Choisissez PNG pour les captures d’écran, les illustrations texturées et les images avec des détails au niveau des pixels. Pour les photographies, JPEG, WebP ou AVIF seront généralement plus efficaces que l'un ou l'autre format.

La différence fondamentale

PNG est un format raster : il stocke une grille rectangulaire de pixels colorés. SVG est un format vectoriel : il décrit la géométrie avec des éléments XML tels que des chemins, des cercles, des rectangles, des remplissages et des traits.

Cette différence affecte la mise à l’échelle. L'agrandissement d'un PNG révèle finalement des pixels car le fichier a une résolution fixe. Un SVG est redessiné à partir d'instructions mathématiques à la taille demandée, donc un vecteur bien réalisé reste net sur un petit écran ou un grand panneau.

Quand SVG est le meilleur choix

SVG est généralement préférable lorsque l'illustration a des limites claires et un nombre de couleurs gérable. Les exemples typiques incluent les marques de marque, les icônes d’interface, les infographies, les diagrammes, les illustrations plates, les cartes, les graphiques et les chemins de découpe.

SVG peut également être stylisé ou animé dans un navigateur. Les remplissages et les traits individuels peuvent répondre au CSS, et un texte significatif peut rester consultable lorsqu'il est stocké sous forme de texte plutôt que de chemins tracés.

Un vecteur est plus facile à adapter. Un concepteur peut sélectionner une forme, modifier une couleur, ajuster une courbe ou supprimer un détail sans repeindre les pixels environnants.

Quand PNG est le meilleur choix

PNG est un choix judicieux pour un contenu raster sans perte et une transparence alpha complète. Utilisez-le pour les captures d'écran, le pixel art, les textures détaillées, les illustrations peintes et les exportations raster dont les pixels exacts doivent rester inchangés.

Essayer de décrire des milliers de transitions de couleurs photographiques sous forme de chemins vectoriels crée un SVG volumineux et difficile à modifier. Le résultat peut paraître postérisé tout en pesant plus que l'image originale.

Les performances Web ne sont pas seulement une question d'extension

Une simple icône peut être considérablement plus petite qu’un SVG optimisé. Une illustration complexe peut devenir plus grande qu'un PNG ou WebP équivalent si elle contient trop de chemins et de coordonnées.

Mesurez les vrais fichiers. Optimisez les métadonnées SVG et la précision numérique, puis testez le rendu. Pour PNG, exportez aux dimensions d'affichage réelles lorsque cela est possible et évitez d'expédier une source énorme simplement pour afficher une petite vignette.

Le SVG en ligne peut enregistrer une requête et activer le style CSS, mais il augmente également le document HTML. Les icônes réutilisées à l'échelle du site sont souvent mieux utilisées sous forme de fichiers externes pouvant être mis en cache ou dans le cadre d'un système d'icônes contrôlé.

Considérations relatives à l'accessibilité et à la sécurité

Une image informative a toujours besoin d’un nom accessible ou d’un texte adjacent, quel que soit le format. Les images décoratives doivent être ignorées par les technologies d’assistance.

SVG est un contenu XML actif et peut contenir des liens, des styles ou des scripts. N'acceptez que les fichiers SVG fiables ou nettoyez le balisage fourni par l'utilisateur avant de l'afficher en ligne. PNG n’est pas un balisage exécutable, ce qui simplifie son modèle de rendu.

Quel format doit utiliser un logo ?

Conservez un logo principal au format SVG lorsque des chemins vectoriels propres sont disponibles. Exportez des copies PNG pour les systèmes qui n'acceptent pas SVG, les signatures électroniques ou les emplacements raster spécifiques. Cela vous donne une source modifiable et des solutions de secours prévisibles.

Pour un logo raster uniquement, convertissez la version propre à la plus haute résolution, inspectez les compteurs de lettres et les courbes et vérifiez le résultat dans un éditeur vectoriel. Ne présumez pas que la modification d'un nom de fichier de .png en .svg crée des chemins vectoriels.

Liste de contrôle de décision

Utilisez SVG lorsque l'illustration se compose principalement de formes, doit s'adapter à plusieurs tailles, nécessite des chemins modifiables ou pilotera une machine de découpe. Utilisez PNG lorsque l'image repose sur des pixels, des textures, des captures d'écran exactes ou une transparence détaillée.

Convertissez un logo raster avec Image vers SVG ou créez un fichier de livraison raster avec Convertisseur SVG en PNG.