Convertisseur SVG en PNG

Ce qu’est un SVG, et pourquoi la conversion en pixels ne va que dans un sens

Un SVG n’est pas une image. C’est la description d’une image — une liste de formes, de tracés, de couleurs et de texte, chacun avec ses coordonnées, écrite dans un fichier texte que quelque chose d’autre lit et dessine. Un JPG ou un PNG, c’est l’inverse : une grille de pixels, arrêtée une fois pour toutes au moment où le fichier a été écrit. Cette seule différence est derrière tout ce qui se trouve sur cette page, y compris la question que ce convertisseur est obligé de vous poser et que les deux autres ne posent jamais.

• C’est du texte que l’on peut lire. Ouvrez un SVG dans n’importe quel éditeur de texte et les formes sont écrites sous vos yeux, ce qui est aussi le moyen de vérifier vous-même quelle taille le fichier annonce et vers quoi il renvoie.
• Il n’a aucune résolution. Le même fichier est une icône nette à la taille d’un point final et une affiche nette sur un mur, parce que le dessin est recalculé à chaque fois par ce qui l’affiche au lieu d’être stocké quelque part.
• Ce qu’il fait bien, c’est le dessin à plat — logos, icônes, schémas, graphiques, cartes, tout ce qui est dessiné plutôt que photographié. Ce qu’il fait très mal, c’est une photographie, qui n’a aucune forme à décrire et demanderait une ligne de fichier par pixel.
• Le convertir en pixels est ce que fait cette page, et la raison en est presque toujours un endroit qui refuse le format : un formulaire d’envoi, un éditeur d’images ancien, un modèle de document ou de diapositive, un aperçu sur un réseau social, un courriel, un service d’impression.

Le transformer en PNG fige le dessin en pixels à une taille choisie, et c’est une porte qui ne s’ouvre que dans un sens. Les formes ne sont pas conservées dans le résultat et aucun réglage ici ne les garde : agrandir le PNG ensuite agrandit ses pixels au lieu de redessiner quoi que ce soit, et cette page n’écrit aucun format vectoriel — retransformer une image en formes est un autre problème, avec d’autres réponses, et non l’inverse de celui-ci. Gardez donc le SVG. Ce que vous téléchargez ici est une copie faite pour un usage et une taille, et le moyen d’obtenir une seconde taille est de reconvertir l’original plutôt que de redimensionner ce que vous avez déjà.

D’où vient la taille inscrite dans les champs

Comme un vecteur n’a pas de pixels à lui, il faut bien que quelque chose décide combien il en aura, et cette page commence par lire ce que le fichier lui-même laisse entendre. Ce nombre va dans les champs de largeur et de hauteur, et une phrase à côté nomme le fichier et dit duquel de trois endroits exactement il a été tiré. Elle mérite d’être lue avant de convertir, car les trois ne se valent pas et vous seul savez lequel vous vouliez.

• Le fichier indique sa propre taille, en pixels. C’est le plus solide des trois : quelqu’un qui a exporté le dessin a dit quelle taille il devait avoir, et les champs se contentent de la répéter.
• Le fichier donne sa taille en unités physiques — pouces, centimètres, millimètres, points ou picas — et elle a été convertie à raison de quatre-vingt-seize pixels par pouce, ce que le web entend par un pouce et non une mesure de votre écran. Un dessin préparé pour l’impression arrive souvent ainsi, et la taille en pixels qui en sort est la conversion fidèle d’un nombre qui ne parlait pas de pixels du tout.
• Le fichier n’indique aucune taille utilisable, la taille a donc été mesurée sur son viewBox. C’est le cas qu’il faut regarder à deux fois : un viewBox est le système de coordonnées dans lequel les formes sont dessinées et non une taille que quelqu’un aurait choisie, si bien qu’une icône dont les coordonnées vont de zéro à vingt-quatre demande à devenir une image de la taille d’un point final. Les jeux d’icônes sont aussi couramment écrits avec une largeur et une hauteur en pour cent, ce qui est la taille de quelque chose que ce fichier n’a pas et se lit donc comme aucune taille : ceux-là atterrissent ici également.

