0

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.

1
  • Hi. Welcome to GDSE. You can open an SVG in a text editor and edit it manually.
    – Billy Kerr
    Apr 8 '20 at 9:46
0

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);
}
1
  • Thanks for your code. But i would like a way to get this done in design tool itself Apr 14 '20 at 11:29
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.