Sharp SVG vers PNG : taille, densité et netteté

Pour une chaîne Sharp actuelle, pars du SVG à chaque export et appelle resize() avec la largeur en pixels réellement nécessaire. Pour un fichier 2x, demande deux fois plus de pixels en sortie. Ne crée pas d’abord un petit PNG pour ensuite l’agrandir. Évite aussi de copier une ancienne correction density dans chaque chaîne : notre test Sharp 0.34.4 a rendu les mêmes pixels avec ou sans densité d’entrée plus élevée.

Génère un PNG 1x et 2x à partir du SVG

Le constructeur Sharp accepte un fichier ou un tampon SVG, et son API resize définit les dimensions de sortie. Pour une icône carrée de 64 unités affichée à 256 pixels CSS, exporte un PNG de 256 pixels pour l’usage 1x et un PNG de 512 pixels pour l’usage 2x :

import sharp from "sharp";
 
const source = "icon.svg";
 
await Promise.all([
  sharp(source).resize({ width: 256 }).png().toFile("icon-1x.png"),
  sharp(source).resize({ width: 512 }).png().toFile("icon-2x.png"),
]);

Omettre la hauteur préserve le rapport de la source selon le comportement habituel de redimensionnement de Sharp. Choisis des largeurs de sortie réelles pour ta destination ; « 2x » désigne les dimensions en pixels par rapport à la taille d’affichage CSS prévue, et non un attribut SVG ou une promesse concernant tous les écrans. Si tu veux voir l’icône à 256 pixels CSS, compare les PNG de 256 et 512 pixels à cette taille d’affichage et détermine si le plus grand fichier justifie son poids.

Notre icône de test originale déclarait width="64" height="64" viewBox="0 0 64 64". Nous l’avons rendue à 64, 512 et 1 024 pixels avec Sharp 0.34.4 fixé dans le dépôt. Les sorties de 512 et 1 024 pixels étaient générées à partir du SVG, possédaient des coins transparents et des centres peints opaques et indiquaient les dimensions demandées. Ces observations concernent cet exemple et cette version ; ce n’est pas un banc d’essai de tous les dessins SVG.

Test original de rendu Sharp 0.34.4

La figure montre concrètement l’échec : une fois la première sortie devenue un PNG de 64 pixels, un redimensionnement ultérieur interpole ces pixels. Il n’y a plus de tracés à redessiner. Dans ce test, nos résultats directs et à densité ajustée de 512 pixels étaient identiques sur tous les canaux RGBA bruts. Le SVG source, le script de rendu et les métadonnées du résultat sont conservés dans le dossier de recherche de l’article.

As-tu besoin de density dans Sharp ?

L’option density du constructeur Sharp contrôle la résolution DPI utilisée à la lecture d’une entrée SVG ou PDF ; sa valeur par défaut documentée est 72. Elle est distincte de la demande d’une largeur finale dans resize(). Tu peux rencontrer d’anciens exemples Sharp augmentant la densité d’entrée pour éviter un agrandissement flou. Ils décrivent un véritable symptôme historique : le ticket Sharp #1421 signale en 2018 un SVG de 32 pixels devenant pixellisé lors d’un agrandissement à 512 pixels. Ils ne prouvent pas que cette solution reste nécessaire dans une installation actuelle.

Nous avons testé exactement cette paire avec Sharp 0.34.4 :

const direct = await sharp("icon.svg")
  .resize({ width: 512 })
  .png()
  .toBuffer();
 
const densityFirst = await sharp("icon.svg", { density: 576 })
  .resize({ width: 512 })
  .png()
  .toBuffer();

Pour notre icône vectorielle de 64 pixels, les deux chaînes ont produit les mêmes pixels RGBA de 512 × 512. Définis la densité d’entrée seulement lorsqu’un fichier précis et ta version installée de Sharp en montrent le besoin, puis répète la comparaison après les mises à jour. Ne considère pas une résolution DPI supérieure comme un interrupteur universel de netteté. La première question utile est de savoir si tu possèdes encore de la géométrie vectorielle au moment où Sharp rend le PNG final.

Si tu travailles aussi avec des PDF, teste cette entrée séparément : cette expérience SVG ne démontre pas le comportement PDF. De même, withDensity() dans la documentation Sharp plus récente décrit les métadonnées DPI de sortie ; c’est une opération différente de la densité de rendu SVG en entrée du constructeur.

Vérifie les dimensions, la transparence et le contenu source

Utilise l’API de métadonnées Sharp sur la sortie au lieu de te fier au zoom d’un aperçu :

const oneX = await sharp("icon-1x.png").metadata();
const twoX = await sharp("icon-2x.png").metadata();
 