Quel que soit celui des trois qui a répondu, le nombre est arrondi une seule fois à des pixels entiers, à l’instant où il est lu, parce qu’un canevas s’alloue en pixels entiers et qu’il n’y a nulle part où mettre une fraction. Cela compte pour une chose en particulier : tout le reste travaille à partir du nombre arrondi que vous voyez et non de la fraction qui est derrière, si bien que le double d’un dessin affiché à trente et un pixels de large fait soixante-deux et non les soixante-trois qu’un second arrondi produirait. La taille à l’écran et la taille dont se sert le calcul sont la même taille, seule disposition dans laquelle les champs veulent dire ce qu’ils disent.

Choisir la taille qu’il vous faut — et le dessin qui n’en indique aucune

La taille que le fichier laisse entendre n’est jamais qu’un point de départ, et elle est proposée comme tel plutôt qu’imposée. Tout, dans les deux champs, est disposé pour que le cas ordinaire ne demande aucune réflexion et que le cas exact reste possible, et c’est là toute la différence entre cette page et ses deux sœurs — une photographie se convertit à la taille qu’elle a déjà, et il n’y a rien à décider.

• Tapez une largeur et la hauteur suit, tapez une hauteur et la largeur suit : le dessin garde ainsi ses proportions sans que vous ayez à calculer quoi que ce soit. C’est le comportement par défaut parce que déformer un logo par accident est justement l’erreur qu’il vaut la peine de rendre impossible.
• Décochez la conservation des proportions quand il vous faut vraiment un cadre exact — un emplacement de bannière, une photo de profil de taille fixe, une planche d’icônes — et les deux champs deviennent indépendants. Le dessin est alors étiré pour remplir ce que vous avez demandé, ce qui est bien ce que vous vouliez et aussi la raison pour laquelle c’est un geste délibéré et non le réglage par défaut.
• La rangée de multiplicateurs est le chemin rapide vers les tailles que les gens veulent vraiment, et chacun d’eux se mesure à la taille que le fichier indique et non à ce qui se trouve dans les champs à cet instant. Appuyer deux fois sur le même multiplicateur vous donne donc deux fois la même réponse, au lieu de s’accumuler jusqu’à quelque chose que vous n’aviez pas demandé.
• Un multiplicateur sans réponse est présenté comme indisponible plutôt que comme un bouton qui ne fait rien. Multiplier un dessin déjà énorme peut atteindre une taille qu’aucun format d’image ne sait exprimer, et une commande qui refuserait en silence serait pire qu’une commande qui vous montre qu’elle ne peut pas.

Reste le fichier qui n’indique rien : aucune largeur ni hauteur que cet outil sache lire, et aucun viewBox à mesurer non plus. C’est plus fréquent qu’il n’y paraît — un dessin sorti tel quel de certains éditeurs, ou écrit à la main pour une page qui allait lui donner sa taille en CSS. Il n’y a réellement aucune taille dedans : les champs s’ouvrent donc vides, aucune phrase n’apparaît sur la provenance d’un nombre, il n’y a rien à multiplier ni de proportions à conserver, et la ligne refuse et vous demande une largeur et une hauteur. Ce refus est l’essentiel et non un échec : un navigateur à qui l’on donne un tel fichier se rabat sur un petit cadre fixe que personne n’a choisi, et être interrogé une fois vaut mieux que télécharger cela et s’en apercevoir plus tard.

Un couple qui n’est pas une taille est refusé avec ses propres mots, et c’est l’autre moitié du même soin. Zéro, un nombre négatif, un demi-pixel ou un nombre plus grand que ce qu’un format d’image sait exprimer sont chacun refusés plutôt qu’arrondis, ramenés à une borne ou remplacés en silence par la taille propre du fichier — une conversion à une taille que personne n’a demandée est précisément ce que cette page existe pour ne pas faire. Et si ce que vous avez choisi est une photographie et non un dessin, les champs de taille n’apparaissent pas du tout : une image en pixels se convertit à ses propres dimensions, et une commande incapable de changer quoi que ce soit est pire que pas de commande du tout.

Quel format pour le dessin une fois passé en pixels

