Paper.js и Adobe Illustrator SVG: совместимость слоев

Я создаю файлы SVG, используя paper.js (из node.js, с пакетом бумага-jsdom), и я хотел бы сделать их максимально совместимыми с Adobe Illustrator. Для этого я пытаюсь воспроизвести шаги, описанные [здесь]. Но затем, экспортируя в SVG с помощью функции экспортSVG, я получаю совсем другое:

Paper.js и Adobe Illustrator SVG: совместимость слоев

Совместимость слоев между paper.js и AI больше не работает. Итак, я что-то пропустил здесь? Это из-за моей версии ИИ (CC 2018)? Есть ли способ обойти эту проблему?

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
473
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не думаю, что экспорт Paper.js SVG когда-либо был совместим с моделью слоя Illustrator.
Вы говорите, что это «кажется, больше не работает», но вы заставили его работать с предыдущими версиями Paper.js/AI?
Если нет, я думаю, вас смутила аналогия, сделанная в Paper.js документации об их концепции общего слоя.
Но эта аналогия сделана только потому, что пользователи привыкли к слоям AI, и это позволяет им лучше понять, как работает Paper.js.

Из этого мне было любопытно посмотреть, как AI удалось восстановить свои слои после экспорта SVG, чтобы увидеть, есть ли возможный обходной путь в вашем случае.
Когда вы экспортируете свой AI проект в формате SVG, вы можете выбрать «Сохранить возможности редактирования Illustrator» или нет.
Если этого не сделать, экспортированный SVG будет выглядеть так:

<?xml version = "1.0" encoding = "utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version = "1.0" id = "Calque_1" xmlns = "http://www.w3.org/2000/svg"
     xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
     width = "1137px" height = "937px" viewBox = "0 0 1137 937"
     enable-background = "new 0 0 1137 937" xml:space = "preserve">
<g id = "Calque_1_1_">
    <circle fill = "#FF0000" cx = "380" cy = "238" r = "60"/>
</g>
<g id = "Calque_2">
    <circle fill = "#0000FF" cx = "569" cy = "468" r = "60"/>
</g>
</svg>

Но если вы попытаетесь загрузить этот SVG обратно в AI, вы получите не 2 слоя, а только один, содержащий 2 группы (как вы делаете с экспортированным Paper.js SVG).

Если вы отметите «Сохранить возможности редактирования Illustrator», вы получите совсем другой результат:

<?xml version = "1.0" encoding = "utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
    ]>
<svg version = "1.0" xmlns:x = "&ns_extend;" xmlns:i = "&ns_ai;"
     xmlns:graph = "&ns_graphs;"
     xmlns = "http://www.w3.org/2000/svg"
     xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px" width = "1137px"
     height = "937px"
     viewBox = "0 0 1137 937" enable-background = "new 0 0 1137 937"
     xml:space = "preserve">
<switch>
    <foreignObject requiredExtensions = "&ns_ai;" x = "0" y = "0" width = "1"
                   height = "1">
        <i:pgfRef xlink:href = "#adobe_illustrator_pgf">
        </i:pgfRef>
    </foreignObject>
    <g i:extraneous = "self">
        <g id = "Calque_1">
            <circle fill = "#FF0000" cx = "380" cy = "238" r = "60"/>
        </g>
        <g id = "Calque_2">
            <circle fill = "#0000FF" cx = "569" cy = "468" r = "60"/>
        </g>
    </g>
</switch>
    <i:pgf id = "adobe_illustrator_pgf">
    <![CDATA[
    ...(huge data skipped)
    ]]>
</i:pgf>
</svg>

На этот раз, если вы загрузите это обратно в AI, вы получите свои слои, как и ожидалось.
Разница заключается во всех метаданных, которые AI добавляет в SVG, чтобы загрузить его обратно, и, самое главное, в элементе <i:pgf id = "adobe_illustrator_pgf">.
Существует нить, обсуждающий ту же проблему в контексте Inskape, и кажется, что эти важные данные представляют собой своего рода двоичные данные, которые только AI могут читать и записывать.

Итак, в заключение, к сожалению, я не думаю, что есть шанс, что вы или Paper.js сможете создать файл SVG, который сопоставляется с AI моделью внутренних слоев.

Другие вопросы по теме