SVG vers PNG — quand vous avez vraiment besoin de pixels (et quand il ne faut pas)

Il y a une frustration bien particulière à posséder un logo parfait et nulle part où le mettre. Le SVG est net à n’importe quelle taille, ne pèse presque rien et s’affiche sans défaut dans le navigateur — et puis vous essayez de le glisser dans un e-mail, ou de le définir comme image d’aperçu sur les réseaux, ou de le coller dans un logiciel un peu trop vieux, et il ne s’affiche tout simplement pas. Case vide. Le fichier va bien. L’endroit où vous le mettez ne parle simplement pas le vectoriel.

C’est toute la raison d’être de la tâche SVG vers PNG. Non pas parce que le PNG est meilleur — il ne l’est généralement pas — mais parce qu’une grande partie du monde ne sait lire que des pixels.

Vectoriel et matriciel, en bref

Un SVG n’est pas une image. C’est un jeu d’instructions — dessine un cercle ici, ce tracé là, remplis-le de cette couleur. Le navigateur suit les instructions et les rend à neuf à la taille demandée, c’est donc d’une netteté de rasoir à 16 pixels comme à 16 000, et le fichier reste minuscule parce que ce ne sont que des maths.

Un PNG, c’est l’inverse. C’est une grille figée de pixels colorés, décidée une fois, à une seule résolution. Agrandissez-le au-delà de sa taille native et il devient mou et pixelisé, parce qu’il n’y a plus de pixels à dessiner — seulement ceux qui y sont incrustés. L’avantage, c’est que tout sait lire une grille de pixels. C’est la monnaie universelle des images.

Convertir un SVG en PNG revient donc à échanger une scalabilité infinie contre une compatibilité universelle. Que ce soit un bon échange dépend entièrement de la destination de l’image.

Quand vous avez vraiment besoin de PNG

Trois cas où je rastérise sans hésiter, parce que le vectoriel ne marchera tout simplement pas :

L’e-mail. Les clients de messagerie ne rendent pas le SVG — Gmail, Outlook, Apple Mail, en gros tous le refusent pour des raisons de sécurité. Un logo dans une signature d’e-mail ou une newsletter doit être dans un format matriciel. Du PNG, parce que vous voulez la transparence.

Les images d’aperçu pour les réseaux et l’Open Graph. La petite carte qui apparaît quand vous partagez un lien — l’image Open Graph — doit être un matriciel de taille fixe, typiquement 1200x630. Les plateformes n’y afficheront pas un SVG. Si votre visuel source est vectoriel, vous exportez un PNG à cette taille exacte.

Les logiciels anciens ou hors ligne. Quantité d’applications de bureau, d’outils de présentation, d’éditeurs de documents et de chaînes d’impression soit ne savent pas importer le SVG, soit en font n’importe quoi. Leur remettre un PNG à une résolution généreuse marche à tous les coups, sans surprise.

Dans les trois cas, le facteur décisif est le même : la destination ne peut physiquement pas lire le vectoriel, la scalabilité n’a donc aucune importance. Un format qui s’affiche l’emporte sur un format qui ne s’affiche pas, toujours.

La seule chose à réussir : la résolution

Voici l’erreur que je vois le plus, et que j’ai faite moi-même au début. Comme un PNG est figé à la taille où vous l’exportez, vous devez l’exporter assez grand — et idéalement à la taille exacte à laquelle vous l’afficherez.

Exportez un logo en PNG de 100x100 puis affichez-le à 300 pixels sur un écran haute densité, et il paraîtra mou et crénelé. Les pixels pour remplir cet espace n’existent pas. La solution est simple : exportez à la taille que vous utiliserez vraiment, ou plus grand, surtout pour les écrans Retina et 4K où vous voulez souvent le double de la taille nominale. C’est le seul vrai avantage que vous cédez en quittant le vectoriel, alors prenez un instant pour bien régler la résolution cible.

Quand il ne FAUT PAS rastériser

Si la destination sait lire le SVG, gardez le SVG. Point final.

Sur votre propre site, une icône ou un logo devrait rester vectoriel. Ce sera net sur chaque écran, à chaque niveau de zoom, ce sera plus léger que le PNG équivalent, et vous n’aurez jamais à réexporter une version plus grande à l’arrivée d’un nouvel écran encore plus dense. Rastériser là n’a que des inconvénients — vous jetteriez la meilleure qualité du format pour gagner une compatibilité que vous avez déjà.

Et ne rastérisez pas votre master. Le SVG est la source de vérité ; il peut générer un PNG de n’importe quelle taille, à tout moment. Un PNG ne peut pas faire le chemin inverse — vous ne pouvez pas récupérer des tracés vectoriels propres à partir d’une grille de pixels. Gardez donc le SVG, et traitez chaque PNG comme un export jetable pour un endroit précis. Même principe que pour tout le reste : convertissez la copie que vous livrez, gardez l’original que vous éditez.

Comment je m’y prends

Quand j’ai besoin de pixels tirés d’un vectoriel, j’utilise le convertisseur SVG vers PNG d’ici. Il rend le SVG dans votre navigateur et vous remet le PNG, rien n’est donc envoyé où que ce soit — tout se passe sur votre machine. Choisissez une taille adaptée à la destination, récupérez un PNG propre avec la transparence intacte.

Mais la vraie compétence, ce n’est pas la conversion. C’est la question que vous posez d’abord : cet endroit lit-il le vectoriel ? Si oui, laissez le SVG tranquille et profitez de l’option la plus nette et la plus légère qui soit. Si non — e-mail, carte OG, un vieux logiciel têtu — alors rastérisez, à la bonne taille, et gardez votre SVG à l’abri pour la prochaine fois. Réussissez ce choix et vous n’aurez plus jamais de case vide là où votre logo devrait être.