Cette page s’ouvre sur PNG parce que c’est la bonne réponse pour presque tout vecteur, et les autres formats sont à un clic plutôt que derrière une autre page. Ce entre quoi vous choisissez, c’est un format qui stocke les pixels exactement et deux qui en cèdent une partie contre un fichier plus petit, et un dessin est une pièce à conviction singulièrement déséquilibrée : les aplats de couleur et les contours francs sont précisément le contenu que la compression avec perte traite le plus mal.

• PNG est le format par défaut et clôt d’ordinaire la discussion. Il stocke exactement le dessin converti en pixels, il porte la transparence, et il comprime remarquablement bien les aplats d’une seule couleur — ce qu’est en grande partie un logo ou une icône, si bien que le fichier est souvent plus petit que la réputation du format ne le laisse croire.
• JPG ne vaut la peine d’être choisi que lorsque quelque chose, à l’autre bout, l’exige. Il ne sait pas stocker la transparence du tout, il faut donc d’abord peindre une couleur de fond derrière votre dessin, et sa compression dépose une frange grise exactement le long des contours francs et des lettres pour lesquels vous avez converti le vecteur.
• WebP est la réponse intermédiaire pour une page web : il porte la transparence et il est d’ordinaire plus petit que le PNG. Il est ici avec perte à tous les réglages de qualité, le haut du réglage compris, c’est donc un bon choix pour une image destinée à une page et un mauvais pour un exemplaire de référence que vous retoucherez encore.
• Aucun des trois n’est un format vectoriel, et cette page n’écrit aucun format vectoriel. S’il vous faut un fichier qui s’adapte à toutes les tailles, le SVG que vous avez déjà est ce fichier — gardez-le, et traitez ce que vous téléchargez ici comme une copie faite pour un seul endroit.

Le réglage de qualité n’apparaît que pour les deux formats qui ont quelque chose à céder, c’est-à-dire JPG et WebP ; PNG ne jette rien, aucun réglage n’est donc proposé plutôt qu’un réglage qui resterait là sans rien faire. Chaque ligne indique la taille à laquelle le fichier est sorti, de sorte que le marché que vous passez est un chiffre posé devant vous. Déplacer ce réglage réencode, là où c’est possible, une image déjà dessinée au lieu de convertir le dessin en pixels une seconde fois, tandis que changer la taille oblige bel et bien à le redessiner — ce qui est le bon ordre, puisque la seconde opération est celle qui produit réellement d’autres pixels.

Ce qu’une conversion en pixels ne peut pas emporter

Tout se fait ici avec les fonctions de dessin déjà présentes dans votre navigateur : le fichier lui est remis comme une image, dessiné une fois à la taille que vous avez choisie, puis réécrit dans le format que vous avez demandé. C’est ce qui permet à l’outil de fonctionner sans rien envoyer, sans rien installer et sans rien télécharger au-delà de la page elle-même — et, pour un vecteur, c’est aussi ce qui décide de ce que le résultat peut contenir, car un SVG est un document et non un bloc de pixels, et un document peut demander des choses.

Remis comme il l’est ici, il ne les obtient pas. Rien à l’intérieur du fichier ne s’exécute et rien hors du fichier n’est récupéré, ce qui est une propriété voulue et réellement précieuse : un SVG peut porter un script, et il peut porter un renvoi vers une adresse quelque part qui serait demandée dès l’affichage du dessin. Ouvrir ici le dessin d’un inconnu ne fait ni l’un ni l’autre. Ce que cette sûreté coûte est exposé ci-dessous, et les deux premiers points sont annoncés sur la ligne au lieu de vous être laissés à découvrir.

