Ne recopiez pas automatiquement les valeurs du viewBox dans les champs de largeur et de hauteur. Partez du plus grand affichage prévu, gardez le rapport d’aspect et testez le PNG dans son contexte.
SVG → PNG
Distinguer les coordonnées SVG des pixels PNG
Un SVG décrit des formes, des tracés, du texte et d’autres éléments au moyen de coordonnées et d’instructions de dessin. Les quatre valeurs du viewBox indiquent l’origine, la largeur et la hauteur d’un rectangle interne. Elles servent à mettre l’illustration en correspondance avec une zone d’affichage, mais n’imposent pas au PNG de posséder le même nombre de pixels. Le même SVG peut être rendu sous forme de petite icône, d’illustration dans une documentation ou de grand visuel, sans modifier son viewBox.
Le PNG enregistre au contraire le résultat sur une grille fixe. Une fois exporté, son agrandissement ne recalcule pas les courbes comme le ferait le SVG : il rééchantillonne les pixels disponibles. Copier mécaniquement un viewBox de 100 par 100 dans une sortie de 100 par 100 peut donc produire un fichier trop petit pour une grande insertion ou inutilement lourd pour une miniature. Avant la conversion, notez la plus grande taille d’affichage, les éventuels zooms et le besoin de netteté sur un écran dense.
- Lire le viewBox comme des coordonnées internes
- Noter la taille maximale d’affichage avant l’export
La capacité de mise à l’échelle appartient au SVG source ; le PNG exporté possède une grille fixe.
Remonter depuis la destination réelle
Commencez par la largeur et la hauteur auxquelles l’image sera vraiment affichée. Un visuel présenté sur 200 pixels CSS peut utiliser une source bitmap plus grande pour rester net sur un écran à forte densité, mais le multiplicateur pertinent dépend du produit et des contraintes de diffusion. Une sortie plus grande offre une marge d’échantillonnage, tout en augmentant souvent le poids et le traitement. Testez une valeur raisonnable au lieu de choisir sans contrôle le maximum proposé.
Si l’illustration a plusieurs destinations, listez-les séparément. Un pictogramme de barre d’outils de 24 pixels, une figure de 300 pixels dans un guide et un visuel de diapositive n’ont pas les mêmes besoins. Préparez plusieurs versions lorsqu’un fichier unique surdimensionné gaspillerait des ressources ou qu’un petit fichier serait étiré. Indiquez les dimensions dans le nom des variantes validées et conservez leur usage, afin d’éviter qu’une version d’icône soit placée par erreur dans un grand emplacement.
- Définir séparément les tailles web, application, document et diapositive
- Préparer plusieurs sorties lorsque les usages diffèrent fortement
Une dimension utile découle d’un emplacement connu, pas d’un nombre rond choisi sans contexte.
Préserver les proportions et examiner l’espace interne
Lorsque le rapport du viewBox diffère de celui du rectangle PNG, le moteur doit résoudre l’écart. Selon le fichier et les réglages, il peut préserver tout le dessin en ajoutant de l’espace, recadrer une partie ou étirer les formes. Ne modifiez pas indépendamment largeur et hauteur, sauf si la déformation est voulue. Calculez le rapport d’origine, faites évoluer les deux mesures ensemble, puis observez le résultat, car le convertisseur n’applique pas nécessairement la règle supposée.
Il faut aussi distinguer la taille du canevas de la zone réellement occupée par le dessin. Un viewBox étendu peut contenir de grandes marges : augmenter le PNG laissera alors le symbole visible relativement petit. Si vous maîtrisez le SVG, corrigez l’espace superflu dans la source. Sinon, envisagez un recadrage vérifié après rasterisation, sans supprimer une ombre ou une respiration intentionnelle. Ajouter des pixels ne retire pas les marges internes et ne corrige pas automatiquement un mauvais recadrage.
- Aligner le rectangle de sortie sur le rapport d’origine
- Contrôler séparément le canevas et les limites du dessin
Faire varier largeur et hauteur dans le même rapport évite les déformations involontaires.
Tester les traits fins, les textes et les ressources liées
Des traits parfaitement lisses en vectoriel peuvent tomber entre les limites de pixels lors d’une petite rasterisation et sembler flous ou irréguliers. Les minuscules textes et les espaces étroits risquent également de se fermer. Examinez le PNG à sa taille finale, pas uniquement avec un fort zoom. Si la plus petite version perd son sens, simplifiez le dessin, renforcez traits et espacements, augmentez la sortie lorsque c’est raisonnable ou créez une variante dédiée aux petites tailles.
Certains SVG dépendent de polices, d’images externes, de feuilles de style, de masques ou d’effets présents dans un aperçu mais indisponibles pour le convertisseur. Une police substituée peut modifier les césures et les proportions ; une image liée non chargée peut disparaître. Comparez le PNG avec un rendu de référence. Pour un mot-symbole, vérifiez chaque lettre ; pour une illustration, confirmez la présence des images, dégradés, masques et ombres. Des dimensions exactes ne compensent jamais une dépendance manquante.
- Examiner traits et textes à leur taille d’usage
- Confirmer le rendu des polices et images liées
Une largeur et une hauteur correctes ne garantissent pas la fidélité si des ressources du SVG manquent.
Valider le PNG téléchargé dans son contexte
Traitez d’abord un SVG représentatif avec l’outil de conversion SVG vers PNG et les dimensions retenues. Téléchargez le résultat, puis ouvrez-le dans un autre visualiseur afin de confirmer sa largeur et sa hauteur réelles. Contrôlez les proportions, marges, coupures, couleurs, textes et l’uniformité des traits. Si la transparence est nécessaire, placez le PNG sur des fonds clairs et foncés pour repérer un aplat blanc inattendu ou un halo. L’aperçu du convertisseur ne remplace pas l’examen du fichier enregistré.
Insérez ensuite exactement ce PNG dans la page, l’application ou le document de destination. Vérifiez les plus petite et plus grande tailles prévues, ainsi que tout agrandissement imposé par le système. Si le rendu paraît doux, déterminez si la cause vient d’un manque de pixels, d’une police ou image modifiée pendant l’export, ou d’un redimensionnement ultérieur. Nommez les versions validées avec leurs dimensions et gardez le SVG pour produire proprement de nouvelles tailles.
Avant un traitement en lot, refaites le test avec un second SVG contenant un autre type de détail. Un fichier chargé de texte et une icône simple peuvent réagir différemment à la même dimension. Notez la taille, le fond et les emplacements approuvés. Un contrôle dans au moins un navigateur ou visualiseur représentatif aide aussi à distinguer un défaut d’export d’une interpolation propre à l’environnement d’affichage.
- Confirmer les dimensions dans le fichier téléchargé
- Placer la même sortie dans les destinations minimale et maximale
Ne validez le PNG qu’après l’avoir vu dans l’environnement où le public le consultera.
À retenir
- Le viewBox définit un rectangle de coordonnées internes, pas un nombre obligatoire de pixels.
- Choisissez la sortie d’après la plus grande taille d’affichage réelle et la densité nécessaire.
- Conservez le rapport d’aspect sauf si le recadrage ou la déformation sont intentionnels.
- Après l’export, vérifiez traits, textes, ressources externes, marges et transparence.
Questions fréquentes
Si le viewBox mesure 100 par 100, le PNG doit-il faire 100 par 100 pixels ?
Non. Le viewBox définit des coordonnées internes. Les dimensions du PNG se choisissent au rendu selon l’usage et la densité d’affichage.
Un PNG plus grand est-il toujours plus net ?
Pas toujours. Davantage de pixels peut aider pour un grand affichage, mais les dépendances du SVG, le redimensionnement ultérieur et la finesse du dessin comptent aussi.
Que se passe-t-il si je change séparément largeur et hauteur ?
Le rapport d’aspect change, ce qui peut étirer, recadrer ou ajouter de l’espace. Conservez-le sauf si cette modification est intentionnelle.
Pourquoi le dessin semble-t-il petit dans un grand PNG ?
Le viewBox peut inclure beaucoup d’espace interne. Examinez les limites réelles des formes, pas seulement les dimensions du canevas.
Que faut-il vérifier après la conversion ?
Contrôlez dimensions, proportions, marges, recadrage, transparence, textes, traits et ressources liées, puis testez le fichier à sa destination réelle.