PerfectVector
Автор: Irene Kim8 мин чтения

PSD в SVG без потери слоёв: что сохранится

PSD может содержать слои фигур, живой текст, маски и пиксели, но SVG сохранит не всё. Узнайте, какие части сначала экспортировать, свести или трассировать.

На этой странице

Нельзя преобразовать каждый слой Photoshop в эквивалентный слой SVG. PSD может сочетать слои фигур, живой текст, маски, эффекты, смарт-объекты и обычные пиксели. SVG может представлять контуры, текст, группы и изображения, но эти объекты не соответствуют однозначно модели документа Photoshop. Самый надёжный процесс — сохранить векторное содержимое через нативный экспорт, затем трассировать только тот растр, для которого нет пригодного векторного исходника.

Как быстро принять решение
  • Если PSD уже содержит чистые контуры фигур, сохраните или перенесите их в векторный редактор.
  • Оставляйте редактируемый текст текстом, только если у получателя есть шрифт и приложение надёжно работает с текстом SVG. Иначе переведите копию для передачи в контуры.
  • Воспринимайте маски, эффекты, смарт-объекты и пиксельные слои как внешний вид, а не переносимую структуру слоёв.
  • Если нужен только сведённый рисунок в виде редактируемых фигур, проверьте сохранённое составное изображение и трассируйте его.
  • Откройте окончательный SVG и проверьте объекты. Расширение .svg не доказывает, что слои сохранились или пиксели стали контурами.

Слой PSD — не слой SVG

Панель Layers в Photoshop описывает способ редактирования документа. SVG описывает то, что рисует средство отображения. Это разные задачи.

Содержимое PSDЛучший способЧего ожидать в SVG
Слой фигуры или контур PhotoshopНативное сохранение или переносРедактируемые контуры, если экспорт сохраняет векторную геометрию
Живой текстСохранение живым или перевод копии в контурыРедактируемому тексту нужен шрифт; контуры сохраняют вид, но теряют редактирование текста
Пиксельный слойТрассировка, только если полезны векторные фигурыНовые контуры приближают видимые пиксели
Маска слоя или обтравочная маскаОсмысленное восстановление или сведениеВидимая обрезка может сохраниться, но не схема редактирования Photoshop
Смарт-объектСначала открыть его оригинальный исходникСам размещённый результат может показывать только отрисованные пиксели
Эффект слоя, текстура или мягкая теньСохранение растра или упрощениеПлавные эффекты часто становятся пикселями или большим набором фигур

Актуальный процесс Image Assets от Adobe может создавать ресурсы SVG из именованных слоёв или групп слоёв. Та же документация сообщает, что ресурс группы слоёв сводится даже тогда, когда группа содержит фигуры и живой текст. Иными словами, выбор SVG не превращает иерархию Photoshop в эквивалентную иерархию SVG.

Изучите файл перед преобразованием

Продублируйте PSD до любых изменений. Затем проверьте панели Layers, Paths, Properties и смарт-объекты.

  1. Скройте пиксельные слои. Если полезный рисунок остался, возможно, у вас уже есть векторные фигуры, которые стоит сохранить.
  2. Выделите каждый текстовый слой. Запишите семейство и начертание шрифта до перевода в контуры или переноса текста.
  3. Откройте смарт-объекты. Связанный файл Illustrator или другой векторный исходник лучше трассировки его отрисованного предпросмотра.
  4. Переключите маски и эффекты. Решите, важно редактируемое построение или только окончательный вид.
  5. Проверьте сохранённое составное изображение. Если файл по-другому открывается на другой машине, пересохраните проверенную копию до использования процесса со сведением.

Adobe также описывает экспорт выбранных слоёв в отдельные файлы. Отдельные экспорты могут сохранить полезные границы между ресурсами, но не создают один SVG, ведущий себя как исходная стопка слоёв PSD.

Выбирайте способ по типу объектов
Концептуальная схема двух путей для многослойного документа Photoshop: сохранение векторных объектов или сведение пикселей с последующей трассировкой в контуры SVG
Два пути: сохраняйте существующие векторные объекты, когда можете; трассируйте только видимые пиксели, для которых нет пригодного векторного исходника.

Способ 1: сохранить векторное содержимое

Используйте его для слоёв фигур, контуров пера, простого живого текста и смарт-объектов, чей оригинальный векторный исходник ещё существует.

Переносите или экспортируйте по одному логическому ресурсу, затем открывайте в Illustrator, Inkscape или другом редакторе SVG. Проверьте, что результат содержит контуры и группы, а не одно прямоугольное изображение. Если текст должен остаться редактируемым, откройте SVG на другой машине, где нет вашего документа Photoshop, и подтвердите загрузку нужного шрифта. Для логотипов и производственных файлов сохраняйте оригинал с живым текстом и делайте копию в контурах для передачи.

Не сводите хороший векторный исходник только ради пропуска через трассировку. Она перерисовывает отображаемый вид, поэтому может добавлять узлы, менять кривые и превращать текст в приближённые границы. Исходная геометрия — более чистая отправная точка.

Способ 2: свести видимый рисунок, затем трассировать

Используйте трассировку, когда полезный рисунок существует только в пикселях или сохранённый вид PSD — лучший оставшийся исходник. Плоские логотипы, эмблемы, значки, надписи и иллюстрации с чёткими цветовыми границами обычно подходят. Фотографии, тонкие градиенты, текстура кисти и мягкие тени обычно не подходят.

