Problem with Bezier Curves when exporting SVG from illustrator,

Processing Coding Questions
5

hi again,
this is for future readers
this topic is also related to this other one topic1
well, after being lost in translation between illustrator and processing, I came to a solution that works fine form for the moment and I think could be developed.
for my exemple , let’s say I have a geometrical shape and I wanted to connect the middle points of the segments with lines. this is my workflow:

  1. draw vectors in illustrator, using all the features that illustrator has to offer.
  2. export as SVG
  3. import to processing using PShape or geomerative library
  4. do the stuff I want in processing.

this seems simple but for some reasons the export and import have many issues. I am not sure but for the moment I tend to believe that the tools used to draw in illustrator influence how the shape is exported. a simple pen drawing will have no problem but when using Pathfinder or compound shapes and then expanding them gives me problems.
so my solution is this :

after finishing the drawing in illustrator, run a script that copy the same path in a new layer using only the necessary information. this is done by:

  1. create a new layer illustrator
  2. selecting all the paths that you want to export
  3. expand them, ungroup them , release all masks ,…
  4. run this script ( copy it in any text editor and save it as filename.js, then go to File>scripts>other scripts and navigate to your file)
  5. delete the old layer
  6. save as .svg

(this is an illustrator script and not processing script !!!)
( and thanx to fabianmoronzirfas from stackoverflow )

var doc = app.activeDocument; // get the active doc
var artLayer = doc.layers[0];
mysel = app.activeDocument.selection;
main();
function main(){

    if(mysel == null) {
    // check if something is slected
    alert ("You need to sevlect a path");
    return;
    }
for(var kk=0;kk<mysel.length;kk++){
var coords = new Array(); // make a new array for the coords of the path
var directions = new Array();

var sel = mysel[kk];
    var points = sel.pathPoints;// isolate pathpoints
    // loop points
    for (var i = 0; i < points.length; i++) {
    // this could be done in one lines
    // just to see whats going on line like
//~      coords.push(new Array(points[i].anchor[0],points[i].anchor[1]));
    var p = points[i]; // the point
    var a = p.anchor; // his anchor
    var px = a[0];// x
    var py = a[1]; // y
    var ldir = p.leftDirection;
    var rdir = p.rightDirection;
    directions.push(new Array(ldir,rdir));
    coords.push(new Array(px,py));// push into new array of array   
  }
var new_path = artLayer.pathItems.add(); // add a new pathitem

new_path.setEntirePath(coords); // now build the path
    // check if path was closed
if(sel.closed){
    new_path.closed = true;
    new_path.fillColor = makeColor(0,0,255);// the color is to see difference
    // script could be modified to copy the color and stroke of each path
    new_path.filled = true;
    }

// set the left and right directions
for(var j = 0; j < new_path.pathPoints.length;j++){

    new_path.pathPoints[j].leftDirection = directions[j][0];
    new_path.pathPoints[j].rightDirection = directions[j][1];    
    }
}}

function makeColor(r,g,b){
    var c = new RGBColor();
    c.red   = r;
    c.green = g;
    c.blue  = b;
    return c;
}

in this Gif you can see the first frame is before running the script and the second is after running the script and exporting the svg again.

anim1
the same exemple with multiple shapes.

anim
I hope this could help!

6 Likes