Search code examples
javascriptsvgadobe-illustratorextendscript

Is it possible to save arbitrary data in SVG on export?

Tile layout

I have an Illustrator file with upwards of 50 groups on one layer and one artboard. The groups are laid out like tiles in the file. The idea is that we export each tile individually and reassemble on the front-end of the site. In order to do that I need to be able to export each “tile” along with a few pieces of arbitrary information. These SVGs will be exported for use on the front-end of a site.

So far I’ve written a script that:

  • outlines all text and moves each group onto its own layer;

  • adds a textFrame to the layer containing this text:

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

  • and moves each layer to a new artboard, resizing the artboard to the size of the art;

This gets me set up just right for exporting every artboard as a separate SVG. I put the text in place because my original plan was to include it in the SVG and read it from the textFrame in the front-end so I can set the position of the tile correctly, then I would destroy or hide the textFrame.

But now I’m wondering, is it possible to include this kind of information inside the SVG when exported? Maybe as a data- attribute? Or something else?

Updates:

  1. It was recommended that I use an XML namespace instead of a data-attribute as they’re really more for HTML. How can I programmatically add XML nodes to an SVG on export?
  2. I’m also looking into variables and dataSets as it seems you can include these with the SVG export.
Solution

  • Since SVG is based on XML, you extend it. Therefore you need to add your own namespace like that:

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

    And then you can add attributes like so

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

    Or even elements like so:

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

    To edit those data I recommend to use inkscape, it offers an xml editor with which you can set arbitrary attributes to each element.

    I had a look here: https://www.adobe.com/devnet/illustrator/scripting.html and on page 61 (actual version JS pdf) there are all the svg export options and could not find anything like "extra data". But you could probably postprocess the resulting svg.

    UPDATE

    To answer part 1 of the question:

    How to save arbitrary data in SVG on export?

    You can write an Extension that by itself exports an SVG of the current Document as described here, page 61/62. After the export was triggered by the script you can read that file, parse it as XML, walk through it, add additional data and save it again, as new File or by replacing the existing one. So instead of hooking in the export Process, you can trigger it from the script. And of course is it possible to create your own SVG export.

    The second Part:

    How to add Data to Illustrator elements within the UI?

    That is more complicated, therefore you need another script that Opens a Dialog, which offers an Input to set the Data for the current selection. Additionally you need to find a way to store that data, so that you can add it to the exported SVG afterwards. For that you might probably us two things, an additional file for the data, and the name property of each GraphItem (Page 74), to connect the Data to the Item. But there are some traps like: Items can be removed. Items can be converted to other SVG elements, Item names needs to be unique and I just guess that I can become a quite heavy thing to compare the illustrator Data, with the resulting SVG. But I am not that deep into Illustrator scripting that I can tell for sure.

    SIDENOTE

    Inkscape offers an Interface to create and Edit Vector graphics based on all the capabilities of SVG, plus it has an XML Editor to do exactly what you are after. Just convert once from Illustrator to Inkscape and that's it. Since Inkscape uses SVG as format, its support for SVG is much better, whereby Illustrators support for SVG is comparably poor. Using Inkscape will ensure you, that all you do within the Graphic, will work as SVG, but some Illustrator features don't and have to rendered as Pixel-based image with the SVG.