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





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