Small helpers to convert svg points to arrays

draw.js

// Example
// Input: getCoordinatesFromSvgCoordinatesString('M0.5,0.5 L0.5,89.5 L141.5,89.5 L141.5,0.5 L0.5,0.5 Z')
// Output: array like example above

function getCoordinatesFromSvgCoordinatesString(svgString){
    var coordinates = [];
    var svgParts = svgString.split(' ');
    var cursor = {
        "x": 0,
        "y": 0
    }
    for (partIndex in svgParts) {
        var svgPart = svgParts[partIndex];
        var command = svgPart.charAt(0);
        var coordinatesString = svgPart.substr(1);
        if (coordinatesString.length > 0) {
            var coordinates = {
                "x": Number(coordinatesString.split(',')[0]),
                "y": Number(coordinatesString.split(',')[1])
            }

            console.log(svgPart, command, coordinatesString, coordinates);

            if (command === 'M' || command === 'L') {
                cursor.x = coordinates.x;
                cursor.y = coordinates.y;
            } else if (command === 'l') {
                cursor.x += coordinates.x;
                cursor.y += coordinates.y;
            }
            coordinates.push( {'x': cursor.x, 'y': cursor.y} ); // as object
            // coordinates.push( [cursor.x, cursor.y] ); // as array
        }
    }
    return coordinates;
}

svgPoints.js

// Example
// Input: getCoordinatesFromSvgPoints('147.055423 390.164091 118.213964 420.623604 58.5482381 424.722117 57.4517619 408.759732 110.888652 405.089085 130.776768 384.085214 128.596792 333.816147 144.836143 319.47753 160.83296 307.572453 183.305347 305.762465 200.710745 304.127539 221.79751 304.367761 251.371317 302.060223 276.07368 296.229477 291.37587 288.344598 305.032087 277.791642 306.898588 251.497377 335.888966 195.350641 375.69222 190.129486 373.34736 164.622872 374.230243 120.971499 413.741656 109.952787 423.018505 99.1960481 435.084405 78.9103603 448.835746 87.0896397 436.052016 108.582173 422.698995 124.065335 389.986426 133.188025 389.362209 164.050492 393.034067 203.991751 346.266679 210.12642 322.625377 255.913403 320.484627 286.071141 300.003271 301.898281 281.658572 311.350897 253.846085 317.915757 222.329758 320.374863 201.369594 320.136083 184.748754 321.697314 166.69849 323.15184 154.924941 331.913897 144.912709 340.754248');
// Output: [ [ 147.055423, 390.164091 ], [ 118.213964, 420.623604 ], [ 58.5482381, 424.722117 ], [ 57.4517619, 408.759732 ], [ 110.888652, 405.089085 ], [ 130.776768, 384.085214 ], [ 128.596792, 333.816147 ], [ 144.836143, 319.47753 ], [ 160.83296, 307.572453 ], [ 183.305347, 305.762465 ], [ 200.710745, 304.127539 ], [ 221.79751, 304.367761 ], [ 251.371317, 302.060223 ], [ 276.07368, 296.229477 ], [ 291.37587, 288.344598 ], [ 305.032087, 277.791642 ], [ 306.898588, 251.497377 ], [ 335.888966, 195.350641 ], [ 375.69222, 190.129486 ], [ 373.34736, 164.622872 ], [ 374.230243, 120.971499 ], [ 413.741656, 109.952787 ], [ 423.018505, 99.1960481 ], [ 435.084405, 78.9103603 ], [ 448.835746, 87.0896397 ], [ 436.052016, 108.582173 ], [ 422.698995, 124.065335 ], [ 389.986426, 133.188025 ], [ 389.362209, 164.050492 ], [ 393.034067, 203.991751 ], [ 346.266679, 210.12642 ], [ 322.625377, 255.913403 ], [ 320.484627, 286.071141 ], [ 300.003271, 301.898281 ], [ 281.658572, 311.350897 ], [ 253.846085, 317.915757 ], [ 222.329758, 320.374863 ], [ 201.369594, 320.136083 ], [ 184.748754, 321.697314 ], [ 166.69849, 323.15184 ], [ 154.924941, 331.913897 ], [ 144.912709, 340.754248 ] ]

function getCoordinatesFromSvgPoints(pointsString){
  var coordinates = [];
  var points = pointsString.split(' ');
  for (var p = 0; p < points.length; p+= 2) {
    var pointX = Number(points[p]);
    var pointY = Number(points[p + 1]);
    coordinates.push({"x": pointX, "y": pointY}); // as object
    //coordinates.push([pointX, pointY]); // as array
  }
  return coordinates
}