Ce que fait l’outil
Cet outil transforme du code SVG ou un fichier .svg en image PNG, JPG ou WebP. Collez le balisage, déposez un fichier, choisissez une échelle ou une largeur exacte, et téléchargez l’image matricielle. Le rendu se fait dans votre navigateur : icônes, logos et schémas ne quittent jamais votre machine.
C’est utile partout où le SVG n’est pas accepté : icônes d’application, images pour les réseaux sociaux, présentations, documents, signatures d’e-mail ou anciens logiciels. Un aperçu en direct sur un damier vous montre exactement quelles parties sont transparentes.
Mode d’emploi
- Collez votre code
<svg>dans l’éditeur, cliquez sur Importer pour ouvrir un fichier, ou faites-en glisser un sur la page. Exemple charge un petit logo. - Choisissez une taille : 1× utilise les dimensions propres du SVG, 2×–4× les multiplient. Ou saisissez une largeur personnalisée en pixels ; la hauteur suit les proportions.
- Choisissez le format : PNG pour une sortie sans perte avec transparence, JPG pour les photos et la compatibilité, WebP pour des fichiers légers.
- Choisissez le fond : transparent, blanc ou n’importe quelle couleur.
- Cliquez sur Télécharger. La ligne sous l’aperçu indique la taille finale en pixels, le format et le poids du fichier.
Comment la taille est calculée
L’outil examine l’élément racine <svg>. Les attributs width et height en px, pt, mm, cm, in ou em sont convertis en pixels. S’ils sont absents ou exprimés en pourcentages, la largeur et la hauteur du viewBox sont utilisées à la place. L’échelle ou la largeur personnalisée choisie est ensuite appliquée, et le SVG est réécrit avec des tailles explicites en pixels pour que tous les navigateurs le dessinent de la même façon.
Exemple
Une icône avec viewBox="0 0 24 24" et sans largeur ni hauteur devient un PNG de 24 × 24 à 1×. À 4×, elle fait 96 × 96, et avec une largeur personnalisée de 512, elle devient un PNG de 512 × 512 adapté à une icône d’app store, toujours parfaitement net puisqu’il est rendu à partir des vecteurs au lieu d’être agrandi.
Astuces
- Un XML invalide est signalé avec un numéro de ligne, pour aller directement au problème.
- Les images matricielles intégrées (
<image href="data:...">) fonctionnent ; les liens externes non. - Le texte utilise les polices installées sur votre ordinateur. Pour un résultat identique au pixel près partout, convertissez d’abord le texte en contours dans votre outil de design.
- La sortie maximale est limitée par la taille de canvas du navigateur, environ 16 000 pixels par côté.
FAQ
› Le SVG est-il envoyé quelque part ?
Non. Votre navigateur dessine le SVG sur un canvas et enregistre le résultat. Le code et l'image restent sur votre appareil.
› Comment obtenir un PNG plus net ?
Choisissez une échelle 2×, 3× ou 4×, ou saisissez une largeur exacte. Le SVG est un format vectoriel : le rendre à une taille plus grande donne des contours nets sur les écrans haute densité. 2× est un bon choix par défaut pour les écrans Retina.
› Pourquoi certaines images ou polices manquent-elles dans le résultat ?
Par sécurité, les navigateurs ne chargent pas les fichiers externes (images liées, polices web, CSS) quand un SVG est dessiné comme image. Intégrez les images en data URL et convertissez le texte en tracés, ou utilisez des polices système.
› Puis-je garder le fond transparent ?
Oui. Choisissez Transparent avec une sortie PNG ou WebP. Le JPG n'a pas de transparence : les zones transparentes sont remplies de blanc ou de la couleur choisie.
› Mon SVG n'a ni largeur ni hauteur. Quelle taille est utilisée ?
L'outil lit le viewBox et utilise sa largeur et sa hauteur. Si ni taille ni viewBox ne sont présents, il se rabat sur la taille par défaut du navigateur, 300 × 150, et le signale.