• Tout ce vers quoi le fichier renvoie hors de lui-même ne se chargera pas — une image liée, une feuille de style, une police. C’est vrai d’une adresse sur le web et tout autant d’un fichier posé dans le même dossier, qui est de loin le cas le plus fréquent et la raison pour laquelle l’avis dit que ces parties ne se chargeront pas au lieu de dire qu’elles se trouvaient sur une machine distante. Ce à quoi elles servaient manque au résultat, et le remède est de les intégrer au dessin et de le reconvertir.
• Le texte est tracé avec les polices installées sur cette machine. Les lettres sont dans le résultat et vous paraissent justes, mais le même fichier converti sur un autre ordinateur peut choisir une autre fonte et donner une autre image. Si les formes exactes comptent, convertissez le texte en tracés dans le logiciel qui a dessiné le fichier, et alors plus rien n’est cherché nulle part.
• Tout ce que le dessin fait au fil du temps n’est pas dans le résultat. La sortie est une image fixe dans tous les formats proposés : un fichier qui s’anime lui-même n’apporte donc que le seul instant qui a été dessiné, et rien d’interactif ne survit au trajet non plus.

Deux plafonds sur la sortie méritent d’être énoncés clairement plutôt que laissés à la découverte. Le PNG est écrit par le compresseur du navigateur lui-même, correct sans être exhaustif, si bien qu’un optimiseur spécialisé pourrait encore rogner une part du fichier sans en changer un seul pixel ; et le WebP est un encodage avec perte à tous les réglages, parce qu’on ne peut pas du tout demander à un navigateur le mode sans perte du format. On pourrait lever les deux en embarquant un véritable encodeur destiné à s’exécuter dans la page, et cet outil s’en abstient délibérément : ce sont quelques centaines de kilooctets que chaque visiteur téléchargerait pour qu’une partie d’entre eux obtienne un fichier un peu plus petit, sur un site dont toutes les autres pages fonctionnent dès l’instant où elles s’affichent. Sur cette page en particulier, cela rapporterait d’ailleurs moins qu’il n’y paraît : la conversion en pixels est le dessin de votre vecteur par le navigateur lui-même, et un encodeur ne peut rien changer à la façon dont il a été dessiné.

Ce que chaque ligne vous dit de votre dessin, et quand elle refuse

Un convertisseur qui travaille en silence est la façon dont on se retrouve avec un logo sur fond noir, ou avec un dessin auquel manque l’image vers laquelle il renvoyait, et dont on s’aperçoit des jours plus tard et tout à fait ailleurs. Chaque ligne ici porte un bref compte rendu de ce qui a réellement été fait à ce fichier — et ne porte rien du tout quand rien de notable n’a eu lieu, ce qui est précisément ce qui rend ces avis dignes d’un arrêt. Un vecteur rencontre un ensemble d’avis différent de celui d’une photographie, et trois des avis de l’outil ne peuvent pas s’appliquer à lui du tout : un dessin n’a pas de données d’appareil photo à abandonner, rien qui indique dans quel sens il se tient, et pas de succession d’images à perdre.

• Quelque chose vers quoi le dessin renvoie ne se chargera pas. Cet avis apparaît pour un fichier qui renvoie à une image, une feuille de style ou une police qui ne sont pas dedans, que ce soit par une adresse ou par un chemin posé à côté, et c’est l’explication d’un résultat sorti avec un morceau en moins.
• Le texte a été tracé avec les polices de cette machine. L’avis n’apparaît que là où le dessin pose réellement des lettres sur le canevas : un fichier contenant un élément de texte vide ne dit donc rien, et un dessin sans texte du tout ne dit rien non plus.
• La transparence a été aplatie, et sur quelle couleur. Convertir en JPG oblige à mettre quelque chose derrière le dessin, et un sélecteur de couleur apparaît dès qu’un fichier de votre liste en a réellement besoin. Cet avis est mesuré et non supposé : il attend qu’un pixel réellement transparent ait été trouvé dans l’image dessinée, si bien qu’un dessin dont l’illustration couvre toute l’image se convertit en JPG sans qu’il en soit dit un mot.
• Le nom et le contenu ne concordent pas. Le format se décide d’après le contenu du fichier et jamais d’après son extension : un dessin que quelqu’un a enregistré avec la mauvaise terminaison est donc lu et converti correctement comme le SVG qu’il est — et on vous le signale, parce que c’est une chose vraie de votre fichier que vous ne saviez probablement pas.
• À ce réglage, le WebP reste avec perte. Convertir un dessin en pixels puis réclamer l’extrême haut du réglage de qualité donne le sentiment que l’on devrait récupérer exactement ce qui a été dessiné, et ce n’est pas le cas — voilà la croyance que cet avis existe pour corriger, et c’est pourquoi il apparaît là et à aucune position plus basse.

