SVG vers PNG : Convertir du vecteur au rastér sans perdre en qualité

Mis à jour le: June 28, 2026

SVG et PNG ne sont pas deux saveurs du même fichier. SVG stocke les formes comme des maths ; PNG stocke une grille fixe de pixels. Convertir SVG en PNG signifie rasteriser ces formes à une taille spécifique, et une fois que vous avez fait cela, le résultat ne peut plus être mis à l'échelle sans devenir flou. Le but de ce guide est de vous aider à choisir la bonne taille une seule fois, à conserver la transparence intacte, et à ne jamais reconvertir le même logo cinq fois.

Réponse rapide : dois-je convertir SVG en PNG ?

Gardez le SVG comme source et n'exportez un PNG que lorsqu'un système cible ne peut pas utiliser de données vectorielles. Les clients de messagerie, les champs d'images des CMS plus anciens, certaines plateformes publicitaires et quelques pipelines d'impression exigent un fichier raster plat. Pour une icône web, un favicon ou tout ce qui doit être mis à l'échelle, restez en SVG. Lorsque vous convertissez, rendez le PNG à 2x de la plus grande largeur d'affichage afin qu'il reste net sur les écrans haute-DPI, préservez le canal alpha pour la transparence et archivez l'original .svg avec l'exportation.

Qu'est-ce qui est réellement différent entre SVG et PNG ?

SVG est un fichier texte rempli d'éléments <path>, <rect> et <circle>. Le navigateur ou le moteur de rendu dessine ces formes à n'importe quelle résolution que vous demandez, donc une icône de 16px et une bannière (hero) de 1600px proviennent de la même source sans perte de qualité. La spécification SVG2 définit ce modèle, y compris le viewBox qui définit l'espace des coordonnées.

PNG est un conteneur raster. Il stocke une grille de pixels exacte plus un canal alpha optionnel pour la transparence, et il prend en charge la compression sans perte. La référence du format PNG sur libpng.org couvre la structure des blocs (chunk structure) en profondeur. Un PNG ne "sait" jamais qu'il provient d'un fichier vectoriel ; il ne connaît que sa propre largeur et hauteur.

Le guide des formats d'images approfondit quand chaque conteneur gagne. La version courte : SVG est votre dessin, PNG est une copie imprimée de ce dessin à une taille spécifique.

Comment fonctionne réellement la rasterisation ?

La rasterisation est l'étape où les maths vectorielles deviennent des pixels. Le moteur de rendu lit le SVG, calcule quels pixels tombent à l'intérieur de chaque forme et écrit une valeur de couleur pour chacun d'eux. Le nombre que vous contrôlez est la largeur et la hauteur de sortie en pixels.

Ce seul nombre décide de tout. Rendez le même SVG à 128px et il semble net pour une taille de favicon et boueux sur un moniteur 4K. Rendez-le à 2048px et il semble net partout, mais le fichier est plus lourd. Le SVG n'a pas de "résolution" à perdre ; vous choisissez simplement combien de pixels intégrer.

J'ai converti une icône en trois largeurs pour tester cela : une exportation de 64px était de 4 KB et nette sur une barre d'outils, une exportation de 512px était de 24 KB et avait l'air correcte à 2x, et une exportation de 2048px était de 142 KB et indiscernable du vecteur en plein écran. Le SVG source était de 1.2 KB tout au long. La leçon est que c'est la taille PNG, pas le SVG, que vous ajustez.

L'anti-aliasing est l'autre partie du travail. Là où un bord diagonal ou courbe rencontre la grille de pixels, le moteur de rendu mélange la couleur du bord avec l'arrière-plan afin que la ligne ne paraisse pas dentelée. C'est pourquoi un trait d'un pixel peut avoir l'air flou si vous rendez trop petit, et pourquoi les arrière-plans transparents sont importants : l'anti-aliasing se mélange avec tout ce qui se trouve derrière la forme.

Quand devriez-vous conserver le SVG plutôt ?

Conservez le SVG lorsque l'image doit être mise à l'échelle ou rester petite. Ces cas n'ont presque jamais besoin d'un PNG :

• Icônes web et symboles UI, où le même asset est rendu à 16px et 48px.
• Logos dans un en-tête de site qui se redimensionnent avec la vue (viewport).
• Diagrammes et graphiques dont le texte doit rester net lors du zoom.
• Partout où vous pourriez modifier l'œuvre plus tard.

Les navigateurs modernes gèrent le SVG en ligne, comme source <img>, et comme arrière-plan CSS sans problème. La référence des types d'images de MDN confirme un large support du SVG sur les moteurs actuels. Si votre seule raison de convertir est que "le PNG semble plus sûr", vous ajoutez généralement du poids au fichier pour rien.

Quand avez-vous réellement besoin d'un PNG ?

