API to get the SVG of an element as a string

Adobe XD UXP Plugin API
1

The renditions API allows you to export a scene node to an SVG file but is there a way to get the SVG contents without writing the file?

Note: It’s possible to export SVG to disk and then read that value back in, but that’s an asynchronous operation and so that creates a chain of calls that also have to be asynchronous to keep everything in the right order. This feature, if possible, would return the string value right away.

Use Case
Yoshi is a designer that is using XD and Illustrator. He likes to work in XD for a few specific use cases and then import his work into Illustrator. He has been manually exporting each shape to disk and then manually importing each SVG file.

Today a new API is available to get the SVG string. He’s written a plugin that gets the SVG of the selected scene node, modifies it and then copies that value to the clipboard. He then goes to Illustrator and pastes the SVG from the clipboard thus importing his shape at the same time.

Use Case
Melanie is a developer that export SVG for a design studio. She exports specific scene nodes and uploads them to the company intranet.

She’s written a plugin to export a few specific nodes that update the site dynamically. In the past she had to export 10 svg files and upload them each to the server. With the new SVG string feature she can get all of the exported SVG string data and send it in one request and parse it into individual files on the server.

2

Just to clearify: What you’re asking for is basically a “smaller”, possibly synchronous way of achieving this:

async function getSVG(node) {
  const fs = require('uxp').storage.localFileSystem
  const folder = await fs.getTemporaryFolder();
  const file = await folder.createFile('temp.svg');

  await require('application').createRenditions(
    [{ type: 'svg', node: node, outputFile: file }]
  );

  const svg = await file.read();

  await file.delete();
  return svg;
}
2 Likes
3

Yes. Thank you for the example. Can I use this? :slight_smile: It is quite concise.

Another reason for this is that writing to disk can be a slow process.

I had one test project with 20 artboards that exported 50 images and the operation took about 50 seconds. This was on a Surface Book with an SSD. The same export on a Mac was about 3 seconds. So if the disk read or write speed is slow the whole operation ends up slow.

There was another case recently where the developers working on a compiler removed the console standard output (log messages possibly to a log file) and put the output behind a flag. That reduced compile times by 20-25%. Another developer reported his compile times went from 80 seconds down to 20 seconds!

1 Like
4

:+1: – you’ve got my vote for that one :wink:

One interesting question would be where this would “sit”. The way I see it, there are two main options:

  1. Similar to createRenditions() as something like require('application').getSVG(node: SceneNode): string
  2. As an instance method of SceneNode (something like node.getSVG(options: {minimize, [...]}): string)

Personally, I would prefer option 1 (since it isn’t really a scenegraph operation and therefore doesn’t really fit fit other methods like resize, rotate, move etc., but I could also understand why some might prefer the second option (having to “get” a method from another module to do something as “trivial” as this might seem too cumbersome).

2 Likes