导出时是否可以在 SVG 中保存任意数据？

Question

我有一个 Illustrator 文件，其中一层和一个画板上有 50 多个组。这些组的布局就像文件中的图块一样。我们的想法是，我们单独导出每个图块并在站点的前端重新组装。为此，我需要能够导出每个“图块”以及一些任意信息。这些 SVG 将被导出以用于网站的前端。

到目前为止，我编写的脚本是：

勾勒出所有文本并将每个组移动到其自己的图层上；

向包含此文本的图层添加 textFrame：

{
    "name": "layer_name",
    "dimensions": {
        "top": 0,
        "left": 1306,
        "width": 278,
        "height": 312
    }
}

并将每一层移动到一个新的画板，将画板的大小调整为艺术的大小；

这让我设置得恰到好处，可以将每个画板导出为单独的 SVG。我把文本放在适当的位置，因为我最初的计划是将它包含在 SVG 中并从前端的 textFrame 中读取它，这样我就可以正确设置图块的位置，然后我会销毁或隐藏 textFrame.

但现在我想知道，是否可以在导出时将这种信息包含在 SVG 中？也许作为 data- 属性？或者别的什么？

更新：

建议我使用 XML 命名空间而不是数据属性，因为它们更适合 HTML。如何在导出时以编程方式将 XML 节点添加到 SVG？
我也在研究 variables 和 dataSets，因为您似乎可以将它们包含在 SVG 导出中。

Answer 1

如果您从 illustrator 导出 svg，它会添加 id=layer_name 作为属性。因此，如果您在每次导出时更改图层名称，则可以使用 id 读取每个 svg。

您可以从单独的 dimensions.json 文件中读取。或者根据id以其他方式嵌入数据。

Answer 2

由于 SVG 是基于 XML，因此您可以扩展它。因此，您需要像这样添加自己的命名空间：

<svg xmlns:myns="someidentifier" ...>.... </svg>

然后你可以像这样添加属性

<path myns:data="...." .../>

甚至像这样的元素：

<myns:data>... </myns:data>

要编辑这些数据，我建议使用 inkscape，它提供了一个 xml 编辑器，您可以使用它为每个元素设置任意属性。

我在这里看过：https://www.adobe.com/devnet/illustrator/scripting.html 和第 61 页（实际版本 JS pdf）有所有 svg 导出选项，但找不到像 "extra data" 这样的东西。但是您可能会对生成的 svg 进行后处理。

更新

回答问题的第 1 部分：

How to save arbitrary data in SVG on export?

您可以编写一个扩展，它自己导出当前文档的 SVG，如 here，第 61/62 页所述。在脚本触发导出后，您可以读取该文件，将其解析为 XML，浏览它，添加其他数据并再次保存，作为新文件或替换现有文件。因此，您可以从脚本中触发它，而不是挂钩导出过程。当然，是否可以创建自己的 SVG 导出文件。

第二部分：

How to add Data to Illustrator elements within the UI?

这更复杂，因此您需要另一个脚本来打开一个对话框，该对话框提供一个输入来为当前选择设置数据。此外，您需要找到一种方法来存储该数据，以便之后可以将其添加到导出的 SVG 中。为此，您可能需要我们做两件事，一个数据的附加文件，以及每个 GraphItem（第 74 页）的 name 属性，以将数据连接到项目。但也有一些陷阱，如：项目可以删除。项目可以转换为其他 SVG 元素，项目名称需要是唯一的，我只是想我可能会成为比较 illustrator 数据和生成的 SVG 的重物。但是我对 Illustrator 脚本编写的了解并不深入，我可以肯定地说。

旁注

Inkscape 提供了一个基于 SVG 的所有功能来创建和编辑矢量图形的界面，此外它还有一个 XML 编辑器来完全满足您的需求。只需从 Illustrator 转换一次到 Inkscape 即可。由于 Inkscape 使用 SVG 作为格式，它对 SVG 的支持要好得多，而 Illustrators 对 SVG 的支持则相对较差。使用 Inkscape 将确保您在 Graphic 中所做的一切都将作为 SVG 工作，但某些 Illustrator 功能不能，并且必须使用 SVG 渲染为基于像素的图像。

导出时是否可以在 SVG 中保存任意数据？

Is it possible to save arbitrary data in SVG on export?

javascript

svg

extendscript

adobe-illustrator