# Problem with Bezier Curves when exporting SVG from illustrator,

**URL:** <https://discourse.processing.org/t/problem-with-bezier-curves-when-exporting-svg-from-illustrator/15232>\
**Category:** Coding Questions\
**Created:** [November 4, 2019, 10:22pm UTC](https://discourse.processing.org/t/problem-with-bezier-curves-when-exporting-svg-from-illustrator/15232 "2019-11-04T22:22:47Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![jeykech](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jeykech](https://discourse.processing.org/u/jeykech)\
**Post date:** [November 6, 2019, 3:19pm UTC](https://discourse.processing.org/t/problem-with-bezier-curves-when-exporting-svg-from-illustrator/15232/5 "2019-11-06T15:19:16Z")

</div>

hi again,  
this is for future readers  
this topic is also related to this other one [topic1](https://discourse.processing.org/t/getting-undesirable-vertices-when-importing-svg-from-illustrator/15205/12)  
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 )

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0c311b341e5ab83df6e123ca94a517c1908a9614.gif)  
the same exemple with multiple shapes.

![anim](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aaed6a48121e13699322e20ae988df0d9bea8be9.gif)  
I hope this could help!

---

_[View the full topic](https://discourse.processing.org/t/problem-with-bezier-curves-when-exporting-svg-from-illustrator/15232)._