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

我有一个Illustrator文件，在一层和一个艺术板上有50多个组。这些组在文件中像瓷砖一样排列。我们的想法是单独导出每个瓷砖，然后在站点前端重新组装。为了做到这一点，我需要能够导出每个“瓷砖”以及一些任意信息。这些SVG将导出以在站点前端使用

到目前为止，我已经编写了一个脚本：

• 概述所有文本，并将每组移动到其自己的图层上
• 将

  textFrame

  添加到包含此文本的层：

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

• 并将每一层移动到一个新的艺术板上，根据艺术的大小调整艺术板的大小

这使我能够将每个artboard作为单独的SVG导出。我将文本放在适当的位置，因为我最初的计划是将其包含在SVG中，并从前端的textFrame读取文本，以便正确设置平铺的位置，然后销毁或隐藏

textFrame

但现在我想知道，在导出时是否可以在SVG中包含此类信息？可能作为

数据-

属性？还是别的什么

更新：

建议我使用XML名称空间而不是数据属性，因为它们更适合HTML。如何在导出时以编程方式将XML节点添加到SVG

我还研究了

变量

和

数据集

，因为您似乎可以在SVG导出中包含这些变量

---

如果您从illustrator导出svg，则它已作为属性添加了

id=layer\u name

。因此，如果在每次导出时更改图层名称，则可以使用id读取每个svg

---

您可以从单独的

dimensions.json

文件中读取。或者基于id以其他方式嵌入数据。

因为SVG基于XML，所以可以对其进行扩展。因此，您需要添加自己的名称空间，如下所示：

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

。。。。

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

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

甚至像这样的元素：

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

。。。

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

我在这里查看了一下：在第61页（实际版本JS pdf），有所有svg导出选项，但找不到类似“额外数据”的内容。但您可能会对生成的svg进行后处理

更新

回答问题第一部分：

如何在导出时在SVG中保存任意数据

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

第二部分：

如何在UI中向Illustrator元素添加数据

这更复杂，因此您需要另一个打开对话框的脚本，该对话框提供一个输入来设置当前选择的数据。此外，您需要找到一种存储该数据的方法，以便以后可以将其添加到导出的SVG中。为此，您可能需要使用两个东西，一个用于数据的附加文件，以及每个

GraphItem

（第74页）的

name

属性，以将数据连接到项目。但也有一些陷阱，比如：物品可以被移除。项目可以转换为其他SVG元素，项目名称需要是唯一的，我只是想我可以成为一个相当沉重的事情来比较illustrator数据，与结果SVG但是我对Illustrator脚本并没有深入到我可以肯定的程度

旁注

---

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

数据属性实际上是用于HTML的。对于作为XML的SVG，您可以使用自己的名称空间。这很有意义。知道是否可以在导出时将您自己的XML节点注入SVG吗？大概您可以在脚本中执行任何您喜欢的操作。我想到了这一点，但因为这些SVG需要上传到CMS，然后由API使用，所以我真的需要数据与SVG一起使用。CMS为这些设置提供了一些覆盖（主要是位置），但“默认”将是从Illustrator导出的内容。我的目标是使Illustrator ExtendScript导出脚本的这一部分成为导出脚本，而不需要进一步编辑文件。对于已经很长的流程，这可能会使生产时间翻倍。我目前正在将信息存储在

areaText

对象中，但我想要一个更优雅的解决方案。将数据放入实际的SVG文件中的东西。然后，您必须编写一个相当繁重的illustrator脚本，提供一个UI和跟踪数据的方法，可能还需要一个额外的文件。如果可以挂接到导出过程中，您需要在那里添加数据，但我不知道是否可以这样做。Inkscape提供了编辑图形和数据的所有功能，因此，如果您切换到Inkscape，您就有了解决方案。很棒的东西。谢谢你，菲利普！