Convertisseur SVG vers PNG (convertit aussi en JPG)

Convertissez gratuitement un fichier SVG ou du code SVG collé en image PNG ou JPG. Choisissez exactement la taille de sortie dont vous avez besoin — tout s'exécute entièrement dans votre navigateur.

PNG ou JPG — lequel choisir ?

Format Caractéristiques Idéal pour
PNG Compression sans perte de qualité, et le fond transparent reste parfaitement intact. Logos, icônes et illustrations pour lesquels vous avez besoin de transparence ou de contours nets
JPG Compression avec perte qui garde une taille de fichier réduite, mais les zones transparentes sont remplies avec la couleur de fond que vous choisissez. Images avec un fond photographique, ou lorsque la réduction de la taille du fichier est la priorité

Qu'est-ce que le convertisseur SVG vers PNG ?

Le convertisseur SVG vers PNG vous permet de transformer un fichier SVG (image vectorielle) ou du code SVG collé en une image PNG ou JPG, à la taille en pixels de votre choix. Le SVG est largement utilisé pour les icônes, les logos et les illustrations, mais il existe de nombreuses situations — l'envoi vers un formulaire web, ou l'affichage dans une application ou un environnement plus ancien qui ne prend pas en charge le SVG — où un format d'image classique devient nécessaire. Cet outil comble cet écart en quelques secondes, sans qu'il soit besoin d'installer le moindre logiciel supplémentaire.

La conversion s'effectue entièrement côté client grâce à l'API Canvas du navigateur, si bien que votre fichier ou code SVG n'est jamais transmis à un serveur. Le SVG étant un format vectoriel, la taille en pixels au moment de l'export doit forcément être décidée à un endroit ou à un autre ; cet outil détecte une valeur par défaut raisonnable directement à partir du SVG lui-même, puis vous laisse l'ajuster librement selon vos propres besoins.

Comment l'utiliser

  1. Charger votre SVG Choisissez un fichier (le glisser-déposer fonctionne aussi), ou collez directement du code SVG.
  2. Choisir un format de sortie Choisissez PNG (conserve la transparence) ou JPG (remplit la transparence avec une couleur de fond).
  3. Ajuster la taille de sortie Saisissez directement une largeur/hauteur, ou utilisez les boutons d'échelle (1x/2x/4x) pour modifier les deux à la fois.
  4. Convertir et télécharger Cliquez sur « Convertir » pour afficher un aperçu, puis téléchargez-le immédiatement.

Astuces pour en tirer le meilleur parti

  • Si votre SVG ne comporte pas d'attributs width/height ni de viewBox, la taille de sortie initiale est fixée par défaut à 512×512px. Vous pouvez la modifier à tout moment selon vos besoins.
  • Les boutons d'échelle (1x/2x/4x) multiplient en un clic la taille détectée à partir de votre SVG — pratique pour exporter des jeux d'icônes en 2x/4x destinés aux écrans Retina (haute densité de pixels).
  • Choisissez PNG si vous devez conserver un fond transparent. Le format JPG ne possède pas de canal alpha, donc toute zone transparente est remplie avec la couleur de fond que vous avez choisie (blanc par défaut).
  • Les dégradés complexes et les effets de filtre présents dans votre SVG sont restitués tels que votre navigateur les interprète. Si le SVG fait référence à des polices ou des images externes, elles ne s'afficheront correctement que si votre navigateur parvient réellement à les charger.
  • Laissez « Verrouiller le ratio » activé pour modifier la largeur ou la hauteur tout en conservant les proportions. Désactivez cette option pour définir la largeur et la hauteur de façon indépendante.

Cas d'usage

Rasteriser des icônes et des logos

Convertissez en PNG une icône SVG exportée depuis un outil de conception avant de l'intégrer dans un système ou une application qui ne prend pas en charge le SVG.

Envoyer vers des formulaires web

De nombreux formulaires et services n'acceptent pas les fichiers SVG — convertissez-les en PNG/JPG au préalable pour contourner cette limitation.

Exporter plusieurs tailles pour les écrans Retina

Utilisez les boutons d'échelle pour générer rapidement des versions 1x/2x/4x destinées à un jeu d'icônes haute résolution.

