4

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.
Brandon Durham
  • 7,096
  • 13
  • 64
  • 101

2 Answers2

1

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.

philipp
  • 15,947
  • 15
  • 61
  • 106
  • My goal is to make this part of the Illustrator ExtendScript export script and not require further editing of the file. That could potentially double the production time for an already-long process. I’ currently storing the information in an `areaText` object, but I’d like a more elegant solution. Something that puts the data _into_ the actual SVG file. – Brandon Durham Mar 16 '17 at 19:52
  • Well then you have to write a quite heavy illustrator script that offers a UI and way to keep track of the data, probably with an additional file. If it is possible to hook into the export process, you need to add the data there, but I don't know if this can be done. Inkscape offers all the abilities to edit the graphics and the data, so if you switch to it, you have got your Solution. – philipp Mar 16 '17 at 19:58
  • GREAT stuff. Thanks, @philip! – Brandon Durham Mar 17 '17 at 14:56
0

If you export an svg from illustrator it has id=layer_name added as an attribute. So if you change the layer names on each export, you can read each svg using the id.

Than you could read from a separate dimensions.json file. Or embed the data in some other way based on the id.

Jeremy S.
  • 1,086
  • 8
  • 18
  • I thought of this but because these SVG will need to be uploaded to a CMS and then later consumed by an API, I really need the data to ride along with the SVG. The CMS offers some overrides for these settings (position, mostly) but the “default” will be what was exported from Illustrator. – Brandon Durham Mar 16 '17 at 16:40