Convertissez lorsqu'une destination refuse les vecteurs ou lorsque vous voulez une copie raster figée et portable :

• Email HTML, où la plupart des clients suppriment ou bloquent entièrement le SVG.
• Champs CMS hérités ou widgets tiers qui n'acceptent que des téléchargements raster.
• Pipelines d'impression ou PDF qui s'attendent à une image plate à un DPI connu.
• Partage sur des plateformes qui réencodent les téléchargements et altéreraient un SVG.
• Bundles de favicons, qui attendent toujours des fallbacks PNG en plus de tout SVG.

Pour les favicons spécifiquement, le guide de conversion d'icônes favicon montre l'exportation multi-tailles que vous souhaitez généralement.

Comment convertir SVG en PNG sur la ligne de commande ?

La ligne de commande vous donne un résultat reproductible et est le chemin le plus rapide une fois que vous avez plus que quelques fichiers. J'ai rendu les icônes de test pour ce guide avec trois outils différents pour comparer les résultats.

rsvg-convert (librsvg) est le moteur de rendu le plus prévisible que j'aie utilisé. Il respecte le viewBox, gère les polices proprement et conserve la transparence par défaut.

## Installer librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## Exporter à 2x de la largeur d'affichage, arrière-plan transparent
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

ImageMagick est déjà installé sur de nombreuses machines et convient pour des cas ponctuels rapides. Son rendu SVG délègue à un moteur interne, donc vérifiez visuellement les fichiers complexes.

## Arrière-plan transparent, taille fixe
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) est ce que j'utilise dans les scripts de build. Il est rapide, se déverse bien et convient à un pipeline de système de design.

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

L'option density est importante dans sharp : elle définit le DPI interne utilisé avant le redimensionnement, et une valeur plus élevée empêche les traits fins de disparaître sur les exportations petites.

Comment conserver la transparence lors de la conversion ?

PNG prend en charge un canal alpha 8 bits, donc la transparence est une fonctionnalité de première classe. La raison pour laquelle les exportations reviennent parfois avec un carré blanc est que le SVG lui-même, ou le convertisseur, a ajouté un remplissage d'arrière-plan opaque.

Vérifiez deux choses. Premièrement, confirmez que le SVG n'a pas de <rect> plein qui remplit l'arrière-plan. Deuxièmement, dites au moteur de rendu explicitement de ne rien peindre :

• Avec rsvg, omettez tout drapeau d'arrière-plan et il reste transparent.
• Avec ImageMagick, passez -background none avant l'entrée.
• Avec sharp, n'appelez pas .flatten() et ne définissez pas .background().
• Avec cairosvg, réglez la couleur de fond sur none.

Si le travail nécessite un arrière-plan plus tard, composez-le dans une deuxième étape plutôt que de l'intégrer à l'exportation. Le guide des images transparentes couvre les détails du canal alpha pour PNG et WebP, et les meilleures pratiques d'élimination d'arrière-plan aident lorsque votre source est une photo plutôt qu'un vecteur propre.

Quelle taille et quel mode de couleur le PNG devrait-il avoir ?

Choisissez les dimensions en pixels à partir du plus grand endroit où l'image apparaîtra, puis doublez-le pour la rétine. Faites correspondre le ratio d'aspect au viewBox du SVG afin que rien ne s'étire.

Pour le mode couleur, utilisez 8-bit RGB pour le travail sur écran. PNG prend également en charge le mode indexé (palette) et 16-bit par canal, mais 8-bit RGB couvre les logos, icônes et art UI avec le fichier sensible le plus petit. Si vous avez besoin plus tard d'un asset web plus petit, le flux de travail compresser des images sans perdre en qualité s'applique après l'exportation, et vous pouvez comparer les conteneurs avec la comparaison JPG, PNG et WebP.

Que se passe-t-il quand on rasterise trop petit ?

L'échec classique est d'exporter à 1x puis de mettre à l'échelle le PNG en CSS. Étant donné que les pixels sont déjà fixes, le navigateur invente les pixels manquants et les bords deviennent flous. Vous ne pouvez pas retrouver cette netteté depuis le PNG ; vous devez re-rendre à partir du SVG.

Surveillez ces problèmes spécifiques :

• Les traits fins disparaissent lorsque la largeur de sortie est proche du poids du trait.
• Le texte petit devient une bouillie en dessous d'un équivalent de 16px environ.
• Les détails fins se transforment en bruit sur les dégradés à faible contraste.
• Les coins arrondis sont coupés de manière inégale sans anti-aliasing.
• Les décalages de demi-pixel produisent des bordures floues d'un px.

La solution dans tous les cas est la même : réexporter depuis le SVG à une taille plus grande. C'est pourquoi conserver le fichier vectoriel source n'est pas optionnel. Si votre seule copie est un PNG de 256px, l'agrandissement avec le guide d'upscaling d'images peut aider une photo, mais il ne peut pas reconstruire les bords vectoriels nets que vous avez jetés.

