Skip to main content
Kernzy
Inspiring
November 22, 2022
Answered

Pasting SVG via Script

  • November 22, 2022
  • 2 replies
  • 1035 views

There are probably alternate ways to achieve my end goal, but I am specifically looking to see if anyone has figured out how to paste an SVG from a script. 

 

 I had some hope in setting the SVG code as a string and then pasting that when you click a button...but I'm here. This is super low on my priority list, but I wanted to see if this was a possibility.

This topic has been closed for replies.
Correct answer m1b

Hi @Kernzy, I've written a quick script to (I think) do what you want. At least it may give you the building blocks you need. Let me know if it helps.

- Mark

/**
 * @discussion: https://community.adobe.com/t5/illustrator-discussions/pasting-svg-via-script/m-p/13365029
 */
(function () {

    var example = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M10,30V20H0V10H10V0H20V10H30V20H20V30Z" /></svg>';

    var doc;
    if (app.documents < 0)
        doc = app.documents.add();
    else
        doc = app.activeDocument;

    // show UI
    var w = new Window("dialog", 'Paste SVG'),
        et = w.add("edittext", undefined, example, { multiline: true, scrolling: true });
    et.maximumSize.height = w.maximumSize.height - 100;
    et.minimumSize.height = 250;
    et.minimumSize.width = w.maximumSize.width - 100;
    var buttonGroup = w.add("Group { alignment:['fill','center'], alignChildren: ['right','center'] }");
    var cancelButton = buttonGroup.add("button", undefined, "Cancel", { name: "cancel", alignment: ['right', 'center'] });
    var placeButton = buttonGroup.add("button", undefined, "Place", { name: "ok", alignment: ['right', 'center'] });

    placeButton.onClick = function () {
        var svgGroupItem = placeSVGFromString(doc, et.text);
        if (svgGroupItem)
            w.close(1);
    }

    w.show();


    /**
     * Places svg markup into
     * Illustrator as a GroupItem.
     * @author m1b
     * @param {String} svgString - the SVG markup.
     * @returns {GroupItem}
     */
    function placeSVGFromString(doc, svgString) {

        var previousInteractionLevel = app.userInteractionLevel;
        app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;

        try {

            var svgTempPath = Folder.temp.fsName + '/tmp.svg',
                file = new File(svgTempPath);

            file.open('w');
            file.encoding = "UTF8";
            file.write(svgString);
            file.close();

            return doc.groupItems.createFromFile(file);

        }
        
        catch (error) {
            alert('Place SVG Failed.');
        }

        app.userInteractionLevel = previousInteractionLevel;

    }

})();

2 replies

m1b
m1bCorrect answer
Community Expert
November 22, 2022

Hi @Kernzy, I've written a quick script to (I think) do what you want. At least it may give you the building blocks you need. Let me know if it helps.

- Mark

/**
 * @discussion: https://community.adobe.com/t5/illustrator-discussions/pasting-svg-via-script/m-p/13365029
 */
(function () {

    var example = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M10,30V20H0V10H10V0H20V10H30V20H20V30Z" /></svg>';

    var doc;
    if (app.documents < 0)
        doc = app.documents.add();
    else
        doc = app.activeDocument;

    // show UI
    var w = new Window("dialog", 'Paste SVG'),
        et = w.add("edittext", undefined, example, { multiline: true, scrolling: true });
    et.maximumSize.height = w.maximumSize.height - 100;
    et.minimumSize.height = 250;
    et.minimumSize.width = w.maximumSize.width - 100;
    var buttonGroup = w.add("Group { alignment:['fill','center'], alignChildren: ['right','center'] }");
    var cancelButton = buttonGroup.add("button", undefined, "Cancel", { name: "cancel", alignment: ['right', 'center'] });
    var placeButton = buttonGroup.add("button", undefined, "Place", { name: "ok", alignment: ['right', 'center'] });

    placeButton.onClick = function () {
        var svgGroupItem = placeSVGFromString(doc, et.text);
        if (svgGroupItem)
            w.close(1);
    }

    w.show();


    /**
     * Places svg markup into
     * Illustrator as a GroupItem.
     * @author m1b
     * @param {String} svgString - the SVG markup.
     * @returns {GroupItem}
     */
    function placeSVGFromString(doc, svgString) {

        var previousInteractionLevel = app.userInteractionLevel;
        app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;

        try {

            var svgTempPath = Folder.temp.fsName + '/tmp.svg',
                file = new File(svgTempPath);

            file.open('w');
            file.encoding = "UTF8";
            file.write(svgString);
            file.close();

            return doc.groupItems.createFromFile(file);

        }
        
        catch (error) {
            alert('Place SVG Failed.');
        }

        app.userInteractionLevel = previousInteractionLevel;

    }

})();
Kernzy
KernzyAuthor
Inspiring
November 22, 2022

B-E-A-UTIFUL! This is exactly what I was trying to do and some more. Thank you so much!

m1b
Community Expert
November 22, 2022

Awesome!

chrisg11235813
Participating Frequently
November 22, 2022
m1b
Community Expert
November 22, 2022

@chrisg11235813, a good thought but, interestingly, we don't seem to be able to "place" (ie. link to) an svg file. See GroupItems.createFromFile() instead. - Mark