paper.js & Adobe Illustrator SVG: совместимость слоев - PullRequest
Новая
       114

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

1 голос
/ 25 июня 2019

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

Both shapes are in the same layer, but in different groups

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

1 Ответ

2 голосов
/ 26 июня 2019

Не думаю, что 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 моделью внутренних слоев.

...