Convertir un SVG en PNG

Qu’est-ce qu’un convertisseur SVG vers PNG ?

Un SVG est un dessin décrit sous forme d’instructions : lignes, courbes, remplissages et texte, sans le moindre pixel dans le fichier. Un PNG est une grille de pixels. Convertir consiste à choisir une taille et à demander à un moteur de tracer ces instructions à cette taille, ce qui explique qu’un même SVG produise une favicone nette de 32 pixels et une bannière nette de 4096 à partir d’un seul fichier.

Cela signifie aussi que la taille est une décision, et non une propriété que l’on lirait dans le fichier. Certains SVG déclarent une taille, beaucoup n’en déclarent pas, et ce qui se passe dans le second cas fait toute la différence entre un convertisseur qui fonctionne et un autre qui déçoit sans rien dire. Cet outil vous montre dans quel cas vous êtes avant de convertir.

Tout se passe dans votre navigateur. Le fichier est lu localement, le dessin est rastérisé par le moteur même qui affiche les SVG sur n’importe quelle page web, et le PNG est produit par un canvas. Rien n’est envoyé : il n’y a donc ni limite de taille imposée par un téléversement, ni copie de votre travail sur le serveur de qui que ce soit.

Comment l’utiliser

1. Choisissez un fichier SVG. Il est lu dans votre navigateur plutôt qu’expédié quelque part. Le panneau situé en dessous indique aussitôt la taille que le fichier réclame, et précise quelle règle a produit ce chiffre, car un SVG peut déclarer une taille, ne suggérer qu’une forme, ou ne rien dire du tout.
2. Fixez la taille que vous voulez réellement. Saisissez une largeur ou une hauteur, ou servez-vous des boutons d’échelle pour deux, quatre ou huit fois la taille du fichier. Les proportions sont conservées sauf si vous le désactivez. Comme la taille cible est inscrite dans le dessin avant la rastérisation, un export à huit fois offre huit fois le détail, et non une petite image agrandie.
3. Lisez ce qui ne survivra pas, puis téléchargez. Le panneau énumère tout ce que le fichier contient et qu’un navigateur refuse de charger lorsqu’un SVG sert d’image, ainsi que les polices que le fichier s’attend à trouver sur votre machine. Si cette liste est vide, le PNG correspondra à ce que vous voyez dans votre éditeur vectoriel.

Pourquoi tant de convertisseurs rendent un carré de 150 pixels

C’est le reproche le plus répandu à propos de la conversion des SVG, et ce n’est pas un défaut des convertisseurs. La spécification SVG distingue deux notions qui se ressemblent. Le rapport d’aspect intrinsèque, c’est la forme du dessin, et un viewBox vous la donne. La taille intrinsèque, c’est une vraie mesure en pixels, et seuls des attributs width et height absolus la fournissent.

Ainsi, un fichier qui commence par un viewBox de 0 0 1024 1024 sans width ni height possède une forme connue et aucune taille connue. Sommé de le tracer sans autre indication, le navigateur se rabat sur la taille d’objet par défaut que CSS définit pour le contenu remplacé, soit 300 sur 150 pixels, et y insère la forme. Un dessin carré sort en 150 sur 150. Une bannière au format quatre pour un sort en 300 sur 75. L’original n’a jamais mesuré 150 pixels de quoi que ce soit, et son auteur avait très probablement 1024 en tête, mais rien dans le fichier ne le disait.

Ce sont les jeux d’icônes qui en souffrent le plus, car y retirer width et height est une convention délibérée : elle permet à l’icône de tenir sa taille du CSS partout où on l’emploie. Parfaitement judicieux pour une page web, parfaitement inadapté à un convertisseur qui n’a aucun CSS à consulter. L’outil nomme la règle appliquée à votre fichier : une petite taille devient ainsi une décision, et non une découverte après coup.

Une conséquence utile à connaître : poser un width et un height sur un SVG dépourvu de viewBox recadre le dessin au lieu de le mettre à l’échelle, faute de système de coordonnées à projeter sur la nouvelle boîte. Lorsque votre fichier est dans cet état, cet outil ajoute un viewBox déduit de la taille à laquelle il était déjà tracé, de sorte qu’un agrandissement mette le dessin à l’échelle comme on s’y attend.

Ce qu’un PNG ne peut pas emporter avec lui

Lorsqu’un SVG est chargé par un élément image, la spécification le place dans un mode de traitement restreint. Les scripts ne s’exécutent pas et les références externes ne sont pas résolues, et cela vaut dans tous les navigateurs parce que la norme l’exige, non parce qu’un éditeur l’aurait décidé. La raison est simple : une image ne devrait pas pouvoir lancer des requêtes réseau ni exécuter du code du seul fait d’être affichée.

En pratique, plusieurs choses disparaissent donc sans prévenir. Un élément image à l’intérieur du SVG pointant vers une photographie ailleurs ne rend rien. Une feuille de styles appelée par une règle import n’arrive jamais, si bien que tout ce qu’elle habillait retombe sur ses valeurs par défaut. Une police web déclarée avec une source distante n’est pas récupérée. Une forme réutilisée depuis un autre fichier SVG n’apparaît pas. Rien de tout cela ne déclenche la moindre erreur, et c’est pourquoi l’outil les recherche avant conversion et énumère ce qu’il trouve.

Les polices méritent un avertissement à part, car elles échouent autrement. Une police nommée dans le fichier mais chargée de nulle part est cherchée sur la machine qui effectue le rendu, c’est-à-dire la vôtre. Si vous l’avez, le texte est parfait. Sinon, le navigateur en substitue une autre, la largeur des lettres change, les retours à la ligne se déplacent et la mise en page bouge. Convertir le texte en tracés dans votre éditeur vectoriel avant l’export supprime entièrement la question, au prix d’un texte qui n’en est plus un.

Deux limites plus modestes. Le contenu d’un élément foreignObject est du HTML et non du SVG, et il ne s’affiche pas dans ce mode. Et le PNG possède une couche alpha : les zones transparentes le restent au lieu de devenir blanches, ce qui est généralement souhaitable mais mérite d’être su si vous posez le résultat sur un fond sombre.

Pourquoi est-ce gratuit ?

Parce que c’est votre ordinateur qui travaille. Le fichier ne quitte pas la page : il est lu localement, rastérisé par le moteur de rendu de votre propre navigateur et encodé en PNG par un canvas. Pas de téléversement, pas de file d’attente, aucun serveur qui paie de la bande passante, et aucune copie de votre travail ailleurs que sur votre machine.

Il n’y a donc ni compte, ni inscription, ni filigrane, ni plafond de taille au-delà de ce que votre navigateur peut garder en mémoire. Le moteur qui lit les dimensions du fichier et repère ce qu’il va perdre se trouve dans le dépôt, à côté de la page, avec 122 vérifications qui l’attestent face aux spécifications SVG et CSS.