SVG en PNG
PNG est le bon format quand un SVG doit être livré comme image bitmap : captures pour boutiques d’apps, bannières README, images OG, maquettes UI ou visuels d’e-mail. Ce convertisseur rend le SVG dans votre navigateur, applique le facteur d’échelle choisi et conserve le canal alpha afin que les icônes transparentes et les avatars ronds ne récupèrent pas un carré blanc.
Comment exporter un SVG en PNG
-
1
Chargez votre SVG
Importez un fichier ou collez directement le balisage SVG. Le navigateur rend le CSS en ligne et les blocs <style>.
-
2
Réglez l’échelle
Choisissez un facteur d’échelle de 1x à 10x. La taille de sortie vient de la largeur, de la hauteur ou du viewBox du SVG avant mise à l’échelle.
-
3
Vérifiez l’aperçu transparent
L’aperçu conserve la transparence alpha. Si un fond uni est nécessaire, ajoutez cette forme de fond dans le SVG avant export.
-
4
Téléchargez le PNG
Enregistrez image.png depuis le canvas côté navigateur. Votre balisage SVG n’est pas envoyé à un serveur.
Tailles de sortie courantes et usages
| Usage | Taille PNG typique | Remarques |
|---|---|---|
| Icône maître d’app (iOS/Android) | 1024 × 1024 | Utilisez un SVG carré ; les stores demandent généralement un fond opaque |
| Carte OG/sociale | 1200 × 630 | Placez le fond de marque dans le SVG avant export |
| En-tête README ou documentation | 1280-1600 de large | Conservez la transparence pour les thèmes GitHub clairs et sombres |
| Élément de diapositive ou présentation | 1920 de large | Exportez en 2x si l’image sera projetée ou agrandie |
| En-tête ou hero d’e-mail | 600-1200 de large | Compressez le résultat et gardez-le sous 200 KB si possible |
Pourquoi un SVG peut changer d’aspect après export
- Dimensions fractionnaires. Exporter en 33.5 px force un arrondi sous-pixel. Utilisez des nombres entiers, idéalement des multiples de 8.
- Polices manquantes. Si le SVG référence une police indisponible dans le navigateur, celui-ci la remplace et le crénage peut bouger. Convertissez le texte en tracés pour un export plus fiable.
- Références externes. Un
<image href="...">pointant vers une URL distante peut être bloqué ou contaminer le canvas. Intégrez la ressource en base64 avant la conversion. - Filtres et ombres. Les flous et ombres portées se calculent en unités utilisateur ; un export en 3x peut donc adoucir les ombres. Ajustez les valeurs de filtre dans le SVG source si nécessaire.
- Aucune taille explicite. Si un SVG n’a ni width, ni height, ni viewBox, l’outil utilise 300 × 150 px avant d’appliquer le facteur d’échelle.
Conseils rapides
- Exportez en 2x ou 3x pour les écrans haute densité, puis laissez CSS ou votre mise en page réduire le PNG.
- Gardez la transparence pour les icônes et logos ; ajoutez d’abord un rectangle au SVG si la destination exige une couleur unie.
- Passez le PNG dans un compresseur d’images pour supprimer les métadonnées et recompacter la palette.
- Pour les très grands visuels, réduisez le facteur d’échelle avant téléchargement, car PNG stocke chaque pixel.
Questions fréquentes
L’outil utilise un facteur d’échelle. Définissez d’abord width, height ou viewBox dans le SVG, puis choisissez l’échelle qui donne la taille PNG voulue.
Oui, il utilise le moteur de rendu SVG du navigateur. Pour un résultat plus constant, intégrez les images externes et convertissez le texte important en tracés avant export.
SVG décrit des instructions de dessin ; PNG est une grille de pixels. Un export en 4000 × 4000 px stocke 16 millions de pixels avec des données RGBA, donc réduire l’échelle peut fortement alléger le fichier.
Non. Le fichier ou le balisage collé est lu et rendu localement via le HTML canvas dans votre navigateur.
Outils similaires
Éditeur de photos
Éditeur de photos dans le navigateur avec recadrage, rotation, luminosité, contraste, saturation, filtres, texte superposé et export en JPG, PNG ou WebP.
Générateur de codes-barres
Créez des codes-barres 1D scannables en Code 128, Code 39, EAN-13, UPC-A, ITF-14 et Codabar. Exportez au format PNG, SVG ou PDF pour l'impression.
Générateur de mèmes
Créez des mèmes avec des modèles comme Drake, Distracted Boyfriend ou Doge, ou importez votre propre image. Texte haut/bas, police Impact, contour et ombre.
Redimensionneur d’images
Redimensionnez des images à des dimensions exactes en pixels ou en pourcentage tout en gardant les proportions. Pratique pour les lots, sans envoi de fichier.
Vectoriseur PNG vers SVG
Tracez des images PNG matricielles en chemins SVG dans le navigateur. Idéal pour les logos, icônes et dessins au trait. Réglez le seuil, le nombre de couleurs et le lissage.
Créateur de GIF
Transformez une série d'images ou une courte vidéo en GIF animé. Réglez la fréquence d'images, les boucles et la taille avant l'export.