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

Question

我有一个Illustrator文件，在一个图层和一个画板上有超过50个组。这些组的布局类似于文件中的图块。我们的想法是我们单独导出每个磁贴并在网站的前端重新组装。为了做到这一点，我需要能够导出每个“瓦片”以及一些任意信息。这些SVG将被导出以用于站点的前端。

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

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

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

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

• 并将每一层移动到一个新画板，将画板大小调整到艺术大小;

这使我能够将每个画板作为单独的SVG导出。我把文本放在原位，因为我原来的计划是将它包含在SVG中并从前端的textFrame中读取它，这样我就可以正确设置磁贴的位置，然后我会破坏或隐藏{{1} }。

但是现在我想知道，在导出时是否有可能在 SVG里面包含这种信息？也许是textFrame属性？或其他什么？

更新

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

Answer 1

由于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导出选项，找不到类似＆＃34;额外数据＆＃34;。但你可能会对生成的svg进行后期处理。

<强>更新

回答问题的第1部分：

  

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

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

第二部分：

  

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

这更复杂，因此您需要另一个打开对话框的脚本，该脚本提供一个输入来设置当前选择的数据。此外，您需要找到一种存储该数据的方法，以便以后可以将其添加到导出的SVG中。为此，您可能需要两件事，一个用于数据的附加文件，以及每个name的{​​{1}}属性（页74），以将数据连接到项目。但是有一些陷阱：物品可以被移除。项目可以转换为其他SVG元素，项目名称需要是唯一的，我只是猜测我可以成为一个非常重要的事情来比较插图数据，以及生成的SVG。 但我对Illustrator脚本的深入了解，我无法确定。

旁注

Inkscape提供了一个界面，可以根据SVG的所有功能创建和编辑矢量图形，还有一个XML编辑器，可以完全按照您的要求进行操作。只需将一次从Illustrator转换为Inkscape即可。由于Inkscape使用SVG作为格式，因此它对SVG的支持要好得多，因此Illustrator对SVG的支持相对较差。使用Inkscape将确保您在Graphic中执行的操作将作为SVG工作，但某些Illustrator功能并不适用于必须使用SVG渲染为基于像素的图像。

Answer 2

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

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