是否可以在導出時將任意數據保存在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中？

回答

相關問題