Le SVG reste la source vectorielle pratique pour l’ingénierie, mais beaucoup de passations livrent encore des bitmaps PNG. En 2026, « Retina » signifie surtout pixels de sortie = pixels logiques × facteur d’échelle, et non un « haut DPI » flou. Ci-dessous : tableaux comparatifs pour sRGB vs Display P3, la correspondance @2x/@3x, grille pixels et sémantique des métadonnées DPI, repères d’export pour les applis courantes et la voie CLI, puis une checklist d’acceptation pour les lots sur Mac M4 distant. Croisez avec la checklist gestion couleur PNG ; parcourez le blog et l’accueil MacPng pour le reste des workflows.
Dans cet article :
① Tableau décisionnel : espace couleur (sRGB / Display P3)
Rasteriser un SVG fige la couleur dans des pixels : distinguez comme pour tout pipeline PNG les rôles master et distribution. Réutilisez les règles d’ICC (embarquer / retirer) décrites dans PNG : sRGB et Display P3. Les rasteriseurs en ligne de commande masquent souvent les bascules « comme à l’écran » : après chaque upgrade majeure, validez un SVG témoin par toolchain.
| Scénario | Couleur d’export recommandée | Conseil master | Risque si mauvais choix |
|---|---|---|---|
| Web, mini-programmes, placements marketing génériques | sRGB PNG 8 bits | Créer sur Mac Display P3 si besoin ; convertir vers sRGB avant raster | Retagger l’ICC sans conversion → couleurs criardes ou boueuses ailleurs |
| Campagnes marque avec large gamme assumée | Dossier Display P3 séparé + README explicite | Garder la vérité P3 dans la source ; ne pas mélanger au bundle web par défaut | Le front charge le mauvais dossier → héros incohérents |
| Tranches iOS et bitmaps in-app | Souvent sRGB ; suivre la note interne HIG | Recouper avec la matrice livraison App Icon PNG iOS | @3x manquant ou écart avec les assets revue |
| Aperçus écran issus d’un flux print | Aperçu sRGB ; l’impression reste CMYK / PDF | Ne pas traiter un PNG 300 DPI comme seule vérité des pixels UI | Confondre DPI print et ratios pixels CSS |
② Pixels logiques, facteurs @2x/@3x et sémantique DPI
Multipliez la largeur × hauteur logiques par le facteur d’échelle. Le DPI des boîtes de dialogue relie souvent unités document et pouces ; les navigateurs lisent d’abord la grille en pixels. La colonne DPI du tableau ci-dessous illustre une histoire de métadonnées typique pour l’impression — l’acceptation se fait en WxH pixels.
Si le SVG n’a qu’un viewBox, fixez une largeur de référence dans le dépôt avant de scripter, sinon deux jobs infèrent des tailles logiques différentes. Épinglez versions d’outils et manifestes comme dans le guide export 4K PNG par lot sur Mac distant M4, y compris pour les petites icônes.
| Suffixe / échelle | Dimensions PNG (pixels) | Métadonnées DPI typiques (indicatif) | Mantra QA |
|---|---|---|---|
| Base @1x | W × H |
72 ou 96 selon outil | Conforme à la taille logique documentée |
| @2x | (W×2) × (H×2) |
Souvent 144 (72×2) ou 192 (96×2) | Les deux dimensions sont des multiples entiers exacts du @1x |
| @3x | (W×3) × (H×3) |
Souvent 216 ou 288 | Aligné sur srcset ou catalogues d’assets |
Évitez le double scaling (graphisme déjà en 2× puis CMS qui remonte encore) : un cadre logique dans les tokens, toutes les dérivées à partir de lui ; refusez les ratios qui ne correspondent pas au ticket. Les vecteurs PDF suivent la même règle « pixels d’abord » — voir PDF → PNG : DPI et checklist Mac distant.
③ Logiciels design & paramètres de scripts batch
Alignez-vous sur paramètres PNG par lot Affinity, Sketch et Figma. Invariant : export WxH = taille logique × échelle, sRGB sauf lot P3 validé. Capturez les préréglages après upgrade majeur ; figez librsvg / Inkscape dans un Brewfile. Vectorisez le texte SVG ou dupliquez les polices sur le Mac distant qui exécute le batch.
| Approche | Modèle de paramètres | Idéal pour |
|---|---|---|
| Figma / Sketch | Export PNG 2×/3× ou taille pixel personnalisée ; couleur explicite sRGB pour le web | Bibliothèques de composants alignées sur le canevas |
| Affinity Designer / Photo | Ouvrir SVG → verrouiller export en pixels → Convertir le profil vers sRGB avant actions batch | Dégradés complexes partagés avec le print |
| Adobe Illustrator | Export d’assets ou script : WxH en pixels ; profil d’export sRGB | Grands jeux de planches avec actions matures |
| Inkscape (CLI) | inkscape fichier.svg --export-type=png --export-width=<W×échelle> (une dimension verrouillée pour éviter la déformation) |
Lots headless et builds reproductibles |
rsvg-convert (librsvg) |
rsvg-convert -w $((W*scale)) -o out.png in.svg ; version et polices figées |
Boucles légères en CI ou launchd |
Contrôlez un SVG dans Aperçu et dans le navigateur en pixels device ; si la CLI diverge, corrigez effets ou alignement dans l’outil d’auteur. Checklist export PNG Sketch/Figma pour transparence et nommage.
④ Checklist d’acceptation batch sur Mac M4 distant
Un Mac distant dédié (ex. M4) évite veille, thermique et interruptions sur le portable. Gelez la version mineure de macOS, les épingles Homebrew et les builds d’applis ; utilisez le tableau comme feuille de signature avec votre manifeste.
| Contrôle | Méthode | Critère de réussite |
|---|---|---|
| Contrat pixels | Script de validation ou échantillon sips -g pixelWidth -g pixelHeight |
Égal à W/H logiques × échelle déclarée ; tolérance zéro si spec stricte |
| Nommage d’échelle | Revue suffixes @2x / @3x ou règles de dossiers |
Conforme au srcset front ou aux asset catalogs Xcode |
| Transparence | Composite sur #FFFFFF et #0B0B0B |
Pas de halos colorés ; pas de bruit semi-opaque dans l’alpha « vide » |
| Intention couleur | Échantillon ICC embarqué vs politique de strip | Conforme à README-color.md ; pas de faux tags P3 sur bundles sRGB |
| Reproductibilité | Relance des entrées sur un second hôte figé | Identique pixel à pixel ou écart documenté (ex. antialiasing) |
| Relance en échec | Lignes par fichier dans le manifeste | Un SVG en erreur peut être relancé sans effacer tout le lot |
⑤ FAQ
Un bloc FAQPage lisible par les moteurs est dans le JSON-LD en tête de page ; voici la version humaine.
Q : Si je ne fais que passer le DPI à 300, le PNG sera-t-il plus net sur le web ?
A : En général non si les dimensions en pixels ne changent pas — le navigateur met à l’échelle selon les pixels. Augmentez largeur et hauteur selon votre table d’échelles, puis ajustez éventuellement les métadonnées DPI pour les outils en aval.
Q : Mon SVG contient du texte vivant et le batch distant est faux.
A : Vectorisez les glyphes avant export figé, ou installez les mêmes familles de polices sur le Mac distant. Sinon crénage et retours à la ligne divergent du fichier design.
Q : Un script peut-il sortir @2x et @3x d’un coup ?
A : Oui — bouclez scale=2 et scale=3 avec chemins de sortie distincts. Ne réduisez pas un rendu @3x pour simuler du @2x : vous réintroduirez du flou.
Synthèse
Trois engagements : logique × échelle pour les pixels, sRGB par défaut avec lots Display P3 explicites si besoin, et Mac M4 distant figé + manifeste — ainsi « prêt Retina » devient une spec auditable, pas un slogan.
Suite : livraison design sur Mac distant
Parcourez les offres depuis l’accueil MacPng, comparez les formules et la page achat ainsi que les tarifs et nœuds pour un hôte Mac distant stable, et consultez le guide d’aide (SSH/VNC, sans connexion obligatoire). Poursuivez sur le blog : gestion couleur PNG, matrice PDF → PNG, WebP/AVIF + PNG — pour une politique vecteur → raster cohérente sur tous les pipelines.
Raster Retina & QA sur un Mac distant
Même base macOS, mêmes versions CLI et applis design, même README couleur — idéal pour les studios qui livrent des paquets PNG prévisibles depuis des sources SVG.