エクスポート時にSVGに任意のデータを保存することはできますか？

Question

Illustratorファイルには、1つのレイヤーに50以上のグループと1枚のアートボードがあります。グループはファイル内にタイルのように配置されます。そのアイデアは、個々のタイルを個別にエクスポートし、サイトのフロントエンドで再構成することです。そのためには、いくつかの任意の情報と共に、それぞれの「タイル」をエクスポートする必要があります。これらのSVGは、サイトのフロントエンドで使用するためにエクスポートされます。

これまでのところ私は、スクリプト書いた：

• は、すべてのテキストの概要を説明し、独自の層の上に、各グループを移動し、

• このテキストを含む層にtextFrameを追加：

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

• 及び技術のサイズにアートボードのサイズを変更し、新しいアートボードにそれぞれの層を移動させます。

これにより、すべてのアートボードを別のSVGとしてエクスポートすることができます。私は元の計画がそれをSVGに含めることと、フロントエンドのtextFrameからそれを読み取ることでテキストを正しく配置できるようにテキストを配置したので、textFrameを破棄したり隠したりします。

しかし、私は、この種の情報を含めることができるのだろうかと疑問に思っていますエクスポートするとSVG？たぶんdata-属性ですか？または、他の何か？

更新：

1. それは、彼らはHTMLのために本当に多くのだと私は代わりにデータ属性のXML名前空間を使用することを推奨されていました。エクスポート時にSVGにプログラムでXMLノードを追加するにはどうすればよいですか？
2. 私はvariablesとdataSetsも探しています。SVGエクスポートにこれらを含めることができるようです。

Answer 1

SVGはXMLに基づいているため、拡張します。これらのデータを編集するには

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

：

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

、あるいはそのような要素を

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

をそして、あなたはそのような属性を追加することができますので、あなたはそのような独自の名前空間を追加する必要があります私はinkscapeを使用することをお勧めします、それはあなたが各要素に任意の属性を設定することができますXMLエディタを提供しています。

私はここで見た：https://www.adobe.com/devnet/illustrator/scripting.htmlと61ページ（実際のバージョンJSのpdf）にはすべてのsvgエクスポートオプションがあり、 "余分なデータ"のようなものは見つかりませんでした。しかし、あなたはおそらく結果のSVGを後処理することができます。

輸出にSVG内の任意のデータを保存する方法：質問の一部1に答えるために

UPDATE

？

hereの61/62ページに記載されているように、現在のドキュメントのSVGをエクスポートすることができます。エクスポートがスクリプトによってトリガーされた後、そのファイルを読み込み、XMLとして解析し、それを見て、追加のデータを追加して新しいファイルとして保存するか、既存のファイルを置き換えて保存することができます。したがって、エクスポートプロセスにフックする代わりに、スクリプトからトリガーすることができます。もちろん、独自のSVGエクスポートを作成することも可能です。

第二部：

UI内の要素をイラストレーターにデータを追加する方法は？より複雑である

、したがって、あなたは現在の選択のためのデータを設定する入力を提供しています]ダイアログを開き、別のスクリプトが必要になります。さらに、エクスポートしたSVGにそのデータを追加できるように、そのデータを格納する方法を見つける必要があります。そのためには、おそらく2つのこと、すなわちデータの追加ファイルと、GraphItem（ページ74）のnameプロパティ（ページ74）を使用して、データをアイテムに接続することができます。しかし、いくつかのトラップがあります：アイテムを削除することができます。アイテムは他のSVGエレメントに変換することができます。アイテム名はユニークである必要があります。イラストレーターのDataと結果として得られるSVGを比較するのはかなり重いことになります。 しかし私は、確かにわかるイラストレーターのスクリプトにはそれほど深くない。

追記

Inkscapeは作成し、SVGのすべての機能に基づいて編集ベクターグラフィックスへのインタフェースを提供しています、プラスそれはあなたが後にしているかを正確に行うためのXMLエディタを持っています。 IllustratorからInkscapeに一度変換するだけです。 InkscapeはフォーマットとしてSVGを使用するので、SVGのサポートははるかに優れているため、イラストレーターのSVGサポートは比較的劣っています。 Inkscapeを使用すると、Graphic内で行うことはすべてSVGとして機能しますが、Illustratorの一部の機能はSVGでPixelベースのイメージとしてレンダリングする必要はなく、またレンダリングする必要もありません。

Answer 2

イラストレーターからsvgをエクスポートすると、属性としてid=layer_nameが追加されます。したがって、各エクスポートでレイヤー名を変更する場合は、idを使用して各svgを読み取ることができます。

別のファイルdimensions.jsonより読むことができます。または、IDに基づいて他の方法でデータを埋め込むこともできます。