How to generate a curved line or closed shape via javascript?

I realise that you may not be interested in an actual SVG parser (I still don't know exactly why you need to input SVG string rather than just drawing the shape you want using Illustrator-style path data) but, for my own interest, I had a quick look at what's involved in parsing an SVG path data string and it seems that we can get a long way without too much effort—meaning that a very incomplete script can still handle many real-world examples.

So I've written this script that takes the svg path data string and creates a path item:

/**
 * Starting point for a simple SVG path data string parser
 * and converter to Illustrator path item.
 * eg. <path d="M200,0c57.3,0,100-.883,100,100s-56.589,104.282-75,100" />
 * @author m1b
 * @discussion https://community.adobe.com/t5/illustrator-discussions/how-to-generate-a-curved-line-or-closed-shape-via-javascript/m-p/14394430
 */
(function () {

    var doc = app.activeDocument;

    var testData1 = "M27.55,240.35c4.53-13.12,9.69-26.03,15.52-38.64,5.59-12.10,11.81-23.91,18.69-35.32,6.59-10.91,13.79-21.44,21.60-31.52,7.46-9.62,15.48-18.82,24.11-27.41,8.79-8.74,18.21-16.85,28.13-24.29,10.57-7.94,21.69-15.12,33.19-21.65,12.26-6.95,24.94-13.15,37.90-18.68,13.77-5.87,27.85-10.99,42.13-15.46,15.07-4.71,30.37-8.71,45.80-12.07,16.14-3.51,32.42-6.34,48.79-8.57,34.29-4.68,68.92-6.74,103.53-6.74H0v416.26c0-30.43,2.14-60.86,6.79-90.94,4.46-28.86,11.23-57.38,20.76-84.98Z";
    var testData2 = "M0,0c73.488,0,100,29.651,100,100l-89.4-9.5-.6,59.5c30.083,0,24.367,30,70,30";
    var testData3 = "M200,0c57.3,0,100-.883,100,100s-56.589,104.282-75,100c-215-50-29.536-110.551,0-110.551v46.035h117.828l13.587-24.81-28.355-20.674,28.355-20.086-17.131-40.76";

    var item1 = pathItemFromSVGData(doc, testData1);
    var item2 = pathItemFromSVGData(doc, testData2);
    var item3 = pathItemFromSVGData(doc, testData3);

})();


/**
 * Draws and returns an Illustrator PathItem created
 * using an SVG path element's data string.
 * NOTE: this function is a stub, and does not handle
 * many possibilities, eg. C and S symbols do not currently
 * calculate the `mirror` direction point, but it must.
 * @author m1b
 * @version 2024-02-08
 * @param {Document|Layer|GroupItem} container - the container for the new path item, a DOM object.
 * @param {String} svgPathDataString - an SVG path element's data string, eg. "M200,0c57.3,0,100-.883,100,100s-56.589,104.282-75,100".
 * @returns {PathItem}
 */
function pathItemFromSVGData(container, svgPathDataString) {

    // create the path item
    var item = container.pathItems.add();

    // parse the svg string
    var data = parseSVGPathDataString(svgPathDataString);

    var d, // the data for one svg command
        val, // the values for the command
        c, // sub-value(s)
        pos, // the most-recent position [x, y]
        p, // the most-recently created point (we don't need this but might want it for something)
        mirror; // the mirrored counterpart of a direction point

    while (d = data.shift()) {

        val = d.values;

        switch (d.symbol) {

            case 'M': // absolute move to
                pos = val[0];
                break;

            case 'm': // relative move to
                pos = rel(val[0]);
                break;

            case 'L': // absolute line to
                while (c = val.shift()) {
                    pos = c;
                    p = addPoint(item, pos);
                }
                break;

            case 'l': // relative line to
                while (c = val.shift()) {
                    pos = rel(c);
                    p = addPoint(item, pos);
                }
                break;

            case 'C': // absolute bezier curve
                while (val.length && (c = val.splice(0, 3))) {
                    if (p) {
                        p.rightDirection = c[0];
                        p.pointType = PointType.SMOOTH;
                    }
                    else {
                        addPoint(item, pos, undefined, c[0], PointType.CORNER);
                    }
                    p = addPoint(item, c[2], c[1], undefined, PointType.CORNER);
                    pos = c[2];
                }
                break;

            case 'c': // relative bezier curve
                while (val.length && (c = val.splice(0, 3))) {
                    if (p) {
                        p.rightDirection = rel(c[0]);
                        p.pointType = PointType.SMOOTH;
                    }
                    else {
                        addPoint(item, pos, undefined, rel(c[0]), PointType.CORNER);
                    }
                    p = addPoint(item, rel(c[2]), rel(c[1]), undefined, PointType.CORNER);
                    pos = rel(c[2]);
                    mirror = rel([-c[1][1], -c[1][0]]);
                }
                break;

            case 'S': // absolute smooth bezier curve
                while (val.length && (c = val.splice(0, 2))) {
                    if (p) {
                        p.rightDirection = mirror;
                        p.pointType = PointType.SMOOTH;
                    }
                    else {
                        addPoint(item, pos, undefined, mirror, PointType.SMOOTH);
                    }
                    p = addPoint(item, c[1], c[0], undefined, PointType.SMOOTH);
                    pos = c[1];
                    mirror = [-c[0][1], -c[0][0]];
                }
                break;

            case 's': // relative smooth bezier curve
                while (val.length && (c = val.splice(0, 2))) {
                    if (p) {
                        p.rightDirection = mirror;
                        p.pointType = PointType.SMOOTH;
                    }
                    else {
                        addPoint(item, pos, undefined, mirror, PointType.SMOOTH);
                    }
                    p = addPoint(item, rel(c[1]), rel(c[0]), undefined, PointType.SMOOTH);
                    pos = rel(c[1]);
                    mirror = rel([-c[0][1], -c[0][0]]);
                }
                break;

            case 'H': // absolute horizontal line
                while (undefined !== (c = val.shift())) {
                    pos[0] = c;
                    p = addPoint(item, pos);
                }
                break;

            case 'h': // relative horizontal line
                while (undefined !== (c = val.shift())) {
                    pos[0] += c;
                    p = addPoint(item, pos);
                }
                break;

            case 'V': // absolute vertical line
                while (undefined !== (c = val.shift())) {
                    pos[1] = c;
                    p = addPoint(item, pos);
                }
                break;

            case 'v': // relative vertical line
                while (undefined !== (c = val.shift())) {
                    pos[1] += c;
                    p = addPoint(item, pos);
                }
                break;

            case 'Q': // absolute quadratic Bézier curve
                break;

            case 'q': // relative quadratic Bézier curve
                break;

            case 'T': // absolute smooth quadratic Bézier curve
                break;

            case 't': // relative smooth quadratic Bézier curve
                break;

            case 'A': // absolute elliptical arc
                break;

            case 'a': // relative elliptical arc
                break;

            case 'Z': // close path
                item.closed = true;
                break;

            default:
                throw Error('pathItemFromSVGData: unknown symbol "' + d.symbol + '"');

        }

    }

    return item;

    /**
     * Return `point` offset by `pos`.
     * @param {point} point - [x,y]
     * @returns {point}
     */
    function rel(point) { return [pos[0] + point[0], pos[1] + point[1]]; };

};


/**
 * Adds a PathPoint to a PathItem.
 * @author m1b
 * @version 2024-02-02
 * @param {PathItem} item - the pathItem to add the point to.
 * @param {point} anchor - a point [x, y].
 * @param {point} [leftDirection] - a point [x, y] (default: copy of anchor point).
 * @param {point} [rightDirection] - a point [x, y] (default: copy of anchor point).
 * @param {PointType} [pointType] - an Illustrator PointType (default: PointType.CORNER).
 * @returns {PathPoint}
 */
function addPoint(item, anchor, leftDirection, rightDirection, pointType) {

    var p = item.pathPoints.add();
    p.anchor = anchor;
    p.leftDirection = leftDirection || anchor;
    p.rightDirection = rightDirection || anchor;
    p.pointType = pointType || PointType.CORNER;

    return p;

};

/**
 * Returns an array of data for each command
 * parsed from the given `svgPathDataString`.
 *
 * For example:
 *   "M200,0c57.3,0,100-.883,100,100Z"
 * Returns:
 *   [
 *     { symbol: "M", values: [[200, 0]] },
 *     { symbol: "c", values: [[57.3, 0], [100, 0.883], [100, -100]] },
 *     { symbol: "Z" }
 *   ]
 *
 * NOTE: because Illustrator, we flip the sign on Y axis coordinates.
 * @author m1b
 * @version 2024-02-02
 * @param {String} svgPathDataString - an SVG path element's data string, eg. "M200,0c57.3,0,100-.883,100,100s-56.589,104.282-75,100".
 * @returns {Array<Object>} - array of {symbol: values: }.
 */
function parseSVGPathDataString(svgPathDataString) {

    var commands = [],
        symbolMatcher = /([MmLlHhVvCcSsQqTtAaZ])([^MmLlHhVvCcSsQqTtAaZ]*)/g,
        minus = /(.)-/g,
        command,
        values,
        symbol,
        len,
        match;

    while (match = symbolMatcher.exec(svgPathDataString)) {

        symbol = match[1];
        command = { symbol: symbol };
        command.values = [];
        commands.push(command);

        if (0 === match[2].length)
            continue;

        // parse the coordinate values
        values = match[2].replace(minus, '$1,-').split(',');

        // has single numbers, not arrays
        var hasSingleNumbers = (-1 !== 'vhVH'.search(symbol));

        // add the values
        while (len = values.length) {
            if (hasSingleNumbers) {
                if ('v' === symbol.toLowerCase())
                    command.values.push(-Number(values.shift()));
                else
                    command.values.push(Number(values.shift()));
            }
            else
                command.values.push([Number(values.shift()), -Number(values.shift())]);
        }

    }

    return commands;

};

Edit 2024-02-08: fixed bug mentioned by @renél80416020 where I was adding extra points on curves.

My test data strings create these: (testData1 is yours @TestriteVisual).

- Mark

Hi @TestriteVisual, just to be clear, can you confirm that you are trying to write a SVG path data parser? For example to convert this:

<path
d="M0,0c73.488,0,100,29.651,100,100l-89.4-9.5-.6,59.5c30.083,0,24.367,30,70,30"
style="fill:#fff; stroke:#1d1d1b; stroke-miterlimit:10;" />

into an Illustrator pathItem?

If that is not correct please clarify what you are doing.

Some notes:

1. Your error occurs because the script uses Javascript ES6 .map method of Array that Extendscript doesn't have. Convert this to a "for" loop. You can try asking ChatGPT to do this for you.

2. parsing a svg path data string is significantly more involved than your sample script attempts to handle, for example "l" denotes *one or more* straight lines segments and that coordinates are relative to the previous point (Illustrator pathPoint values are relative to artboard or document origin.) Also you have to handle "v" (vertical line) and all the other symbols that svg uses.

3. The script attempts to use PathItem.setEntirePath() giving an array of fake (but fully specified) PathPoints, but setEntirePath method only creates pathItems with straight line segments and only accepts an array of points [x, y]. The only way I know to make the pathItem is something like this:

var myPathItem = doc.pathItems.add();
var p = myPathItem.pathPoints.add();
p.anchor = [0, 0];
p.leftDirection = [10, 10];
p.rightDirection = [10, -10];
p.pointType = PointType.SMOOTH;

Sorry it isn't a simple fix, but I hope that will get you pointed in a better direction.

- Mark