SVG en PNG : rendez vos graphiques vectoriels à toute taille sans les envoyer

On demande souvent comment convertir SVG en PNG « sans perte de qualité », et la question contient un malentendu qu'il vaut mieux dissiper d'abord. Un SVG n'a pas de qualité à perdre. Il n'a pas de pixels du tout.

Les vecteurs décrivent, les pixels stockent

Un SVG est une description de formes (courbes, remplissages, texte) dans un système de coordonnées sans taille fixe en pixels. Un PNG est une grille fixe de pixels. Convertir SVG en PNG revient donc toujours à choisir une taille, et le résultat est net à toute taille que vous choisissez.

Ouvrez un SVG dans un éditeur de texte et vous trouverez des instructions : aller à ce point, tracer une courbe jusqu'à celui-là, remplir avec cette couleur. Rien ne dit combien de pixels de large fait le dessin. Le navigateur le décide au moment de l'affichage, et il peut décider autrement à chaque fois.

Ce que signifient vraiment viewBox, width et height

Trois attributs de l'élément racine contrôlent la taille. Le viewBox définit le système de coordonnées : « ce dessin s'étend de 0 à 240 en largeur et de 0 à 160 en hauteur ». Les attributs width et height, s'ils sont présents, suggèrent une taille d'affichage par défaut. Beaucoup de SVG n'ont qu'un viewBox, certains n'ont que width et height, et quelques-uns n'ont ni l'un ni l'autre.

Ce convertisseur lit ceux qui sont présents, calcule une taille intrinsèque comme le ferait un navigateur, et l'utilise comme base 1×. Si aucun n'est déclaré, il se rabat sur 1 024 pixels pour que vous obteniez quand même une image utilisable.

Pourquoi « sans perte de qualité » est la mauvaise question

Comme le SVG peut être rendu à toute taille à partir des mêmes instructions, un PNG de 4 000 pixels est exactement aussi net qu'un PNG de 400 : le moteur dessine simplement plus de détails. La seule façon de perdre de la qualité est de rendre en petit puis d'agrandir le PNG ensuite. La solution est de choisir la taille finale ici, au moment de la conversion, et de ne jamais agrandir le PNG.

Cet outil lit vos fichiers SVG dans le navigateur, retire tout ce qui est exécutable, rend chacun à la taille de votre choix avec le propre moteur du navigateur, et vous rend des PNG sans perte avec la transparence intacte, individuellement ou en ZIP.

Le même moteur de rendu que votre navigateur

Les convertisseurs côté serveur utilisent une bibliothèque à part (librsvg, Inkscape, ImageMagick), et chacune a ses lacunes : un filtre non pris en charge, une police remplacée, un dégradé tracé légèrement différemment. Le PNG que vous recevez peut ne pas correspondre au SVG que vous avez regardé.

Ici, le rendu est fait par Blink, Gecko ou WebKit (le navigateur que vous utilisez) qui dessine le SVG sur un canvas. Si le SVG s'affiche correctement dans votre navigateur, le PNG sera identique, parce que c'est littéralement le même dessin.

Scripts retirés, rien d'envoyé

Le SVG est du XML, et il peut contenir des éléments <script>, des gestionnaires onload et du HTML intégré. Un fichier de provenance inconnue ne s'ouvre pas à la légère. Avant le rendu, le convertisseur retire les scripts, les attributs d'événements et les blocs foreignObject, puis rend le résultat dans un élément image qui ne peut de toute façon pas exécuter de code. Deux couches, toutes deux locales.

Rien n'est envoyé à aucun moment. Le panneau Réseau des outils de développement de votre navigateur reste vide pendant la conversion d'un lot.

Puisque la taille est un choix, autant savoir à quoi servent les options. Deux modes couvrent presque tous les cas.

1×, 2×, 3× : s'adapter à la densité d'écran

Un écran standard affiche un pixel par point CSS. Un écran Retina ou HiDPI en affiche deux ; la plupart des téléphones modernes en affichent trois. Une icône de 32 points à l'écran a donc besoin d'un PNG de 32 pixels pour le premier, 64 pour le deuxième et 96 pour le troisième. C'est toute la signification de 1×, 2× et 3×.

Le travail web et applicatif exporte généralement le même SVG aux trois échelles. Déposez le fichier une fois, convertissez à 1×, changez le réglage, convertissez à nouveau ; ou exportez simplement à 3× et laissez la plateforme réduire.

Un tableau de tailles pour les cibles courantes

Favicons : 16, 32 et 48 pixels, à créer de préférence avec l'outil PNG en ICO à partir d'un PNG de 512 pixels. Icônes d'application : 1024 pixels pour les stores, puis le générateur de jeux d'icônes. Avatars sociaux : de 400 à 800 pixels. Images Open Graph : 1200 × 630. Fiches de place de marché : généralement 2000 pixels sur le grand côté.

Largeur personnalisée pour l'impression et les places de marché

Pour l'impression, partez de la taille physique à 300 DPI : une page A4 fait 2 480 pixels de large, un A3 3 508, un autocollant de 6 pouces 1 800. Passez en mode Largeur, saisissez le nombre, et la hauteur suit les proportions du SVG. Le convertisseur plafonne la sortie à 16 384 pixels sur le grand côté (la limite que les navigateurs imposent à un canvas) et vous prévient si une demande a dû être réduite.

La plupart des SVG (logos, icônes, illustrations) n'ont pas de fond : les formes flottent sur du vide. Le PNG sait stocker cela, et c'est l'une des deux raisons de le préférer au JPG pour cette tâche.

Garder le fond transparent

