SVG stays the engineering-friendly vector source, yet many handoffs still ship PNG bitmaps. In 2026, Retina quality means output pixels = logical pixels × scale—not vague “high DPI.” Below are comparison tables for sRGB vs Display P3, a map from @2x/@3x to pixel grids and DPI metadata, export notes for common apps and CLI paths, and a remote Mac M4 batch acceptance checklist. Pair with the PNG color management checklist; see all posts under Tech Insights or from the homepage.
① Color space decision table
Rasterizing SVG moves color responsibility from vectors to frozen pixels: document master vs distribution space like any PNG pipeline. Reuse ICC embed/strip rules from PNG color management; CLI rasterizers may hide UI color toggles—validate one golden SVG per toolchain after upgrades.
| Scenario | Recommended export color | Master asset guidance | Risk if mis-picked |
|---|---|---|---|
| Web, mini-programs, most marketing placements | sRGB 8-bit PNG | Author on a Display P3 Mac if you like; convert to sRGB before raster export | Retagging ICC without conversion → neon or muddy hues on other displays |
| Brand campaigns that must keep wide gamut | Separate Display P3 folder + explicit README | Keep P3-truth SVG or design source; never silently mix with default web bundles | Front-end pulls the wrong directory → inconsistent hero colors |
| iOS slices and in-app bitmaps | Usually sRGB; follow internal HIG notes | Cross-check iOS App Icon PNG delivery matrix for related rules | Missing @3x or mismatch with review assets |
| Print-originated screen preview PNGs | sRGB preview; print stays on CMYK / PDF press path | Do not treat a 300 DPI PNG preview as the only source of truth for UI pixels | Confusing print DPI with CSS pixel ratios |
② Logical pixels, scale factors & DPI semantics
Multiply logical width × height by the scale factor. DPI in export dialogs maps document units to inches; browsers read the pixel grid first. The next table’s DPI column is a typical metadata story for print handoffs—acceptance uses WxH in pixels.
If SVG has only viewBox, fix a baseline width in repo before scripting so two jobs cannot infer different logical sizes. Pin tool versions and manifests as in batch 4K PNG on remote Mac M4, even for small icons.
| Asset suffix / scale | PNG pixel dimensions | Typical DPI metadata (illustrative) | Acceptance mantra |
|---|---|---|---|
| Base @1x | W × H |
72 or 96 depending on tool defaults | Matches documented logical size |
| @2x | (W×2) × (H×2) |
Often 144 (72×2) or 192 (96×2) | Both dimensions are exact integer multiples of @1x |
| @3x | (W×3) × (H×3) |
Often 216 or 288 | Matches engineering naming (srcset, asset catalogs) |
Avoid double scaling (art already 2× wide, then CMS upscales again): one logical frame in tokens, all derivatives from it; reject ratios that do not match the ticket. PDF vectors follow the same “pixels first” rule—see PDF → PNG DPI checklist.
③ Design apps & batch script parameters
Align with Affinity, Sketch & Figma batch PNG parameters. Invariant: export WxH = logical size × scale, sRGB unless you ship an approved P3 bundle. Screenshot presets after major upgrades; pin librsvg / Inkscape in Brewfile. Outline SVG text or mirror fonts on the remote Mac batch host.
| Approach | Parameter pattern | Best for |
|---|---|---|
| Figma / Sketch | PNG export at 2x/3x or custom pixel size; color settings explicit sRGB for web | Component libraries that must match the canvas |
| Affinity Designer / Photo | Open SVG → lock export in pixels → Convert to Profile to sRGB before batch actions | Complex gradients shared with print workflows |
| Adobe Illustrator | Asset Export or scripting: set WxH in pixels; sync color to sRGB export profile | Large artboard sets with mature actions |
| Inkscape (CLI) | inkscape file.svg --export-type=png --export-width=<W×scale> (lock one dimension to avoid skew) |
Headless batches and reproducible builds |
rsvg-convert (librsvg) |
rsvg-convert -w $((W*scale)) -o out.png in.svg; pin version and fonts |
Lightweight loops inside CI or launchd |
Spot-check one SVG in Preview vs browser at device pixels; if CLI output disagrees, fix effects or alignment in the authoring tool. See Sketch & Figma PNG export checklist for transparency and naming.
④ Remote Mac M4 batch acceptance checklist
A dedicated remote Mac (e.g. M4) avoids sleep and thermal hits on laptops. Freeze macOS minor version, Homebrew pins, and app builds; use the table as a sign-off sheet with your manifest.
| Check | How | Pass criteria |
|---|---|---|
| Pixel contract | Script validation or sips -g pixelWidth -g pixelHeight sampling |
Equals logical W/H × declared scale; document if zero tolerance |
| Scale naming | Review @2x / @3x suffixes or folder rules |
Matches front-end srcset or Xcode asset catalogs |
| Transparency | Composite on #FFFFFF and #0B0B0B |
No colored halos; no stray semi-opaque noise in “empty” alpha |
| Color intent | Sample embedded ICC vs strip policy | Matches README-color.md; no fake P3 tags on sRGB bundles |
| Reproducibility | Re-run inputs on a second pinned host | Pixel-identical or within documented tolerance (e.g. anti-alias differences) |
| Failure retry | Keep per-file rows in the manifest | Single failed SVG can rerun without wiping the whole batch |
⑤ FAQ
A machine-readable FAQPage lives in the JSON-LD at the top of this page; here is the human-friendly recap.
Q: If I only bump DPI to 300, will the PNG look sharper on the web?
A: Usually not if pixel dimensions stay the same—browsers scale by pixels. Increase width and height according to your scale table, then optionally adjust DPI metadata for downstream tools.
Q: My SVG uses live text and the remote batch looks wrong.
A: Outline glyphs before immutable exports, or install the identical font families on the remote Mac. Otherwise kerning and line breaks will diverge from the design file.
Q: Can one script output both @2x and @3x?
A: Yes—loop scale=2 and scale=3 with separate output paths. Do not downscale a @3x render to fake @2x; you will reintroduce softness.
Summary
Three commitments: logical × scale for pixels, sRGB defaults with explicit Display P3 bundles when needed, and pinned remote Mac M4 + manifest checklist—then “Retina-ready” is an auditable spec, not a slogan.
Next steps: remote Mac design delivery
Explore plans on the MacPng homepage, compare rental packages and pricing & nodes for a stable remote Mac host, and read the help center (no login required) for SSH/VNC onboarding. Continue reading in Tech Insights—for example the PNG color checklist and PDF → PNG matrix—to keep vector-to-raster policies consistent across every pipeline.
Run Retina rasterization & QA on a remote Mac
Same macOS baseline, same CLI and design-app versions, same color README—ideal for studios and distributed ops shipping predictable PNG bundles from SVG sources.