Qu’est-ce que le SVG ? Quand choisir SVG ou PNG ?

Qu’est-ce qu’un fichier SVG ?

SVG signifie Scalable Vector Graphics, c’est-à-dire un format de dessin vectoriel redimensionnable. Plutôt que de stocker uniquement une grille de pixels colorés, il peut décrire des formes, des tracés, des remplissages et du texte. Un navigateur ou un logiciel de dessin utilise ces instructions pour dessiner l’image à la taille demandée. Vous n’avez pas besoin de programmer pour en créer une : un logiciel de création vectorielle peut exporter un SVG.

Prenez l’exemple d’un logo circulaire. Le SVG peut décrire le cercle et sa couleur ; le PNG enregistre les pixels qui forment ce cercle à une taille précise. Le SVG peut dessiner un cercle plus grand en conservant un contour lisse. Agrandir le PNG répartit ses pixels existants sur une plus grande surface, ce qui peut rendre le contour moins net. La présentation du SVG sur MDN explique le fonctionnement du format.

SVG et PNG : les différences en pratique

Aucun des deux formats n’est toujours plus léger. Un SVG détaillé contenant des milliers de tracés peut peser davantage qu’un PNG adapté. Comparez les fichiers réels et vérifiez que leur destination les accepte. Pour les photos, envisagez plutôt le JPG, le WebP ou l’AVIF : le SVG n’est pas un format de compression photographique.

Quand le SVG est un bon choix

Un logo utilisé dans l’en-tête d’un site, dans une présentation et sur une grande bannière gagne à disposer d’un original vectoriel. Le SVG convient aussi aux icônes et aux diagrammes simples qui doivent fonctionner à plusieurs tailles. Vérifiez tout de même la plus petite version : un rendu net ne rend pas un texte minuscule lisible et n’empêche pas les traits fins de devenir difficiles à distinguer.

Un SVG peut contenir une image en pixels classique, comme un PNG ou un JPG. Celle-ci conserve sa résolution d’origine. Intégrer une petite photo à un SVG ne restitue pas les détails manquants et ne la transforme pas en formes vectorielles. Renommer un fichier .png en .svg ne change pas non plus son format.

Comprendre les dimensions, le viewBox et l’espace vide

La largeur et la hauteur indiquent les dimensions de l’image. Le viewBox définit la zone de coordonnées dans laquelle le dessin est placé. Il permet d’adapter le dessin à son espace d’affichage ; ce n’est pas un réglage du poids du fichier. La référence MDN sur viewBox explique cette relation.

Si votre logo semble petit au milieu d’une grande zone vide, vérifiez les limites du plan de travail ou de la page dans votre logiciel de création. Exporter toute la page peut inclure de l’espace inutilisé autour du dessin. Ajustez la page au contenu si nécessaire, en gardant de la place pour les contours et les ombres. Augmenter simplement la largeur d’affichage agrandit aussi cet espace vide.

Utiliser un SVG sur un site web

Un logo de site classique peut être inséré sous forme de fichier image SVG. Donnez aux images porteuses d’information un texte alternatif descriptif et réservez la largeur et la hauteur correctes dans la mise en page. Les images décoratives doivent avoir un texte alternatif vide. Vous trouverez des exemples dans le guide sur les textes alternatifs.

Le fait qu’un navigateur affiche le SVG ne signifie pas que tous les CMS ou formulaires d’importation l’acceptent. Vérifiez les règles de votre plateforme avant de choisir l’exportation finale. Un SVG utilisé comme image se comporte aussi différemment d’un SVG intégré directement au code de la page : dans un contexte d’image, les scripts et le chargement de ressources externes sont restreints. Le guide MDN sur le SVG comme image explique ces restrictions. Utilisez des dessins provenant de sources fiables et la méthode de publication prise en charge par votre plateforme.

Préparer un SVG facile à partager

• Exportez la zone correspondant au dessin voulu, pas une page inutilement grande.
• Intégrez les images liées et les styles nécessaires au fichier pour éviter de dépendre de fichiers séparés.
• Si le texte doit être parfaitement identique sur un autre appareil, convertissez-le en tracés dans votre logiciel de création. Gardez un original modifiable : le texte converti en tracés ne peut plus être modifié comme du texte ordinaire.
• Supprimez les objets inutilisés et les données superflues du logiciel dans une copie. Vérifiez le résultat avant de remplacer l’original.
• Ouvrez le SVG exporté dans l’application ou sur le site prévu et inspectez les contours, le texte, le fond et les éventuels éléments manquants.

Convertir le texte en tracés peut augmenter leur nombre et le poids du fichier. Simplifier excessivement les tracés peut modifier le dessin. Évaluez l’optimisation en comparant le résultat réel, plutôt qu’en supprimant des données sans vérification. L’outil SVG vers PNG de Pixilo crée une image en pixels ; il n’optimise pas le SVG et ne produit pas de fichier SVG plus léger.

Quand créer une copie PNG

Créez un PNG si le service destinataire l’exige, si vous avez besoin d’une copie statique comparable à une capture d’écran ou de dimensions précises en pixels. Exportez le SVG d’origine à la taille demandée. Le PNG ne conserve ni les tracés vectoriels ni les interactions, et l’agrandir par la suite peut le rendre flou. Gardez le SVG pour vos prochaines exportations.

Avec SVG vers PNG, vous pouvez choisir les dimensions en pixels et conserver les zones transparentes ou ajouter un fond uni. La page de l’outil explique les limites de taille, les polices et les contenus non pris en charge. L’option de fond transparent préserve la transparence existante ; elle ne supprime pas une forme de fond dessinée dans le SVG.

Avant de publier ou d’envoyer l’image

1. Vérifiez les formats acceptés par le support de destination.
2. Conservez le SVG si les formes vectorielles et la souplesse de redimensionnement sont utiles ; créez un PNG si la destination exige une image en pixels.
3. Contrôlez les limites du dessin, les polices et les images intégrées.
4. Examinez le fichier final à sa taille d’affichage prévue, sur le fond où il sera utilisé.
5. Comparez le poids des fichiers si la vitesse de chargement compte et gardez votre original modifiable.