SVG bleibt die ingenieursfreundliche Vektorquelle – dennoch liefern viele Handoffs weiterhin PNG-Bitmaps. Im Jahr 2026 bedeutet Retina-Qualität: Ausgabepixel = logische Pixel × Skalierungsfaktor – nicht vages „hohe DPI“. Unten finden Sie Vergleichstabellen für sRGB vs. Display P3, eine Zuordnung von @2x/@3x zu Pixelrastern und DPI-Metadaten, Hinweise zu Exporten gängiger Apps und CLI-Pfade sowie eine Abnahme-Checkliste für Batch-Jobs auf einem Remote Mac M4 (PNG/SVG-Pipeline, reproduzierbar dokumentiert). Ergänzend zur PNG-Farbmanagement-Checkliste; alle Beiträge unter Technik-Insights oder von der MacPng-Startseite.
① Farbraum-Entscheidungstabelle
Beim Rastern von SVG wandert die Farbverantwortung von Vektoren in eingefrorene Pixel: Master vs. Distribution wie bei jeder PNG-Pipeline dokumentieren. ICC-Einbettung/Strippen-Regeln aus der PNG-Farbmanagement-Checkliste wiederverwenden; CLI-Rasterizer verbergen oft UI-Farb-Schalter – nach Tool-Upgrades je eine Gold-SVG pro Toolchain validieren.
| Szenario | Empfohlene Exportfarbe | Master-Asset-Hinweis | Risiko bei falscher Wahl |
|---|---|---|---|
| Web, Mini-Programme, die meisten Marketing-Platzierungen | sRGB 8-bit-PNG | Auf Display-P3-Mac autorisieren ist ok; vor dem Raster-Export nach sRGB konvertieren | Nur ICC umtaggen ohne Konvertierung → knallige oder schlammige Farben auf anderen Displays |
| Brand-Kampagnen mit verbindlichem Wide Gamut | Separater Display-P3-Ordner + explizites README | P3-wahre SVG- oder Designquelle behalten; nie still mit Standard-Web-Bundles mischen | Frontend zieht falsches Verzeichnis → inkonsistente Hero-Farben |
| iOS-Slices und In-App-Bitmaps | Meist sRGB; interne HIG-Hinweise befolgen | Abgleich mit iOS-App-Icon-PNG-Liefermatrix für verwandte Regeln | Fehlendes @3x oder Abweichung von Review-Assets |
| Druck-nah generierte Screen-Vorschau-PNGs | sRGB-Vorschau; Druck bleibt auf CMYK-/PDF-Druckpfad | 300-DPI-PNG-Vorschau nicht als einzige UI-Pixel-Wahrheit behandeln | Druck-DPI mit CSS-Pixelverhältnissen verwechseln |
② Logische Pixel, Skalierung & DPI-Semantik
Logische Breite × Höhe mit dem Skalierungsfaktor multiplizieren. DPI in Exportdialogen mappt Dokumenteinheiten auf Zoll; Browser lesen zuerst das Pixelraster. Die DPI-Spalte in der folgenden Tabelle ist eine typische Metadaten-Geschichte für Druck-Handoffs – die Abnahme nutzt B×H in Pixeln.
Wenn die SVG nur ein viewBox hat, eine Baseline-Breite im Repo festlegen, bevor skriptet wird – sonst können zwei Jobs unterschiedliche logische Größen inferieren. Tool-Versionen und Manifeste pinnen wie im Leitfaden 4K-PNG-Batch auf Remote Mac M4, auch für kleine Icons.
| Asset-Suffix / Skala | PNG-Pixelmaße | Typische DPI-Metadaten (illustrativ) | Abnahme-Merksatz |
|---|---|---|---|
| Basis @1x | B × H |
72 oder 96 je nach Tool-Default | Entspricht dokumentierter logischer Größe |
| @2x | (B×2) × (H×2) |
Oft 144 (72×2) oder 192 (96×2) | Beide Dimensionen exakte ganzzahlige Vielfache von @1x |
| @3x | (B×3) × (H×3) |
Oft 216 oder 288 | Passt zur Engineering-Benennung (srcset, Asset-Kataloge) |
Doppelte Skalierung vermeiden (Grafik bereits 2× breit, CMS skaliert nochmals): ein logischer Rahmen in Tokens, alle Derivate davon; Verhältnisse, die nicht zum Ticket passen, ablehnen. PDF-Vektoren folgen derselben „Pixel zuerst“-Regel – siehe PDF → PNG DPI-Checkliste.
③ Design-Apps & Batch-Skript-Parameter
Ausrichtung an Affinity, Sketch & Figma – Batch-PNG-Parameter. Invariante: Export B×H = logische Größe × Skala, sRGB sofern kein freigegebenes P3-Bundle ausgeliefert wird. Nach Major-Upgrades Export-Presets als Screenshot archivieren; librsvg / Inkscape in Brewfile pinnen. SVG-Text konturieren oder Schriften auf dem Remote-Mac-Batch-Host spiegeln.
| Ansatz | Parametermuster | Am besten für |
|---|---|---|
| Figma / Sketch | PNG-Export mit 2x/3x oder benutzerdefinierten Pixeln; Farbe explizit sRGB für Web | Komponentenbibliotheken, die exakt zur Arbeitsfläche passen müssen |
| Affinity Designer / Photo | SVG öffnen → Export in Pixel fixieren → In Profil konvertieren nach sRGB vor Batch-Aktionen | Komplexe Verläufe, geteilt mit Druck-Workflows |
| Adobe Illustrator | Asset Export oder Skripting: B×H in Pixeln; Farbe auf sRGB-Exportprofil synchronisieren | Große Artboard-Sets mit ausgereiften Aktionen |
| Inkscape (CLI) | inkscape datei.svg --export-type=png --export-width=<B×Skala> (eine Dimension fixieren, Verzerrung vermeiden) |
Headless-Batches und reproduzierbare Builds |
rsvg-convert (librsvg) |
rsvg-convert -w $((B*skala)) -o out.png in.svg; Version und Fonts pinnen |
Leichtgewichtige Schleifen in CI oder launchd |
Eine SVG in Vorschau vs. Browser an Gerätepixeln stichprobenartig prüfen; wenn CLI-Output abweicht, Effekte oder Ausrichtung im Authoring-Tool korrigieren. Siehe Sketch- & Figma-PNG-Export-Checkliste zu Transparenz und Benennung.
④ Remote-Mac-M4-Batch-Abnahme-Checkliste
Ein dedizierter Remote Mac (z. B. M4) vermeidet Sleep und thermische Last auf Laptops. macOS-Minor-Version, Homebrew-Pins und App-Builds einfrieren; die Tabelle als Abzeichnungsblatt zusammen mit Ihrem Manifest nutzen. Damit wird PNG-Qualität aus SVG messbar statt nur „subjektiv scharf“ – besonders wichtig, wenn mehrere Zeitzonen auf dieselbe Remote-Mac-Pipeline zugreifen.
| Prüfpunkt | Vorgehen | Pass-Kriterium |
|---|---|---|
| Pixelvertrag | Skript-Validierung oder Stichprobe mit sips -g pixelWidth -g pixelHeight |
Entspricht logisch B/H × deklarierter Skala; Toleranz dokumentieren falls 0 px gefordert |
| Skalierungs-Benennung | @2x- / @3x-Suffixe oder Ordnerregeln prüfen |
Passt zu Frontend-srcset oder Xcode-Asset-Katalogen |
| Transparenz | Auf #FFFFFF und #0B0B0B komponieren |
Keine farbigen Hälme; kein streuendes Halbtransparentes in „leerer“ Alpha |
| Farbintent | Eingebettetes ICC vs. Strip-Policy stichproben | Entspricht README-color.md; keine falschen P3-Tags auf sRGB-Bundles |
| Reproduzierbarkeit | Eingaben auf zweitem fixierten Host erneut laufen lassen | Pixel-identisch oder innerhalb dokumentierter Toleranz (z. B. Kantenglättung) |
| Fehler-Retry | Pro Datei Zeilen im Manifest führen | Eine fehlgeschlagene SVG einzeln neu starten ohne ganzen Batch zu löschen |
⑤ FAQ
Ein maschinenlesbares FAQPage-Schema steht im JSON-LD im Seitenkopf; hier die kompakte Lesefassung.
F: Reicht es, DPI auf 300 zu setzen, damit die PNG im Web schärfer wirkt?
A: Meist nicht, wenn die Pixelmaße gleich bleiben – Browser skalieren nach Pixeln. Breite und Höhe gemäß Skalierungstabelle erhöhen, DPI-Metadaten optional für nachgelagerte Tools anpassen.
F: Meine SVG nutzt live Text, der Remote-Batch sieht falsch aus.
A: Glyphen vor unveränderlichen Exporten konturieren oder identische Schriftfamilien auf dem Remote Mac installieren. Sonst weichen Kerning und Zeilenumbrüche von der Designdatei ab.
F: Kann ein Skript @2x und @3x gleichzeitig ausgeben?
A: Ja – Schleife mit skala=2 und skala=3 und getrennte Ausgabepfade. Kein @3x-Render auf @2x herunterrechnen; das macht die Kanten wieder weich.
Fazit
Drei Verpflichtungen: logisch × Skala für Pixel, sRGB als Default mit expliziten Display-P3-Bundles bei Bedarf, sowie fixierter Remote Mac M4 plus Manifest-Checkliste – dann ist „Retina-ready“ ein prüfbares Spec, kein Slogan. Themencluster für Suche und Dokumentation: PNG, SVG, Remote Mac, 2026.
Nächste Schritte: Design-Ablieferung auf Remote Mac
Pakete auf der MacPng-Startseite entdecken, Mietpakete und Preise & Knoten für einen stabilen Remote-Mac-Host vergleichen sowie das Hilfe-Center (ohne Login) für SSH/VNC-Onboarding lesen. Weiterlesen unter Technik-Insights – etwa PNG-Farben-Checkliste und PDF → PNG-Matrix – damit Vektor-zu-Raster-Policies in jeder Pipeline konsistent bleiben.
Retina-Rasterisierung & QA auf Remote Mac
Gleiche macOS-Baseline, gleiche CLI- und Design-App-Versionen, gleiches Farb-README – ideal für Studios und verteilte Ops mit vorhersagbaren PNG-Bundles aus SVG-Quellen.