How to add metadata for design elements created using Sketch/Adobe AI

Question

I am creating a parsing tool with the following functionality:

Takes an SVG file and parse the elements inside the SVG and finds elements that have some custom attributes like type="table".

I was able to do this, provided the SVG file has the attributes as specified.

I am looking for way to set this custom attribute/metadata to the elements in the design file using Sketch/Adobe AI, which will be exported as SVG for parsing.

I have no idea in using these tools and any help would be highly appreciated.

Answer 1

You can do this through JavaScript. You can run it as a script, (File > Script); but ideally run them in Visual Studio Code, just make sure you install the Adobe ExtendScript Toolkit addons. Most of it should be done with svgFile.write(string);, which is where you concatenate the attributes of the SVG.

See code below:

// InlineSVGToAI.jsx for Adobe Illustrator
// Description: The script inserts the svg code as an object from the clipboard into the Adobe Illustrator.
//              Adobe Illustrator v.22.1 (March, 2018) can insert svg graphics without a script.
// Date: 2018
// Requirements: Adobe Illustrator CC 2014+
// Author: Alexander Ladygin, email: i@ladygin.pro
// Code refactoring: Sergey Osokin, email: hi@sergosokin.ru
// ==========================================================================================
// Installation:
// 1. Place script in:
//    Win (32 bit): C:\Program Files (x86)\Adobe\Adobe Illustrator [vers.]\Presets\en_GB\Scripts\
//    Win (64 bit): C:\Program Files\Adobe\Adobe Illustrator [vers.] (64 Bit)\Presets\en_GB\Scripts\
//    Mac OS: <hard drive>/Applications/Adobe Illustrator [vers.]/Presets.localized/en_GB/Scripts
// 2. Restart Illustrator
// 3. Choose File > Scripts > InlineSVGToAI
// ============================================================================
// How to use:
// 1. Run script
// 2. Paste your svg code in textarea
// 3. Press button "Paste"
// ==========================================================================================
// NOTICE:
// This script is provided "as is" without warranty of any kind.
// Free to use, not for sale.
// ==========================================================================================
// Released under the MIT license.
// http://opensource.org/licenses/mit-license.php
// ==========================================================================================

#target illustrator
app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;

function main() {
  if (app.documents.length == 0) {
    alert("Error: \nOpen a document and try again.");
    return;
  }
  uiDialog().show();
}

// Create dialog window
function uiDialog() {
  var win = new Window("dialog", "Inline SVG To AI", undefined),
    winPanel = win.add("panel");
    winPanel.alignChildren = ['fill', 'fill'];

  // Field for pasting the SVG code
  var winSVGCodeTitle = winPanel.add("statictext", [0, 0, 200, 15], "Please paste your svg code:"),
    SVGCode = winPanel.add("edittext", [0, 0, 200, 150], "", { multiline: true, scrolling: true }),
    insertOpen = winPanel.add("checkbox", undefined, 'Insert through "Open" (without crash AI)');
  insertOpen.value = false;
  SVGCode.active = true; // Set state

  // Buttons
  var winButtonsGroup = win.add("group"),
    pasteButton = winButtonsGroup.add("button", [0, 0, 100, 30], "Paste"),
    closeButton = winButtonsGroup.add("button", [0, 0, 100, 30], "Cancel");

  // Paste button action
  pasteButton.onClick = function () {
    var code = SVGCode.text;
    if (code) {
      importSVG(code);
      win.close();
    } else {
      alert("You didn't insert the SVG code.");
    }
  };

  // Close window
  closeButton.onClick = function () {
    win.close();
  };

  function importSVG(string) {
    var svgFileName = "inlineSVGtoAI.svg",
      svgFile = new File("" + Folder.temp + "/" + svgFileName),
      backDoc = activeDocument;

    svgFile.open("w");
    svgFile.write(string);
    svgFile.close();
    if (!insertOpen.value && (activeDocument.importFile instanceof Function)) {
      activeDocument.importFile(svgFile, false, false, false);
    }
      else {
        app.open(svgFile);
        var l = activeDocument.layers,
        i = l.length;
        while (i--) { l[i].hasSelectedArtwork = true; }
        app.copy();
        activeDocument.close(SaveOptions.DONOTSAVECHANGES);
        backDoc.activate();
        app.paste();
      }
    $.sleep(500);
    svgFile.remove();
  }

  return win;
}


function showError(err) {
  if (confirm(scriptName + ": an unknown error has occurred.\n" +
    "Would you like to see more information?", true, "Unknown Error")) {
    alert(err + ": on line " + err.line, "Script Error", true);
  }
}

try {
  main();
} catch (e) {
  showError(e);
}

Answer 2

I ended up using layer names to identify the custom data. I have named the layer to start with table- so when exporting as SVG, the code was generated with this layer name as ID. Ex: <g id="table-xxx">. I can use a parser to identify elements with ID starting with table-.

Hope it helps somebody.