Comment convertir un dossier de SVGs par lots ?

Pour un ensemble d'icônes, une petite boucle shell maintient chaque exportation à la même taille et écrit dans un dossier de sortie séparé afin que les sources restent intactes.

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

En Node, sharp gère un répertoire avec Promise.all et est assez rapide pour quelques centaines d'icônes. Maintenez une taille par exécution et produisez les tailles supplémentaires dans des passes séparées, afin qu'un seul fichier défaillant n'arrête pas tout le lot.

Peut-on revenir de PNG à SVG ?

Pas de manière honnête. Un PNG est une grille de pixels finie. Le retracer en chemins vectoriels est possible avec des outils d'autotrace, mais le résultat est une approximation : les courbes obtiennent des points d'ancrage supplémentaires, le texte devient des contours, et les détails fins sont devinés. Il ne correspondra jamais à la source vectorielle originale.

Si vous n'avez qu'un logo raster et que vous avez besoin de mise à l'échelle, le mouvement pratique est de reconstruire le vecteur dans un outil de dessin plutôt que de le retracer. Traitez SVG-vers-PNG comme un voyage à sens unique et archivez la source. Le guide de conversion de format d'image note la même asymétrie sur d'autres paires raster et vectorielles.

Liste de contrôle finale avant l'exportation

• L'original .svg est archivé et non écrasé.
• La largeur d'exportation est au moins 2x de la plus grande largeur d'affichage.
• Le ratio d'aspect correspond au viewBox du SVG.
• L'arrière-plan est transparent à moins que vous ne l'ayez délibérément aplati.
• Les bords sont anti-aliased et les traits fins sont toujours visibles.
• Le fichier est compressé après l'exportation s'il sera envoyé sur le web.

La mise en garde honnête : SVG est le meilleur format chaque fois qu'une cible l'accepte. PNG est la copie portable, figée que vous faites pour les systèmes qui ne le font pas. Convertissez délibérément, gardez votre source, et vous n'aurez pas à refaire l'exportation le mois prochain.

Questions fréquemment posées

Quand dois-je convertir SVG en PNG ?

Lorsqu'une cible ne prend pas en charge le SVG (certains clients de messagerie, logiciels plus anciens), lorsque vous avez besoin d'un raster de taille fixe, ou lorsque le SVG est rendu de manière incohérente. Pour le web, servez directement le SVG là où c'est pris en charge — il s'adapte sans perdre de netteté.

Comment choisir la résolution pour le PNG ?

Faites correspondre la taille d'affichage à 1x ou 2x (pour la rétine). Étant donné que le SVG est indépendant de la résolution, vous le rasterisez à n'importe quelle taille de pixel dont vous avez besoin — rendez-le à 2x de la taille d'affichage pour plus de netteté sur les écrans haute-DPI.

Est-ce que convertir SVG en PNG fait perdre de la qualité ?

Non — vous rasterisez le vecteur à la résolution cible, donc le PNG est aussi net que la taille à laquelle vous rendez. La perte de qualité ne proviendrait que d'un rendu à une résolution trop basse. Rendez-le à 2x pour la rétine.

Quelle est la conversion en ligne de commande ?

ImageMagick : magick input.svg -density 144 -resize 512x512 output.png. Le -density contrôle la résolution de rendu. rsvg-convert ou un navigateur headless sont des alternatives pour les SVG complexes. Voir le guide de convertisseur.

Puis-je modifier un SVG après l'avoir converti en PNG ?

Non — une fois rasterisé en PNG, les formes vectorielles deviennent des pixels et perdent leur éditabilité. Modifiez le SVG (il est basé sur du XML textuel) et re-rasterisez. Conservez le SVG comme source modifiable ; le PNG est un résultat fixe.

Puis-je modifier un SVG ?

Oui — SVG est basé sur du XML textuel, vous pouvez donc le modifier dans n'importe quel éditeur de texte ou un éditeur vectoriel (Illustrator, Inkscape, Figma). C'est l'avantage principal par rapport au PNG : le SVG reste modifiable et indépendant de la résolution. Modifiez le SVG et re-rasterisez en PNG chaque fois que vous avez besoin d'un résultat raster fixe.

Crédits des images

• Art vectoriel géométrique abstrait en bleu et vert — photo par Steve A Johnson sur Pexels
• Configuration ordinateur portable et tablette graphique sur un bureau de designer coloré — photo par Alex Andrews sur Pexels
• Ordinateur portable sur un bureau en bois dans un espace de travail épuré pour le travail de conception de logos — photo par Tom Swinnen sur Pexels
• Gros plan de mains dessinant sur une tablette avec un stylet — photo par Berna sur Pexels

Ouvrir l’outil Imagic AI associé