Aller au contenu principal
ToolsByUs

SVG vers PNG

SVG vers PNG convertit des dessins vectoriels en bitmap à n’importe quelle taille en pixels, dans votre navigateur. Le dessin est re-rastérisé par le moteur vectoriel du navigateur lui-même, à la taille demandée : un export en 4× est donc réellement net en 4×, et non une copie agrandie d’un rendu plus petit.

100 % local
Largeur
Échelle
Format
Code SVG
249 B5 lignesLig. 1, Col. 1
Aperçu512 × 512 · source 64×64

Création…

Comment fonctionne SVG vers PNG ?

Un SVG n’a pas de pixels. Il a un viewBox, un ensemble de formes et un ensemble de règles pour transformer ces formes en pixels — et ces règles sont appliquées par ce qui le rend, à la taille demandée. C’est là toute la valeur de la conversion : le navigateur rastérise les vecteurs à votre résolution cible, si bien que 1024 pixels d’un dessin de 64 pixels sont réellement 1024 pixels de détail, et non un agrandissement de 16× d’un rendu de 64 pixels.

La question de la taille, qui n’a pas toujours de réponse

Un dessin peut déclarer width="100%", déclarer seulement un viewBox, ou ne rien déclarer du tout. Les trois sont valides, et aucun ne dit au moteur de rendu quelle taille en pixels employer. Le viewBox est donc lu quand il n’y a pas d’attributs utilisables, le rapport d’aspect en est tiré, et quand il n’y a rien à lire, l’outil dit quelle valeur il a inventée au lieu de deviner en silence.

Ce qui ne survit pas au voyage, et pourquoi

Le dessin est chargé comme une image, ce qui en fait un document isolé. Les scripts qu’il contient ne s’exécutent jamais — c’est la propriété de sécurité qui rend ce service offrable du tout — et rien de ce qui exige un contexte de navigation ne passe non plus :

  • Les références externes ne se chargent pas. <image href="photo.png">, un @import dans un <style>, une police web depuis un CDN : tout est abandonné. Un logo qui dépend d’une police distante se rend dans une police de repli.
  • foreignObject se rend de façon incohérente. Certains moteurs dessinent le HTML qu’il contient, d’autres le laissent vides.
  • Les propriétés personnalisées CSS de la page ne l’atteignent pas. currentColor se résout à la couleur initiale, généralement le noir.

Le remède au premier point est d’intégrer les ressources dans le SVG avant la conversion — un changement d’une ligne dans la plupart des chaînes de build, une édition manuelle dans le cas contraire.

Choisir un format

PNG pour tout ce qui comporte de la transparence ou des aplats — c’est la plupart des dessins vectoriels. WebP quand le fichier va sur un site et que l’on veut le fichier le plus léger — le support est aujourd’hui universel. JPEG seulement quand l’arrière-plan est opaque et que le dessin a un caractère photographique, car il n’a pas de canal alpha et un canvas transparent encodé en JPEG ressort noir.

SVG

<svg viewBox="0 0 64 64" width="64" height="64">…</svg>

PNG

drawing-512.png
512 × 512 pixels
transparent background
9.4 KB