Coller sur les réseaux sociaux ou dans des diapositives

Convertissez en format d'image classique pour les plateformes et logiciels de présentation qui n'acceptent pas directement le SVG.

Glossaire

SVG (Scalable Vector Graphics)
Un format d'image vectorielle qui décrit des formes à l'aide de coordonnées et de tracés en texte XML. Il ne devient jamais crénelé lorsqu'on l'agrandit ou qu'on le réduit.
Rasterisation
Le processus consistant à convertir une image vectorielle en une grille de pixels (une image raster) à une taille donnée.
viewBox
Un attribut SVG qui définit la plage de coordonnées interne occupée par son contenu. Utilisé comme valeur de repli pour les dimensions lorsque width/height sont absents.
Canal alpha
L'information de transparence stockée pour chaque pixel d'une image. Le PNG la conserve ; le JPG n'en possède pas, si bien que les zones transparentes sont remplies d'une couleur de fond lors de la conversion.
Canvas API
L'interface JavaScript standard du navigateur pour dessiner et manipuler des images. Cet outil rasterise le SVG uniquement grâce à la Canvas API, sans bibliothèque supplémentaire.

Questions fréquentes

Choisissez PNG si vous devez préserver la transparence ou obtenir des contours nets, comme pour les logos et les icônes. Choisissez JPG pour les images avec un fond photographique, lorsque la réduction de la taille du fichier compte davantage.

Si le fichier SVG définit des attributs width/height ou un viewBox, cette valeur est utilisée comme taille initiale. Si aucun des deux n'est trouvé, la taille par défaut est 512×512px. Vous pouvez ensuite la modifier librement.

Non. L'intégralité de la conversion s'effectue dans votre navigateur grâce à JavaScript, et rien n'est jamais envoyé à un serveur externe.

Non — comme le SVG est un format vectoriel, les contours restent parfaitement nets quelle que soit la taille en pixels choisie pour l'export (contrairement à l'agrandissement d'une image déjà rasterisée).

Un SVG animé est exporté sous la forme d'une seule image fixe. Les SVG qui font référence à des polices ou des images externes ne s'affichent correctement que si votre navigateur parvient à charger ces ressources externes.
Tool-kun

Anecdote — un SVG n'est en réalité qu'un simple fichier texte écrit en XML

Contrairement au PNG ou au JPG, qui stockent une image sous la forme d'une grille de pixels, le SVG (Scalable Vector Graphics) décrit des formes à l'aide de coordonnées mathématiques et de tracés écrits en texte XML. C'est précisément pour cette raison qu'il ne devient jamais crénelé ou flou lorsqu'on l'agrandit ou qu'on le réduit, et c'est aussi pourquoi on peut ouvrir un fichier SVG dans un simple éditeur de texte et en lire directement le contenu, ligne par ligne. Cette structure fondamentale explique pourquoi le SVG est le format privilégié pour les logos et les icônes qui doivent rester nets à de très nombreuses tailles différentes, des favicons de site web jusqu'aux illustrations de grande taille.

Le SVG n'a en lui-même aucune notion de « résolution » — il est stocké uniquement comme une description vectorielle, indépendante de tout nombre de pixels concret. Dès lors que vous le rasterisez vers un format classique basé sur les pixels comme le PNG ou le JPG, il faut bien que quelqu'un, ou quelque chose, décide des dimensions en pixels à utiliser pour le rendu. C'est exactement pour cette raison que cet outil vous permet de préciser la largeur et la hauteur : il s'agit d'une conséquence directe et incontournable de ce qu'est fondamentalement le SVG, à savoir une description de formes et non une grille de pixels déjà figée.

Dans la pratique, de nombreux fichiers SVG omettent totalement les attributs width/height, ou les expriment dans des unités relatives comme des pourcentages. Pour ces cas, les outils s'appuient généralement sur l'attribut viewBox, qui définit la plage de coordonnées interne occupée par le contenu du SVG. Cet outil suit exactement cette même convention largement répandue, en utilisant le viewBox comme valeur de repli pour les dimensions en pixels chaque fois que width et height sont absents, ce qui permet d'obtenir malgré tout un point de départ cohérent que vous pourrez ensuite ajuster librement.