Là où un fichier ne peut pas être converti du tout, l’outil dit pourquoi au lieu de produire quelque chose. Un fichier qui n’est aucun des formats qu’il lit est nommé et refusé, et il en va de même d’un fichier qui est bien l’un d’eux mais dont le début ne peut pas être lu — pour un dessin, cela veut dire sa balise d’ouverture, la seule chose qu’un vecteur possède en fait d’en-tête. Un fichier contenant un dessin quelque part au milieu d’une page web n’est pas un fichier image et est refusé comme tel, et il en va encore de même d’un dessin que votre navigateur se révèle incapable de dessiner, si sain qu’il ait paru de l’extérieur. Rien n’est deviné, et rien d’à moitié fait n’est rendu comme s’il était terminé.

Le refus que vous rencontrerez le plus probablement ici est celui qui porte sur la taille, et c’est un fait à propos de cette page plutôt qu’à propos de votre fichier : un multiplicateur est à un clic, un dessin se laissera demander n’importe quelle taille de bon cœur, et rien dans un vecteur ne vous arrête. Ce qui vous arrête, c’est le navigateur, qui ne tient une image que jusqu’à une certaine surface — une surface différente sur un téléphone et sur un ordinateur de bureau, et différente encore entre deux navigateurs de la même machine. La franchir ne produit aucune erreur, seulement une image vide de quelques kilooctets qui a l’air d’une conversion terminée jusqu’à ce qu’on l’ouvre. Cet outil écrit donc un pixel connu dans l’image à la taille demandée et le relit aussitôt, avant qu’une seule forme ne soit tracée ; s’il ne revient pas, vous recevez le refus avec la taille dedans et aucun fichier. Nulle part rien n’est comparé à un nombre fixe : le plafond que vous atteignez est celui de votre propre appareil, jamais un plafond choisi pour quelqu’un d’autre.

Pourquoi votre dessin ne quitte jamais cet onglet

Un dessin en dit plus long qu’une photographie, parce qu’un dessin est un fichier texte et que cela se lit. Les noms des calques, le nom de qui l’a exporté, un commentaire laissé dedans, l’adresse de chaque pièce vers laquelle il pointait : tout cela est écrit en toutes lettres dans le fichier, et rien de tout cela ne part où que ce soit. Votre SVG est lu par cet onglet de navigateur et converti en pixels par le processeur de votre propre machine. À l’autre bout de cette page, il n’y a aucun serveur capable d’en recevoir un : c’est donc une description de la façon dont l’outil est bâti, et non une promesse sur la façon dont il est exploité.

Quelques secondes dans l’onglet réseau des outils de développement de votre navigateur suffisent à trancher, et pour un dessin il y a deux choses à surveiller plutôt qu’une. Rien ne sort en emportant votre fichier, et rien ne sort non plus au nom du fichier, si nombreuses que soient les adresses écrites dedans. Une fois chargée, la page est une poignée de fichiers statiques sans aucun code s’exécutant ailleurs : vous pouvez donc couper entièrement le réseau et continuer à convertir en pixels aussi longtemps qu’il vous plaira.

• Un dessin que vous ne confieriez pas à un inconnu — un logo encore non annoncé, un plan d’étage, le schéma de quelque chose d’interne — peut être converti ici en pixels sans quitter votre machine du tout.
• Ce qui sort de la conversion en pixels reste dans cet onglet jusqu’à ce que vous l’enregistriez, et fermer l’onglet suffit à l’effacer entièrement. Ni le dessin que vous avez apporté ni l’image qui en est tirée ne sont retenus d’une visite à l’autre.
• Un dessin venu d’un endroit auquel vous ne faites pas entièrement confiance peut être ouvert ici sans danger, parce que rien à l’intérieur ne s’exécute et que rien vers quoi il renvoie n’est récupéré. Le convertir en pixels est d’ailleurs une façon de le dépouiller : ce que vous téléchargez, ce sont des pixels, et des pixels ne peuvent rien demander.