Convertir SVG en PNG

Figer une résolution qui ne l'a jamais été

Un SVG n'a ni pixels ni taille. C'est un ensemble d'instructions de dessin — ce tracé, ce remplissage, cette courbe —, ce qui explique qu'il reste net à n'importe quel grossissement et qu'un logo doive rester en SVG le plus longtemps possible. Rastériser, c'est s'engager pour toujours sur une taille. Choisissez donc la taille correspondant au plus grand emplacement où l'image apparaîtra, et n'oubliez pas qu'un écran de densité double ou triple demande deux ou trois fois plus de pixels : une icône affichée à 64 points nécessite 192 pixels pour être nette sur un téléphone récent.

C'est le texte qui pose le plus souvent problème, et la raison mérite d'être comprise. Un SVG dit « compose cette chaîne en Helvetica Neue » ; si la machine qui fait le rendu n'a pas Helvetica Neue, une autre police est substituée et la mise en page se décale — un titre qui tenait dans son cadre en déborde. Une police web référencée par URL ne se charge pas du tout ici, car un SVG rendu comme une image est volontairement isolé et ne peut pas accéder au réseau. La solution est celle que tout graphiste finit par apprendre : vectoriser le texte avant l'export, pour que les lettres deviennent des tracés qui n'ont besoin d'aucune police.

Cette même isolation explique les autres surprises. Une image bitmap liée — un élément image qui pointe vers un .png situé ailleurs — ne s'affiche pas. Les scripts ne s'exécutent pas : un SVG qui se dessine en JavaScript sort vide ou à moitié construit. Les animations déclaratives sont rendues dans leur état initial, c'est-à-dire une image fixe de la première frame. Tout ce qui est autonome fonctionne parfaitement : dégradés, filtres, tracés de découpe, masques, images intégrées en data URI et effets de flou s'affichent tous comme prévu.

Le PNG est la bonne destination, et le JPEG ne le serait pas. Un graphisme vectoriel, ce sont des aplats et des bords nets — exactement ce que le PNG compresse bien et que le JPEG abîme, chaque bord net recevant un halo en JPEG. La transparence passe sous forme de véritable couche alpha : un logo exporté à la bonne taille se pose sur n'importe quel fond. Si le SVG ne déclare aucune dimension, seulement une viewBox, le rapport largeur/hauteur en découle et la taille est à votre choix.

Si vous cherchez autre chose

resvg et rsvg-convert font le rendu des SVG en ligne de commande avec une vraie pile de polices disponible, si bien que le texte s'affiche dans la police prévue et non dans un substitut — rsvg-convert -w 512 in.svg -o out.png, c'est toute la commande. Inkscape --export-type=png --export-dpi=300 est l'implémentation la plus complète de la spécification qui existe, et gère les filtres et modes de fusion que les moteurs plus légers ne font qu'approcher.

Avant même de rastériser, vérifiez que quelque chose a vraiment besoin d'un PNG. Tous les navigateurs affichent nativement le SVG depuis plus de dix ans, et pour un logo ou une icône sur un site web, le SVG est plus léger, infiniment net et stylable en CSS. Les cas qui exigent vraiment des pixels sont moins nombreux qu'on ne le pense : favicons, images d'aperçu pour les réseaux sociaux, e-mails, visuels pour les boutiques d'applications et logiciels qui ne lisent pas le vectoriel.