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

我有一个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出口。

来源

2017-03-16 Brandon Durham

数据属性对于HTML确实是。对于SVG独立的XML，你可以使用你自己的命名空间。 –

有道理。知道在导出时是否可以将自己的XML节点注入到SVG中？ –

想必你可以在脚本中做任何你喜欢的事情。 –

由于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导出选项，找不到像“额外的数据”。但你可能后处理生成的SVG。

UPDATE

要回答这个问题的第1部分：

如何在SVG节省出口任意的数据？

您可以编写一个扩展，该扩展自身按照here，第61/62页中所述导出当前文档的SVG。在脚本触发导出之后，您可以读取该文件，将其解析为XML，遍历它，添加其他数据并将其另存为新文件或替换现有文件。因此，不要挂钩导出过程，您可以从脚本中触发它。当然可以创建自己的SVG导出。

第二部分：

如何将数据添加到Illustrator中的UI中的元素？

这是比较复杂的，因此，你需要另外一个脚本，将打开一个对话框，它提供了一个输入设置数据为当前选择。此外，您需要找到一种方法来存储该数据，以便以后可以将其添加到导出的SVG。为此，您可能需要两件事情，即数据的附加文件以及每个GraphItem（页74）的name属性将数据连接到该项目。但有一些陷阱像：可以删除项目。项目可以转换为其他的SVG元素，项目名称必须是唯一的，我想我可以成为一个相当沉重的事情来比较插图数据，由此产生的SVG。但是我对Illustrator脚本没有那么深入，我可以肯定地说。

阿里纳斯

Inkscape中提供了一个界面来创建基于SVG的所有功能编辑矢量图形，再加上它有一个XML编辑器做的正是你所追求的。只需将Illustrator转换为Inkscape即可。由于Inkscape使用SVG作为格式，因此它对SVG的支持要好得多，因此Illustrator对SVG的支持相对较差。使用Inkscape可以确保您在图形中所做的所有工作都可以像SVG一样工作，但是一些Illustrator功能不需要使用SVG将其渲染为基于像素的图像。

来源

2017-03-16 19:49:22 philipp

我的目标是制作Illustrator ExtendScript导出脚本的这一部分，而不需要进一步编辑该文件。这可能会使生产时间延长一倍，从而实现已经很长的流程。我'目前将信息存储在'areaText'对象中，但我想要一个更优雅的解决方案。将数据放入实际的SVG文件中的东西。 –

那么你必须写一个相当重要的插画剧本，提供一个用户界面和方式来跟踪数据，可能还有一个额外的文件。如果可以钩入导出过程，则需要在那里添加数据，但我不知道是否可以完成。 Inkscape提供了编辑图形和数据的所有功能，所以如果切换到它，就得到了解决方案。 – philipp

伟大的东西。谢谢，@philip！ –

如果从illustrator中导出svg，它会将id=layer_name作为属性添加。所以如果你改变每次导出的图层名称，你可以使用id读取每个svg。

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

来源

2017-03-16 16:36:32

我想到了这一点，但因为这些SVG需要上传到CMS，然后由API使用，我真的需要数据与SVG一起骑。 CMS为这些设置提供了一些重写（主要是位置），但“默认”将是从Illustrator中导出的内容。 –

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

回答

相关问题