paper.js & Adobe Illustrator SVG：图层兼容性

Question

我正在使用 paper.js（来自 node.js，使用 paper-jsdom 包创建 SVG 文件，我想将它们制作成尽可能与 Adobe Illustrator 兼容。为此，我尝试重新描述 [here]. But then, exporting into SVG using the exportSVG 函数中描述的步骤，我得到了一些完全不同的东西：

paper.js 和 AI 之间的层兼容性似乎不再起作用。那么，我在这里遗漏了什么吗？是因为我的AI版本（CC 2018）吗？有没有办法绕过这个问题？

Answer 1

我认为 Paper.js SVG 导出与 Illustrator 图层模型不兼容。
你说这个 "does not seems to work anymore" 但你是否让它与以前版本的 Paper.js/AI 一起工作？
如果不是，我猜您对 Paper.js 文档中关于共享层概念的类比感到困惑。
但是这个类比只是因为用户习惯了 AI 层，这让他们更好地理解 Paper.js 是如何工作的。

从那以后，我很好奇 AI 如何在 SVG 导出后恢复其图层，看看您的情况是否有可能的解决方法。
当您将 AI 项目导出为 SVG 时，您可以选择是否 "Preserve Illustrator Editing Capabilities"。
如果不这样做，导出的 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 所做的那样）。

如果你检查"Preserve Illustrator Editing Capabilities"，你会得到一个非常不同的结果：

<?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上下文中有一个thread在讨论同类问题，似乎这个关键数据是一种只有AI可以读写的二进制数据。

最后，不幸的是，我认为您或 Paper.js 不可能制作映射到 AI 内部层模型的 SVG 文件。

paper.js & Adobe Illustrator SVG：图层兼容性

paper.js & Adobe Illustrator SVG : layers compatibilty

svg

adobe-illustrator

layer

node.js

paperjs

paper.js & Adob​​e Illustrator SVG：图层兼容性

paper.js & Adobe Illustrator SVG : layers compatibilty

svg

adobe-illustrator

layer

node.js

paperjs

paper.js & Adobe Illustrator SVG：图层兼容性