Quelles options et quels cas limites SVG vers PNG prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
Largeurpixels512La largeur de sortie. La hauteur suit le rapport d’aspect propre au dessin, tiré de son viewBox — un dessin en 2:1 large de 512 pixels fait donc 256 pixels de haut.
Échelle1× | 2× | 3× | 4×1×Multiplie la largeur. Utile pour un asset retina : 512 en 2× fait 1024 pixels, ce que doit contenir un nom de fichier @2x.
FormatPNG | WebP | JPEGPNGPNG conserve la transparence et est sans perte. WebP est plus léger à qualité égale. JPEG n’a pas de canal alpha du tout : un fond transparent est donc peint en uni avant l’encodage.
Arrière-plantransparent | couleurtransparentTransparent pour PNG et WebP. Toute autre valeur peint d’abord la couleur — ce qui est indispensable pour JPEG, et utile quand le dessin suppose une page claire derrière lui.
Taille intrinsèquedétectéeattributs, puis viewBoxLue depuis width/height, avec repli sur le viewBox. Quand ni l’un ni l’autre n’existe, l’outil le dit, parce que la taille utilisée est alors une invention plutôt que celle du dessin.
Ressources externesnon chargéesécartéesLes images liées, les polices web et les feuilles de style importées ne se résolvent pas dans un contexte d’image. Intégrez-les d’abord dans le SVG si le dessin en dépend.
Scriptsjamais exécutés—Le script contenu dans le SVG n’est pas exécuté. C’est une propriété de sécurité plutôt qu’une limitation, et c’est pourquoi le dessin est chargé comme une image plutôt qu’injecté dans la page.
Plafond de sortiepixels4096 × 4096Au-delà d’environ 16 mégapixels, l’allocation du canvas échoue sur un téléphone au lieu d’être simplement lente ; l’export est donc refusé avec un message plutôt que de produire un fichier vide.

Questions fréquentes

Le PNG sera-t-il net en 4× ?

Oui, et c’est ce qui le distingue d’un redimensionnement. Le SVG est remis au navigateur à la taille cible en pixels, si bien que le moteur vectoriel rastérise chaque courbe à cette résolution. Agrandir un rendu plus petit interpolerait entre les pixels existants et produirait des bords mous ; ici, c’est du détail nouveau qui apparaît. La seule limite tient à la façon dont le dessin est conçu — un trait d’exactement une unité s’amincit à mesure que le canvas grandit.

Ma police web ne s’est pas affichée. Pourquoi ?

Parce que le dessin est chargé comme une image, et une image est un document isolé : elle ne peut aller chercher ni police, ni image, ni feuille de style. Un @font-face distant est abandonné et le texte retombe sur une police système. Pour garder la typographie, convertissez le texte en contours dans votre éditeur, ou incorporez la police en data URI base64 dans le SVG avant de convertir.

Pourquoi mon SVG transparent est-il noir dans la sortie JPEG ?

Parce que JPEG n’a pas de canal alpha. Un canvas neuf est transparent, et un pixel transparent n’a rien à encoder, si bien qu’il ressort noir — la plainte la plus commune au sujet de tous les convertisseurs SVG vers JPEG. L’option d’arrière-plan peint ici une couleur d’abord, précisément pour cette raison. Si vous avez besoin de transparence, utilisez PNG ou WebP.

À quelle taille exporter ?

La taille à laquelle il sera affiché, multipliée par le device pixel ratio des écrans où il apparaîtra. Une icône de 24 pixels montrée sur un écran 2× veut un fichier de 48 pixels. Une illustration de héros qui couvre 800 pixels CSS sur un écran retina veut 1600. Exporter en 4096 « par sécurité » coûte de la bande passante à chaque chargement de page et n’apporte rien qu’un fichier correctement dimensionné n’ait déjà.

L’outil dit avoir inventé une taille. Qu’est-ce que cela signifie ?

Que le SVG n’a ni width, ni height, ni viewBox, donc aucun moyen de savoir quelle est sa forme. 512×512 est supposé pour que l’export produise quelque chose au lieu d’échouer, et l’interface indique la valeur employée, pour que vous puissiez régler la largeur vous-même. Ajouter un viewBox à la source est la vraie correction, et cela tient en une ligne.

Mon dessin est-il envoyé ?

Non. Le SVG est encodé en data URL, rendu par le canvas de votre propre navigateur, puis encodé en PNG dans l’onglet — le panneau Réseau n’affiche aucune requête. C’est important pour les dessins que l’on convertit ici, souvent des logos et des éléments de marque pas encore publiés.

Équipe ToolsByUs · Comment nous vérifions nos outils