Du vectoriel aux pixels
Le SVG décrit une image sous forme de formes et de tracés, ce qui lui permet de rester net à toutes les tailles. C'est parfait pour les sites web, mais beaucoup d'endroits ne l'acceptent pas : réseaux sociaux, messageries, documents bureautiques, signatures d'e-mail, fiches d'applications et nombre de formulaires veulent une image classique.
La conversion en PNG transforme le dessin en pixels à une taille fixe en gardant le fond transparent. Pour que les petites icônes restent nettes, ce convertisseur rend tout SVG dont le plus grand côté fait moins de 1024 pixels à 1024 pixels, et garde les dessins plus grands à leur taille déclarée, jusqu'à 8192 pixels.
SVG ou PNG : comparaison rapide
| Caractéristique | SVG | PNG |
|---|---|---|
| Nom complet | Scalable Vector Graphics | Portable Network Graphics |
| Type | Image vectorielle écrite en XML | Image matricielle |
| Création | 2001 | 1996 |
| Créé par | W3C | PNG Development Group (recommandation du W3C) |
| Compression | Aucune (texte brut, éventuellement SVGZ compressé en gzip) | Sans perte (DEFLATE) |
| Transparence | Oui | Oui, canal alpha complet |
| Animation | Oui, avec CSS ou SMIL | Uniquement via l'extension APNG |
| Profondeur de couleur | Toute couleur, définie dans le code | Jusqu'à 48 bits plus alpha, ou palette 8 bits |
| Idéal pour | Logos, icônes et illustrations qui doivent s'agrandir sans flou | Captures d'écran, logos et graphismes aux bords nets |
| Compatibilité | Tous les navigateurs et outils de design ; refusé par la plupart des formulaires photo | Universelle : tous les navigateurs, systèmes et éditeurs |
| Type MIME | image/svg+xml | image/png |
Comment convertir un SVG en PNG
Étape 1: Choisissez le SVG
Déposez un fichier .svg exporté de Figma, Illustrator, Inkscape ou d'une bibliothèque d'icônes.
Étape 2: Gardez PNG comme sortie
PNG est présélectionné. JPG et WebP sont aussi disponibles si la transparence n'est pas nécessaire.
Étape 3: Convertissez
Votre navigateur dessine le SVG à la taille calculée sur un canvas transparent et l'enregistre en PNG.
Étape 4: Téléchargez
Utilisez le PNG dans vos documents, présentations, publications ou partout où le SVG est refusé.
Comment le SVG est rendu
Taille lue dans le fichier
Les attributs width et height sont utilisés, ou la viewBox s'ils sont absents.
Petites icônes agrandies
Les dessins de moins de 1024 px sur leur plus grand côté sont rendus à 1024 px pour des contours nets.
Fond transparent
Les zones que le SVG ne peint pas restent transparentes dans le PNG.
Rendu par votre navigateur
Le moteur qui affiche le SVG sur une page web dessine aussi le PNG.
Quand un PNG remplace le SVG
Réseaux sociaux et messageries. Instagram, LinkedIn ou WhatsApp n'acceptent pas les SVG.
Documents bureautiques. Les anciennes versions de Word, PowerPoint et Google Slides gèrent mieux le PNG.
Signatures d'e-mail. La plupart des clients mail bloquent ou ignorent les images SVG.
Icônes d'applis et visuels de store. Les stores et outils de build exigent généralement des PNG à des tailles précises.
Obtenir la taille voulue
Le SVG n'ayant pas de résolution fixe, il faut choisir la taille du PNG. Ce convertisseur lit la taille déclarée par le designer dans le fichier. Une icône de 24 sur 24 est agrandie à 1024 sur 1024 pour rester utilisable en grand, tandis qu'une illustration de 2000 pixels de large garde ses 2000 pixels.
Besoin d'une taille exacte, comme 512 sur 512 pour une icône d'appli ou 32 sur 32 pour un favicon ? Convertissez ici puis utilisez le redimensionneur, ou générez un jeu complet de favicons avec le générateur de favicon, qui réduit par étapes pour des petites icônes nettes.
Pourquoi un SVG peut s'afficher différemment
Les navigateurs rendent les SVG en mode sécurisé lorsqu'ils sont dessinés comme images. Les ressources externes sont bloquées : un SVG qui charge des polices web ou des images distantes peut afficher une police de remplacement ou des images manquantes. Vectoriser le texte dans votre outil de design évite ce problème.
Les scripts et fonctions interactives du SVG sont aussi ignorés, et les animations CSS sont capturées dans leur état initial. Filtres, dégradés, masques et tracés de découpe sont pris en charge comme sur une page web.
- Vectorisez ou intégrez les polices avant d'exporter le SVG.
- Intégrez les images matricielles en data URL plutôt que par lien.
- Vérifiez le PNG s'il manque des éléments quand le SVG vient du web.
Conseils pour des conversions SVG propres
- Vérifiez que le SVG possède une viewBox ; elle indique au moteur comment mettre le dessin à l'échelle.
- Supprimez les calques masqués et les plans de travail inutilisés avant l'export.
- Pour un fond uni, convertissez plutôt en JPG, qui remplit les zones transparentes de blanc.
- Gardez le SVG comme fichier source et générez des PNG à chaque nouvelle taille nécessaire.
Questions sur la conversion SVG en PNG
Quelle taille aura mon PNG ?
La taille déclarée dans le SVG, ou 1024 pixels sur le plus grand côté si le SVG est plus petit. Les très grands dessins sont plafonnés à 8192 pixels.
Le fond est-il transparent ?
Oui. Tout ce que le SVG ne peint pas reste transparent dans le PNG.
Pourquoi mon texte n'a-t-il pas la bonne police ?
Un SVG dessiné comme image ne peut pas charger de polices web externes. Vectorisez le texte ou intégrez la police avant d'exporter le SVG.
Les scripts du SVG sont-ils exécutés ?
Non. Le SVG est rendu comme une image statique, sans scripts, ce qui est aussi plus sûr.
Puis-je définir une résolution personnalisée ?
Pas directement ici. Convertissez d'abord, puis utilisez le redimensionneur pour fixer des dimensions exactes.
Le SVG est-il envoyé ?
Non. Votre navigateur rend et encode l'image localement.