Exporter un SVG : choisir la bonne taille de PNG
Le SVG s’adapte à toute taille, mais le PNG est une grille fixe. Exportez à la taille maximale prévue pour que l’image reste nette partout.
Le SVG s’adapte, le PNG non
Un SVG stocke des formes et des coordonnées : il peut donc être dessiné à toute taille sans perdre en netteté. Un PNG stocke un nombre fixe de pixels : l’agrandir adoucit donc l’image.
Lorsqu’une plateforme exige un PNG au lieu d’un SVG, la taille d’export détermine jusqu’à quelle dimension l’image peut apparaître avant de devenir floue.
Déterminer la taille en pixels nécessaire
Déterminez la taille maximale à laquelle l’image sera affichée, puis multipliez par un facteur tenant compte des écrans haute densité. Un logo affiché sur 200 pixels de large sur un écran de téléphone nécessite environ 400 pixels de source pour rester net.
Si l’illustration doit aussi être imprimée, partez plutôt de la taille d’impression : multipliez la largeur souhaitée en pouces par au moins 150 à 300 pour obtenir la largeur en pixels nécessaire au PNG. Sans calcul, les exports ont tendance à être inutilement lourds ou visiblement flous.
Choisissez une taille couvrant le plus grand usage
Pensez au plus grand emplacement où l’image apparaîtra — une bannière principale, une affiche imprimée ou un écran haute résolution. Exportez au moins à cette taille pour que le PNG n’ait jamais besoin d’être agrandi.
Pour les logos et les icônes, exporter à deux fois la taille d’affichage maximale donne un résultat net sur les écrans haute densité tout en gardant un fichier raisonnable.
Écrans haute densité et Retina
Les téléphones et ordinateurs portables modernes regroupent deux ou trois pixels physiques dans chaque pixel de mise en page. Un PNG exporté uniquement à la taille de mise en page paraîtra doux sur ces écrans : c’est pourquoi exporter à deux fois la largeur d’affichage maximale est une règle courante.
Au-delà d’environ trois fois la taille d’affichage, les pixels supplémentaires alourdissent le fichier sans bénéfice visible : il y a donc peu de raisons d’exporter plus grand.
Maîtriser la taille du PNG exporté
Si le PNG est trop lourd, réduisez d’abord les dimensions d’export : la dimension a l’effet le plus fort sur la taille du fichier, et le PNG n’a aucun curseur de qualité à baisser. Simplifier les détails superflus de l’illustration source aide également.
Un PNG sans perte d’une illustration complexe peut rester volumineux. Dans ce cas, un export WEBP de haute qualité est souvent plus léger tout en conservant les mêmes contours nets.
Fonds et transparence
Une illustration SVG a généralement un fond transparent, et le PNG préserve cette transparence, ce qui est exactement ce que vous voulez pour un logo placé sur différentes couleurs. Si l’image ne sera jamais posée que sur un seul fond, le PNG peut aussi être exporté aplati.
Aplatir sur la couleur de fond finale évite qu’un liseré blanc ou noir n’apparaisse plus tard autour de l’illustration. Décidez d’abord de la destination, puis exportez une seule fois avec le bon fond.
PNG ou JPG pour l’export
La plupart des illustrations SVG contiennent des lignes nettes, des aplats de couleur et souvent de la transparence, ce qui indique le PNG. Le format sans perte garde ces contours propres.
N’utilisez le JPG que pour les illustrations vectorielles à caractère essentiellement photographique, comme les illustrations exportées avec des dégradés doux et sans transparence.