PSD в SVG (растр PNG внутри): область просмотра XML вокруг сплющенного растрового изображения — отлично подходит для встраивания, а не для автоматической векторизации.
Здесь SVG представляет собой легкую оболочку: композиция Photoshop с «видимым слиянием» (часто PNG) встроена в `<image>` с `viewBox` и шириной/высотой, поэтому вики, страницы обзора и документация компонентов могут ссылаться на один тип MIME. Детализация пикселей по-прежнему ограничена встроенным растровым изображением — масштабирование реальных пикселей будет выглядеть блочным, что не связано с «бесконечным векторным масштабированием». Для совместной работы необходима четкая линия: это предварительный просмотр или заполнитель, а не редактируемый векторный источник; редактирование копий и форм можно использовать в PSD, Figma или Illustrator. Также обратите внимание на CSP, хотлинкинг и встроенный вес: вставка огромного PNG в качестве base64 в HTML может разрушить TTFB — обычно предпочитают статический URL-адрес с отпечатками пальцев и заголовками кеша.
Как использовать PSD в SVG онлайн: заморозить видимые слои, загрузить, скачать SVG, который обертывает PNG, сравнить соотношение сторон и резкость с объединенным представлением PSD в браузере, затем заархивировать версию и хешировать с билетом
- В Photoshop проверьте видимые снаружи слои, размер монтажной области в пикселях и то, что длинный край экспорта покрывает целевую ширину CSS, умноженную на DPR устройства; скрыть разметку отзыва. Если сайт запрещает удаленные изображения, заранее решите между встроенными URI данных и статическими путями того же происхождения, чтобы Content-Security-Policy не блокировал производство.
- Откройте загруженный SVG непосредственно в браузере и снова на целевой странице через `<img>` или iframe; убедитесь, что `viewBox` плюс масштабирование CSS не растягиваются неожиданно. Увеличьте масштаб до 200 % — если мелкий шрифт или тонкие линии смягчаются, увеличьте разрешение слияния или интерполяцию в PS; оболочка SVG не будет придумывать детали.
- Сохраните SVG рядом с исходным PSD, примечаниями к параметрам и хешем файла в одной записи выпуска; используйте URL-адреса с отпечатками пальцев в библиотеках компонентов, чтобы в долгоживущих кешах CDN не отображались старые миниатюры после обновлений дизайна.
Часто задаваемые вопросы о PSD в SVG (растр в SVG, а не реконструкция пути)
Заинтересованные стороны видят «SVG» и принимают на себя «заливку» CSS или операцию по контуру в стиле значков — как нам нарисовать жесткую границу по сравнению с реальными векторными результатами?
Заявите прямо: этот SVG представляет собой оболочку предварительного просмотра, герой которой находится во встроенном PNG, на который ссылается `<image>`; он не предоставляет независимые векторные контуры или живые текстовые объекты. Поиск векторных изображений должен соответствовать процессу экспорта вашей системы дизайна или настольного компьютера. Без этого предложения команды фронтенда подключают его как компонент глифа, а затем обвиняют конвертер, когда цвета и штрихи невозможно редактировать.
Ресурс выглядит четким на ноутбуке Retina, но мягким на стандартном дисплее или после масштабирования CSS — означает ли это, что SVG не сработал, или это просто встроенное разрешение вместо математических расчетов макета?
Проверьте «naturalWidth» в сравнении с шириной CSS и устройствомPixelRatio и проверьте наличие нецелочисленных преобразований. Проблемы почти всегда связаны с недостаточным количеством встроенных пикселей или растяжением макета, а не с нарушением синтаксиса SVG. A/B с PNG, экспортированным в том же объединенном размере из Photoshop, чтобы отделить исходное разрешение от ошибок контейнера.
Должен ли встроенный PNG быть встроен в Base64 или на него ссылаться по URL-адресу — каковы обычные компромиссы в отношении производительности, кэширования и гигиены SEO?
Встраивание раздувает HTML, мешает повторному использованию кэша и может повредить TTFB; внешние статические файлы с отпечатками пальцев и длинными заголовками кэша подходят для большинства встраиваемых сайтов. Зарезервируйте base64 для крошечных значков, строгих однофайловых архивов или пакетов, подобных электронной почте, где второй запрос невозможен — никогда не добавляйте молча многомегабайтный предварительный просмотр в заголовок документа.
Проблемы безопасности и соответствия требованиям, связанные со сценариями и удаленными загрузками — как нам описать модель угроз для этих растровых SVG-файлов и усилить доставку?
Правильно сформированные выходные данные должны быть статическим `<svg>` плюс `<image>` без `<script>` или внешних объектов; по-прежнему запускать сканирование политик, блокировать ненадежные загрузки с горячих путей и хешировать замороженные сборки. Если пользователи могут загружать произвольный SVG, вам потребуется очистка и списки разрешенных тегов — поскольку ваш генератор статичен, он не иммунизирует всю поверхность продукта.
Может ли этот SVG сразу пойти в печать или в широкоформатную печать в качестве окончательной механической версии?
Обычно нет: оболочка предназначена для совместной работы на экране, а встроенное разрешение может не соответствовать правилам печати строк, выпуска за обрез, плашечных цветов или правил встраивания шрифтов. Продолжайте уделять внимание рабочим процессам TIFF/PDF/Illustrator и маркируйте билеты «не мастер печати». Отправка этого файла поставщику без этого заявления об отказе от ответственности приведет к дорогостоящей замене покрытия и ответственности.