Skip to content
user@convertitive:~$convertitive

Convertisseur SVG en PNG

Déposez un SVG ou collez son code, choisissez une taille, téléchargez un PNG. Rien ne quitte votre navigateur.

Le SVG est indépendant de la résolution — le même fichier s’affiche avec netteté à 16 pixels comme à 16 000 — mais une bonne partie du web ne sait toujours pas le gérer. Les clients de messagerie le suppriment, les CMS plus anciens refusent l’envoi, les chaînes de production de favicons exigent des bitmaps à taille fixe, et un designer qui livre des ressources à une équipe non technique a souvent besoin de quelque chose qui s’ouvre partout, tout simplement. C’est là qu’on aplatit un vecteur en raster, et comme la source n’a pas de résolution fixe, c’est vous qui choisissez les dimensions de sortie. Cet outil rend votre SVG avec le rastériseur natif du navigateur sur un canvas exactement à la taille indiquée, puis encode un PNG — transparence préservée — sans que le fichier ne quitte jamais votre machine.

Drop an .svg file here, or

SVG up to 8 MB. Stays in your browser.

How to use

  1. Chargez votre SVG

    Glissez un fichier .svg (jusqu'à 8 Mo) sur la zone de dépôt, cliquez pour en choisir un, ou collez le code SVG brut dans la zone de texte. Dans tous les cas, l'outil lit les attributs width, height et viewBox pour détecter la taille intrinsèque.

  2. Réglez la taille de sortie

    Saisissez une largeur ou une hauteur exacte en pixels — avec le ratio verrouillé, l'autre dimension suit automatiquement — ou utilisez les boutons 1x, 2x ou 4x pour multiplier la taille intrinsèque. Pour les écrans Retina, le 2x est le choix habituel.

  3. Choisissez un fond

    Transparent (par défaut) conserve intact le canal alpha du SVG dans le PNG. Choisissez Blanc ou une couleur personnalisée si l'image doit être placée dans un contexte qui ne gère pas la transparence, comme un flux exclusivement JPEG ou certains clients de messagerie.

  4. Prévisualisez et téléchargez

    Le résultat s'affiche en direct sur un fond à damier pour voir exactement quelles zones restent transparentes. Cliquez sur Télécharger le PNG — le fichier est généré localement par l'encodeur canvas de votre navigateur et n'est jamais envoyé nulle part.

Frequently asked questions

Mon SVG est-il envoyé sur un serveur ?
Non. Le SVG est transformé en URL blob locale, rendu par le moteur SVG de votre navigateur dans une image hors écran, dessiné sur un canvas et encodé en PNG avec canvas.toBlob() — le tout en JavaScript sur votre machine. Il n'y a aucune requête d'upload.
Pourquoi mon SVG s'affiche-t-il à une taille bizarre ?
Beaucoup de SVG — surtout les exports d'icônes — ne portent qu'une viewBox, sans attributs width/height. Un navigateur affichant un tel fichier dans un <img> retombe sur une taille par défaut (souvent 300 × 150, parfois 0 × 0), ce qui explique pourquoi certains convertisseurs produisent des sorties aux dimensions étranges. Cet outil analyse la source SVG directement : si width et height sont présents, il les utilise ; s'il n'y a qu'une viewBox, il en reprend le ratio avec une largeur par défaut de 512 px ; à défaut des deux, il retombe sur 512 × 512. Vous pouvez toujours remplacer la taille détectée avant l'export.
Pourquoi le texte de mon SVG a-t-il un autre aspect dans le PNG ?
Les éléments <text> d'un SVG sont rendus avec les polices dont dispose le navigateur qui rastérise, et dans le contexte <img>, les références à des polices web externes ne sont pas chargées — votre typographie soigneusement choisie retombe donc sur une police générique du navigateur. Si la typographie exacte compte, vectorisez le texte dans votre outil de design (convertissez le texte en tracés) avant d'exporter le SVG ; les tracés se rastérisent à l'identique partout.
Pourquoi les images embarquées ou le CSS externe n'apparaissent-ils pas ?
Quand un navigateur rastérise un SVG à l'intérieur d'un élément <img>, il traite le fichier comme un document autonome : les références externes — feuilles de style liées, polices web et balises <image> pointant vers d'autres URL — ne sont pas chargées, et un contenu cross-origin peut « souiller » le canvas et bloquer complètement l'export. La solution consiste à rendre le SVG autosuffisant : intégrez le CSS et incorporez les images raster en data: URI.
La transparence est-elle préservée ?
Oui. Le PNG possède un canal alpha complet et, avec le fond réglé sur Transparent, chaque zone que votre SVG laisse vierge reste transparente dans la sortie. L'aperçu à damier montre exactement où. Ne choisissez Blanc ou une couleur personnalisée que si vous voulez délibérément aplatir l'arrière-plan.
Quelle échelle utiliser pour les écrans Retina / haute densité ?
Exportez à 2x la taille d'affichage prévue — un logo affiché à 200 × 80 pixels CSS devrait être un PNG de 400 × 160. Les écrans haute densité regroupent environ quatre pixels physiques dans chaque pixel CSS, donc un export 1x paraît flou sur eux. Le 4x ne se justifie que pour des usages proches de l'impression ; pour un affichage web normal, il ne fait que quadrupler encore la taille du fichier.

About

Comment les navigateurs rastérisent le SVG en contexte d'image

Charger un SVG via un élément <img> (ou le dessiner sur un canvas) place le moteur SVG du navigateur en mode restreint : les scripts contenus dans le fichier ne s'exécutent jamais, les gestionnaires d'événements sont ignorés et les ressources externes — polices, feuilles de style, images référencées — ne sont pas chargées. Le document est rendu comme une image pure et autonome. C'est précisément cette restriction qui rend un convertisseur côté client comme celui-ci sûr avec n'importe quel SVG trouvé sur le web : même un fichier malveillant n'est jamais traité que comme des pixels, jamais comme du code. C'est aussi la source de la principale limite de l'outil — tout ce que le SVG va chercher hors de lui-même n'apparaîtra tout simplement pas.

Choisir les dimensions : rastériser grand, réduire ensuite

Agrandir un vecteur ne coûte rien, mais agrandir un raster le dégrade toujours. La bonne méthode consiste donc à rastériser une seule fois à la plus grande taille dont un consommateur aura besoin — disons 4x la taille nominale du design — et à produire les variantes plus petites en réduisant ce PNG maître, opération quasiment sans perte. Faire l'inverse (exporter petit, puis agrandir) jette des détails que le SVG aurait fournis gratuitement. Comme le PNG est compressé sans perte, le seul vrai coût d'un export généreux est l'espace disque.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.