console.log({
  oneX: [oneX.width, oneX.height, oneX.hasAlpha],
  twoX: [twoX.width, twoX.height, twoX.hasAlpha],
});

Pour l’exemple carré présenté ici, les dimensions attendues sont 256 × 256 et 512 × 512. hasAlpha indique la présence d’un canal alpha, mais ne prouve pas qu’un coin précis soit transparent ; inspecte le fichier ou échantillonne les pixels si la transparence compte pour la livraison. L’alpha des coins de notre exemple était nul et celui du centre était 255 dans toutes les sorties testées. Un rectangle blanc à l’intérieur du SVG serait, lui, peint dans chaque PNG, quel que soit le format PNG.

Si un nouveau rendu de grande taille reste pixellisé, inspecte le contenu du SVG. La norme SVG autorise un élément <image> qui intègre ou référence une image matricielle. Un fichier peut donc avoir une extension .svg alors que son dessin reste un PNG de faible résolution. Notre guide de détection des images matricielles dans les SVG montre comment vérifier les objets et le XML. Augmenter la largeur de sortie Sharp ne peut pas transformer ces pixels intégrés en tracés.

Vérifie aussi la destination. Un fichier de 512 pixels affiché à 1 024 pixels peut sembler flou. Une visionneuse fortement agrandie au-delà de 100 % révèle la grille PNG même si l’export est correct. Compare à la taille réellement rendue et sur le fond prévu, puis décide si tu dois livrer un PNG plus grand ou le SVG lui-même. Pour le web, le SVG en ligne et le SVG dans un élément image offrent différentes possibilités d’intégration ; aucune n’exige un PNG lorsque la cible prend en charge SVG.

Où intervient PerfectVector

Sharp rastérise un SVG ; il ne reconstruit pas des tracés modifiables à partir d’un PNG. Si ton dessin maître est uniquement une icône ou un logo matriciel, crée et inspecte un SVG avant cette chaîne d’exportation. Le guide des icônes PNG vers SVG pour les kits UI couvre la cohérence géométrique et les contrôles de livraison d’un ensemble. La méthode image vers vecteur PerfectVector peut produire un SVG candidat à partir d’un dessin uniquement matriciel. Ouvre ce résultat, vérifie sa silhouette, ses petits détails et la présence de véritables tracés, puis génère tes PNG 1x et 2x à partir du SVG approuvé. Si tu possèdes déjà un SVG original propre, conserve-le et utilise Sharp directement.

FAQ

Pourquoi ma sortie SVG vers PNG avec Sharp semble-t-elle floue ? Vérifie si la chaîne crée d’abord un petit PNG avant de l’agrandir. Inspecte ensuite le SVG pour repérer un contenu matriciel intégré et compare le PNG livré à sa taille réelle d’affichage. Sur une version actuelle de Sharp, teste le rendu direct du SVG à la taille finale avant d’ajouter une correction de densité d’entrée.

density: 576 est-il nécessaire pour un agrandissement par huit ? Ce n’était pas nécessaire pour notre exemple SVG de 64 à 512 pixels avec Sharp 0.34.4 : le redimensionnement direct et celui à densité ajustée ont produit des pixels RGBA identiques. Ton SVG et ton moteur installé peuvent se comporter différemment : teste donc ces entrées exactes au lieu d’adopter ce nombre comme règle.

Comment créer un PNG transparent 2x ? Rends le SVG à deux fois les dimensions CSS prévues et exporte en PNG. Confirme la largeur et la hauteur obtenues, puis inspecte une zone non peinte pour vérifier sa transparence. Un canevas transparent ne supprime pas une forme de fond déjà présente dans le SVG.

Sources

1. Sharp — Constructeur — Prise en charge des entrées SVG et option density d’entrée.
2. Sharp — Redimensionnement des images — Comportement des dimensions de sortie utilisé dans les exemples.
3. Sharp — Métadonnées d’entrée — Contrôles des dimensions et des métadonnées alpha.
4. Sharp GitHub — Ticket #1421 sur la pixellisation SVG vers PNG — Symptôme historique signalé, explicitement distingué du test actuel à version fixée.
5. Sharp — Options de sortie — Distingue les métadonnées récentes de densité de sortie de la densité de rendu d’entrée.
6. W3C — Contenu intégré SVG 2 — Explique pourquoi un SVG peut contenir des pixels matriciels.

Si l’original est uniquement matriciel, crée un SVG candidat avec PerfectVector, inspecte ses tracés et utilise Sharp pour rendre le fichier approuvé à chaque taille PNG nécessaire.