Export rendition to svg

Adobe XD UXP Plugin API
1

Hi, I am trying to simply modify one of your code samples (how-to-export-a-rendition) to export to different file formats. It seems to be working fine with .png and .pdf, it doesn’t seem to work with .eps and .jpg.

Here’s my sample code to try to export a selected item to .svg. Basically, I am just replacing the file format.

const application = require("application");
const fs = require("uxp").storage.localFileSystem;

async function exportRendition(selection) {
if (selection.items.length > 0) {
    const folder = await fs.getFolder();
    const file = await folder.createFile("rendition.svg");
    const renditions = [{
        node: selection.items[0],
        outputFile: file,
        type: "svg",
        scale: 1
    }];

    application.createRenditions(renditions)
        .then(results => {
            // create the dialog
            let dialog = document.createElement("dialog");

            // main container
            let container = document.createElement("div");
            container.style.minWidth = 400;
            container.style.padding = 40;

            // add content
            let title = document.createElement("h3");
            title.style.padding = 20;
            title.textContent = `Rendition has been saved at ${file.nativePath}`;
            container.appendChild(title);

            // close button
            let closeButton = document.createElement("button");
            closeButton.textContent = "Got it!";
            container.appendChild(closeButton);
            closeButton.onclick = (e) => {
                dialog.close();
            }

            document.body.appendChild(dialog);
            dialog.appendChild(container);
            dialog.showModal()
        })
        .catch(error => {
            console.log(error);
        })
}
}

module.exports = {
commands: {
    exportRendition
}
};

Thanks for your help!

2

As specified at https://adobexdplatform.com/plugin-docs/reference/application#applicationcreaterenditionsrenditions, you can use application.RenditionType.PNG, application.RenditionType.JPG, application.RenditionType.SVG or application.RenditionType.PDF as type.

Those are string constants, which is probably why you were able to use "png" (since probably application.RenditionType.PNG just evaluates to "png", but not others (which maybe map to other strings like e.g., "jpeg" for application.RenditionType.JPG…

I hope this helps,
Best,
Pablo

PS: Like with the normal renditions, .eps isn’t supported.

2 Likes
3

@pklaschka, that worked.

attaching the right code snippet in case it helps someone else.
(Also, not sure why I wrote eps… duh. I meant svg)

Thank you!

const application = require("application");
const fs = require("uxp").storage.localFileSystem;

async function exportRendition(selection) {
if (selection.items.length > 0) {
    const folder = await fs.getFolder();
    const file = await folder.createFile("rendition.svg");
    const renditions = [{
        node: selection.items[0],
        outputFile: file,
        minify:true,
        embedImages:true,
        type: application.RenditionType.SVG,
        scale: 1
    }];

    application.createRenditions(renditions)
        .then(results => {
            // create the dialog
            let dialog = document.createElement("dialog");

            // main container
            let container = document.createElement("div");
            container.style.minWidth = 400;
            container.style.padding = 40;

            // add content
            let title = document.createElement("h3");
            title.style.padding = 20;
            title.textContent = `Rendition has been saved at ${file.nativePath}`;
            container.appendChild(title);

            // close button
            let closeButton = document.createElement("button");
            closeButton.textContent = "Got it!";
            container.appendChild(closeButton);
            closeButton.onclick = (e) => {
                dialog.close();
            }

            document.body.appendChild(dialog);
            dialog.appendChild(container);
            dialog.showModal()
        })
        .catch(error => {
            console.log(error);
        })
}
}

module.exports = {
commands: {
    exportRendition
}
};
3 Likes
4

@lorenzo @pklaschka
I will fix the sample and tutorial to prevent confusion like this. Thank you both!

2 Likes