SVG остаётся удобным векторным источником для разработки, но многие передачи по-прежнему уходят в виде растровых PNG. В 2026 году качество Retina означает формулу выходные пиксели = логические пиксели × масштаб, а не размытые формулировки вроде «высокий DPI». Ниже — сравнительные таблицы по выбору sRGB и Display P3, соответствие @2x/@3x сетке пикселей и смысл метаданных DPI, заметки по параметрам популярных приложений и CLI, а также чеклист пакетной приёмки на выделенном удалённом Mac. Дополните материалом чеклистом управления цветом PNG; все публикации — в разделе Технические идеи или с главной MacPng.
① Таблица решений по цветовому пространству
Растеризация SVG переносит ответственность за цвет с векторной геометрии на «замороженные» пиксели: так же, как в любом пайплайне PNG, разделите мастер и дистрибуцию. Правила встраивания или снятия ICC согласуйте с руководством по цвету PNG; в CLI-растеризаторах переключатели цвета часто спрятаны — после обновления toolchain обязательно прогоните один эталонный SVG на каждой цепочке.
Команда дизайна и фронтенда должна заранее договориться, что считается «релизным» цветом: для открытого веба это почти всегда sRGB, тогда как внутренние мастера на Mac с широким охватом могут жить в Display P3 до явной конверсии. Несогласованность здесь проявляется не в первом тикете, а через месяц — когда маркетинг, продукт и разработка ссылаются на разные папки dist.
| Сценарий | Рекомендуемый цвет экспорта | Рекомендация по мастер-ассетам | Риск при ошибочном выборе |
|---|---|---|---|
| Веб, мини-приложения, большинство маркетинговых размещений | sRGB 8-бит PNG | Можно авторить на Mac с Display P3; перед растром выполнить конверсию в sRGB | Перетегивание ICC без преобразования → «неон» или «грязь» на других дисплеях |
| Бренд-кампании с обязательным широким охватом | Отдельная папка Display P3 + явный README | Хранить P3-истину в SVG или дизайн-исходнике; не смешивать молча с веб-пакетом по умолчанию | Фронтенд подтянет неверный каталог → расхождение hero-цветов |
| Слайсы iOS и растровые ассеты в приложении | Обычно sRGB; следуйте внутренним HIG | Сверка с матрицей доставки PNG для иконок iOS | Пропущенный @3x или несовпадение с ревью-ассетами |
| Экранные превью, порождённые из печатного контура | Превью sRGB; печать остаётся в CMYK / PDF | Не считать PNG с 300 DPI единственным источником правды для UI-пикселей | Смешение печатного DPI с коэффициентами CSS-пикселей |
② Логические пиксели, масштабы @2x/@3x и семантика DPI
Умножайте логические ширину и высоту на коэффициент масштаба. Поле DPI в диалогах экспорта связывает единицы документа с дюймами; браузеры в первую очередь читают сетку пикселей. Колонка DPI в следующей таблице иллюстрирует типичную «историю метаданных» для печатных передач — приёмка опирается на WxH в пикселях.
Если в SVG задан только viewBox, зафиксируйте в репозитории базовую ширину в логических единицах до автоматизации: иначе два скрипта могут вывести разные логические размеры. Версии инструментов и манифест закрепляйте по аналогии с пакетным экспортом 4K PNG на удалённом Mac M4, даже для небольших иконок.
| Суффикс / масштаб | Размеры PNG в пикселях | Типичные метаданные DPI (ориентир) | Мантра приёмки |
|---|---|---|---|
| База @1x | W × H |
72 или 96 — в зависимости от дефолтов инструмента | Совпадает с задокументированным логическим размером |
| @2x | (W×2) × (H×2) |
Часто 144 (72×2) или 192 (96×2) | Обе стороны — точные целые кратные @1x |
| @3x | (W×3) × (H×3) |
Часто 216 или 288 | Согласовано с именованием в инженерии (srcset, каталоги ассетов) |
Избегайте двойного масштабирования (арт уже в 2× по ширине, а CMS снова увеличивает): один логический кадр в токенах дизайна, все производные — от него; отклонения от заявленного соотношения сторон отклоняйте в тикете. Для векторов из PDF действует то же правило «сначала пиксели» — см. чеклист PDF → PNG и DPI.
③ Дизайн-приложения и параметры пакетных скриптов
Согласуйте подход с материалом Affinity, Sketch и Figma: пакетный экспорт PNG и параметры. Инвариант: экспорт WxH = логический размер × масштаб, sRGB, если не согласован отдельный P3-пакет. После мажорных обновлений сохраняйте скриншоты пресетов; закрепите librsvg / Inkscape в Brewfile. Текст в SVG либо конвертируйте в кривые, либо установите те же семейства шрифтов на хосте удалённого Mac для пакетных прогонов.
| Подход | Шаблон параметров | Когда уместно |
|---|---|---|
| Figma / Sketch | Экспорт PNG в 2x/3x или с явным размером в пикселях; для веба явно sRGB | Библиотеки компонентов, где важно совпадение с холстом |
| Affinity Designer / Photo | Открыть SVG → экспорт в пикселях → Преобразовать в профиль в sRGB перед пакетными действиями | Сложные градиенты и общий контур с печатью |
| Adobe Illustrator | Asset Export или скрипты: WxH в пикселях; выровнять цвет к sRGB-профилю экспорта | Большие наборы артбордов со зрелыми action |
| Inkscape (CLI) | inkscape file.svg --export-type=png --export-width=<W×scale> (одну ось зафиксируйте, чтобы не исказить пропорции) |
Headless-партии и воспроизводимые сборки |
rsvg-convert (librsvg) |
rsvg-convert -w $((W*scale)) -o out.png in.svg; закрепите версию и шрифты |
Лёгкие циклы в CI или через launchd |
Точечно сравните один SVG в Preview и в браузере в режиме устройственных пикселей; если вывод CLI расходится с авторингом, исправляйте эффекты или выравнивание в исходном инструменте. Прозрачность и именование — в чеклисте экспорта PNG из Sketch и Figma.
④ Чеклист пакетной приёмки на удалённом Mac M4
Выделенный удалённый Mac (например на M4) снимает с ноутбуков сон, перегрев и случайные режимы дисплея. Заморозьте минорную версию macOS, пины Homebrew и сборки приложений; используйте таблицу как лист подписи вместе с манифестом партии.
| Проверка | Как выполнить | Критерий прохождения |
|---|---|---|
| Пиксельный контракт | Валидация скриптом или выборочно sips -g pixelWidth -g pixelHeight |
Равно логическим W/H × заявленный масштаб; допуск задокументирован, если нулевой — явно |
| Именование масштаба | Ревью суффиксов @2x / @3x или правил папок |
Совпадает с srcset на фронте или каталогами Xcode |
| Прозрачность | Композиция на #FFFFFF и #0B0B0B |
Нет цветных ореолов; в «пустой» альфе нет лишнего полупрозрачного шума |
| Цветовое намерение | Проверка встроенного ICC и политики снятия | Совпадает с README-color.md; нет фальшивых P3-тегов на sRGB-пакете |
| Воспроизводимость | Повтор входов на втором зафиксированном хосте | Пиксельно идентично или в задокументированных пределах (например сглаживание) |
| Повтор при сбое | Строки манифеста по файлам | Один упавший SVG перезапускается без пересборки всей партии |
⑤ FAQ
Структурированный блок FAQPage для поисковых систем размещён в JSON-LD в начале страницы; ниже — краткая версия для чтения.
В: Если поднять только DPI до 300, PNG на сайте станет резче?
О: Обычно нет, если размеры в пикселях не выросли — браузеры масштабируют по пикселям. Увеличьте ширину и высоту по таблице масштабов, затем при необходимости скорректируйте DPI для нижестоящих инструментов.
В: В SVG живой текст, а на удалённой партии всё поехало.
О: Конвертируйте глифы в кривые перед «заморозкой» экспорта или установите те же шрифты на удалённом Mac. Иначе кернинг и переносы разойдутся с файлом дизайна.
В: Один скрипт может выдать и @2x, и @3x?
О: Да — цикл с scale=2 и scale=3 и разными путями вывода. Не уменьшайте рендер @3x до «фейкового» @2x: вернётся мягкость.
Кратко
Три обязательства: логический размер × масштаб для пикселей, sRGB по умолчанию и явные пакеты Display P3 при необходимости, плюс зафиксированный удалённый Mac M4 и чеклист с манифестом — тогда формулировка «готово к Retina» становится проверяемой спецификацией, а не лозунгом.
Дальнейшие шаги: удалённая доставка дизайна
Откройте главную MacPng, ознакомьтесь с тарифами и пакетами аренды (страница выбора конфигурации без обязательного входа) и при необходимости сравните цены и узлы. В центре помощи — онбординг по SSH/VNC и типовые сценарии доступа без входа в аккаунт для первичного чтения. Продолжайте в Технические идеи: цвет PNG и матрица PDF → PNG, чтобы политики «вектор → растр» были едиными во всех конвейерах.
Растеризация Retina и QA на удалённом Mac
Одна базовая macOS, одни версии CLI и дизайн-приложений, один README по цвету — удобно студиям и распределённым командам, отгружающим предсказуемые пакеты PNG из SVG.