Ici, transparent est le réglage par défaut. Chaque pixel que le SVG n'a pas peint reste vide, y compris les pixels partiellement couverts le long des bords courbes et diagonaux. Ces pixels de bord adoucis sont ce qui permet au PNG de se poser sur une diapositive sombre, un bouton coloré ou une photo sans contour visible.

Les résultats s'affichent sur un damier pour que vous puissiez vérifier la transparence avant de télécharger.

Quand aplatir sur une couleur

Certaines destinations ne gèrent pas l'alpha : anciens clients de messagerie, certains flux d'impression, quelques outils d'envoi de places de marché qui convertissent en JPG en coulisses. Pour ceux-là, choisissez Blanc, Noir ou une couleur personnalisée dans le réglage du fond. La forme est composée sur cette couleur et le PNG est entièrement opaque.

Choisissez la couleur qui correspond à l'endroit où ira l'image. Aplatissez sur du blanc puis placez le PNG sur un fond sombre, et les pixels de bord (désormais orange pâle, bleu pâle, selon la couleur de la forme) apparaissent comme un léger halo. Ce halo est la plainte la plus fréquente à propos des logos convertis, et c'est un choix de fond, pas un défaut de rendu.

Faire le rendu dans le navigateur signifie que le PNG correspond à l'écran, mais il hérite aussi des règles du navigateur sur ce qu'une image a le droit de charger.

Polices manquantes

Le texte d'un SVG est rendu avec la police qu'il nomme. Si cette police n'est pas installée sur votre machine ni intégrée au fichier, le navigateur la remplace, et le PNG affiche la police de substitution. Les polices web référencées par URL ne se chargeront pas non plus : un SVG rendu comme image n'a pas le droit de récupérer des ressources externes.

La solution fiable est de vectoriser le texte dans votre outil de création avant d'exporter le SVG. Les lettres deviennent des tracés et se rendent à l'identique partout.

Images liées manquantes

La même règle s'applique à <image href="https://…">. Une image matricielle chargée depuis une URL ressortira vide. Intégrez-la plutôt : la plupart des éditeurs ont une option d'export « intégrer les images », qui transforme le lien en URI de données dans le SVG. Les images intégrées se rendent sans problème.

Sortie vide ou minuscule

Un SVG sans viewBox ni width et height est rendu ici à une taille de repli ; si le dessin se trouve loin de l'origine, il peut tomber hors de la zone visible. Ajoutez un viewBox qui englobe l'illustration. Une sortie minuscule signifie presque toujours que le SVG déclare un width et un height petits : passez en mode Largeur et saisissez la taille que vous voulez vraiment.

Si le SVG se met à l'échelle parfaitement, pourquoi convertir SVG en PNG ? Parce qu'énormément de logiciels ne savent toujours pas accepter un vecteur.

Jeux d'icônes et favicons

Les stores d'applications, les formats de favicon et bien des systèmes d'icônes veulent des PNG de taille fixe. Convertissez une fois à la plus grande taille dont vous avez besoin, puis découpez le reste avec le générateur d'icônes ou PNG en ICO.

Plateformes qui refusent le SVG

Réseaux sociaux, places de marché, forums et la plupart des médiathèques de CMS refusent les SVG, en partie pour des raisons de sécurité, puisqu'un SVG peut contenir des scripts. Un PNG à 2× avec fond transparent est le substitut universel.

Signatures e-mail et newsletters

Les clients de messagerie suppriment le SVG ou affichent une image cassée. Les logos dans les e-mails sont des PNG, idéalement exportés à 2× et affichés à moitié taille pour rester nets sur les écrans Retina.

Impression et grand format

Les imprimeurs acceptent le PDF et le matriciel haute résolution. Utilisez le mode Largeur pour rendre un logo à 3 000 ou 4 000 pixels et il s'imprimera proprement au format affiche : les vecteurs rastérisés à la taille cible n'ont aucun flou d'agrandissement.

Presque tous les convertisseurs SVG en PNG en ligne envoient le fichier et le rendent sur un serveur avec librsvg, Inkscape ou un navigateur headless. Cela fonctionne pour des formes simples et dérive dès que c'est compliqué.

Fidélité

Chaque bibliothèque de rendu prend en charge une tranche légèrement différente de la spécification SVG. Filtres, masques, modes de fusion, CSS dans le fichier et texte sur tracé sont les victimes habituelles. Les moteurs de navigateur sont les moteurs de rendu SVG les plus complets qui existent, et rendre avec celui de votre machine signifie que le PNG ne peut pas différer de l'aperçu.

Confidentialité et limites

Un logo non publié, un schéma produit, un graphique avec des chiffres internes : les envoyer à un convertisseur est une petite fuite que personne ne souhaite. Les outils serveur plafonnent aussi la taille des fichiers et l'usage quotidien, parce que le rendu leur coûte de l'argent. Rendre sur votre propre appareil supprime les deux : il n'y a rien à faire fuiter et rien à compter.

Ce qu'un serveur fait mieux : un matériel très ancien rendra un lot de SVG complexes plus lentement qu'un centre de données. Pour dix logos, cela ne change rien.

La sortie est du PNG standard, donc chaque outil ici l'accepte sans nouvel envoi.

Pour le web, passez-le dans Compresser PNG ou convertissez-le en WebP : les deux conservent la transparence et réduisent la taille. Pour l'e-mail ou les photos, PNG en JPG aplatit et allège. Pour des dimensions exactes après coup, Redimensionner une image. Et si vous êtes parti d'une image matricielle en regrettant de ne pas avoir de vecteur, PNG en SVG fait le chemin inverse.