Перед трассировкой:

  1. Скройте всё, чего не должно быть в векторе.
  2. Поместите рисунок на нужный для передачи фон или прозрачность.
  3. Проверьте мелкие просветы, отверстия и тонкие надписи в нужном размере вывода.
  4. Сохраните совместимую копию или экспортируйте качественный PNG, если у PSD нет надёжного сведённого представления.
  5. Сохраните оригинальный PSD. Трассировка — новый ресурс для передачи, а не замена документа.

Согласно модели встроенного содержимого SVG 2, SVG может содержать встроенное растровое изображение. Поэтому конвертер, меняющий только формат, может поместить сведённые пиксели PSD в SVG без трассировки. Увеличение и проверка типа объекта позволяют обнаружить такой псевдовекторный результат.

Как это работает в PerfectVector

PerfectVector открывает поддерживаемый PSD или PSB через сохранённое сведённое изображение совместимости. Браузер локально подготавливает видимое изображение и предлагает проверить его перед векторизацией. Он не загружает оригинальный документ Photoshop и не заявляет о восстановлении слоёв, масок, живого текста, эффектов, контуров, монтажных областей или смарт-объектов. Процесс Photoshop в SVG восстанавливает подготовленные пиксели как контуры SVG.

Поэтому это путь трассировки, а не сохранения слоёв. Используйте его, если сохранённое составное изображение даёт нужный вид, а редактируемая геометрия контуров полезнее исходного построения Photoshop. После преобразования проверьте силуэт, цветовые области, форму текста, пустые области и структуру узлов. Если PSD уже содержит чистые векторные исходники, вместо этого перенесите их напрямую.

Проверьте, что сохранилось в SVG

Повторно откройте скачанный SVG в векторном редакторе вместо доверия первому предпросмотру.

  • Выделите одну цветовую область. Она должна вести себя как контур или фигура, а не часть одного прямоугольного изображения.
  • Откройте панель Layers или Objects. Ищите удобную структуру групп, не ожидая названий слоёв PSD.
  • Увеличьте кривые и просветы букв. Проверьте плоские участки, случайные замыкания и шумные края.
  • Измените одну заливку. Настоящий контур должен перекрашиваться без изменения соседних областей.
  • Найдите в исходном тексте элемент <image>, если какая-то область всё ещё пикселизуется.
  • Импортируйте SVG в его настоящее целевое приложение и проверьте там размер, шрифты, маски и эффекты.

Если все видимые части ведут себя как один объект, выполните диагностику разгруппировки SVG до разрушительных операций с контурами. Файл может быть одним составным контуром или встроенным изображением, а не группой.

Когда PSD должен оставаться PSD

Сохраняйте Photoshop как рабочий оригинал, если вам всё ещё нужны редактируемый текст, корректирующие слои, маски, смарт-объекты, монтажные области, фотографическая текстура или эффекты. SVG — хороший формат передачи масштабируемых графических фигур, но не замена документа Photoshop.

В итоге могут остаться два файла: PSD как редактируемый исходник и SVG как производственный ресурс. Это правильная передача. Два файла сохраняют разные виды редактируемости.

Частые вопросы

Можно ли преобразовать PSD в SVG с сохранением всех слоёв? Надёжного способа нет. Некоторые фигуры и текст могут перейти в SVG, но у масок Photoshop, эффектов, смарт-объектов, корректирующих слоёв, названий слоёв и пиксельных слоёв нет однозначных эквивалентов SVG. Сначала сохраняйте исходные векторные объекты, а остальное воспринимайте как отрисованный вид.

Почему результат PSD в SVG содержит только один слой? Конвертер, вероятно, использовал сведённое составное изображение или встроил один растр. Один объект SVG также может быть составным контуром или группой, поэтому проверьте тип объекта, прежде чем считать файл всё ещё растровым.

Векторизует ли пиксели сохранение файла Photoshop как SVG? Нет. SVG может содержать растровые изображения. Экспорт формата может поместить пиксели в контейнер SVG без трассировки. Проверьте, выделяется ли рисунок как контуры и редактируется ли на уровне объектов.

Нужно ли переводить текст в контуры перед экспортом SVG из Photoshop? Переводите копию для передачи в контуры, если внешний вид должен быть фиксированным, а редактирование текста больше не нужно. Сохраняйте оригинал с живым текстом, если формулировки или локализация могут измениться. Перевод в контуры не сохраняет редактирование шрифта; он превращает буквы в контуры.

Может ли PerfectVector восстановить слои Photoshop из PSD? Нет. PerfectVector использует сохранённое сведённое изображение совместимости поддерживаемого файла и трассирует видимое изображение в контуры. Он не восстанавливает исходный стек слоёв Photoshop или редактируемые функции документа.

Источники

  1. Adobe — создание ресурсов изображения из слоёв — Документирует создание ресурсов SVG и сведение ресурсов групп слоёв.
  2. Adobe — экспорт слоёв в файлы — Документирует актуальное поведение экспорта отдельных слоёв.
  3. Adobe — рисование фигур и контуров в Photoshop — Определяет инструменты фигур, пера и контуров Photoshop.
  4. W3C — встроенное содержимое SVG — Объясняет, почему SVG всё ещё может содержать растровые данные изображения.
  5. PerfectVector — Photoshop в SVG — Описывает поддерживаемый процесс через сохранённое составное изображение и его ограничения по восстановлению слоёв.

Если нужный вам исходник — сохранённое составное изображение, проверьте его в конвертере Photoshop в SVG, векторизуйте, затем снова откройте SVG и подтвердите, что важные области являются контурами.

Ещё из блога

Превратите файл изображения в
редактируемый SVG