Getting undesirable vertices when importing SVG from illustrator

jeykech · November 3, 2019, 7:54pm

Hi guys,

i’am having a little problem when importing an svg exported from illustrator.
in illustrator I made sure I had only the necessary vertices like this

but when imported to processing I get this
jpg
the code i’am using is as simple as that:

void impor(){
SVG=loadShape("Z.svg");
SVG.disableStyle();
int numChild=SVG.getChildCount();
println("num="+numChild);
for (int i=0; i<numChild; i++) {
PShape temp=SVG.getChild(i);
noFill();
stroke(128);
shape(temp);
int vCount=temp.getVertexCount();
for(int k=0;k<vCount;k++){
PVector vert=temp.getVertex(k);
noStroke();
fill(255,0,0);
ellipse(vert.x,vert.y,5,5);  
}
}
}

I tried using geomerative but I can not get any better results

thanx in advance!

kll · November 3, 2019, 10:31pm

hi, we know that SVG tool only provide basic concepts,
but in this case it looks like it is working.

and i not think is is making up these points.
so please study the source code of the Z.svg file
and find out ? if illustrator ? created that points
within the “p” path record.

sorry, at the moment i not even have a idea if there can be a filter code to
erase that points, because what i see as tricky is

the line crossings? ( that are the points you want )
the bend / change direction ( are basic needed points )

-* but the points inside a straight line you not need
( like for plotting… ) but you ?want? them only
if its a cross point.

you could try some vector math with change of direction
https://processing.org/reference/PVector_heading_.html
and if not skip that point.

jeykech · November 3, 2019, 10:56pm

thanx for your answer kII,

but in the next exemple, I kept only very simple shapes and I still have the same problem!

this is the code of the svg I get when exporting from illustrator

<path class="st0" d="M353.3956604,634.3685303v74.276123c-23.5338135,23.5338135-22.2436829,22.2422485-37.1384888,37.137085
  c-34.811615-34.8116455-2.7391052-2.7323608-37.1437073-37.1369629V634.367981
  c27.6722717-27.6660156,16.6853027-16.6918335,37.1297913-37.1363525
  C333.53479,614.5231323,335.7486877,616.7214966,353.3956604,634.3685303z"/>
<path class="st0" d="M279.1110535,349.9984131v-74.2825928c23.5342102-23.5337982,22.2593994-22.2504578,37.1542358-37.1452789
  c34.811615,34.8115997,2.7265015,2.7347717,37.1372986,37.1393585v74.2831726
  c-27.6723022,27.6664734-16.6971741,16.6944275-37.1416931,37.1388855L279.1110535,349.9984131z"/>
<path class="st0" d="M353.3800049,529.3249512h-74.2792053c17.5899048-17.5899353,19.9045715-19.8983459,37.1448975-37.1390991
  L353.3800049,529.3249512z"/>

I made sure to have only the needed vertices in illustrator, but I still got some strange points. I don’t understand what I am doing wrong!

kll · November 3, 2019, 11:03pm

sorry, did you analyze the file? ( in any editor )

do you still imply/think that processing SVG importer
is making that points up?

if illustrator is making that vertex points ( without you click… )
it is not your fault,

if processing SVG importer is dreaming that points bad luck.

you might want to post here:

your processing code
the svg file as code source ( or external download )
( use a very short one only with ONE shape / but having this problem )

using the
</> Preformatted text
button from the edit menu here.

ok, i see the posted SVG now,
are you able to identify that ADD POINTS in that file?

hm, if d= uses m l z ( move line close ) or even h v ( horizontal vertical line ) ok,
but i see

c = curve to

i think that you not want in your source,
possibly that is translated to

or however the importer deals with it.

kll · November 4, 2019, 5:46am

an other way would be to skip the whole

thing and make some lines in processing
( like here not just line code, as a line drawing editor with SVG export )

code little bit tricky / has too many options /
BUT NO SVG IMPORT!
more see here

or you just test the resulting SVG with your tool:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; text-rendering:auto; stroke:black; stroke-linecap:square; stroke-miterlimit:10; shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12px; stroke-dashoffset:0; image-rendering:auto;" width="400" height="400" xmlns="http://www.w3.org/2000/svg"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><g style="fill:rgb(0,0,200); stroke-width:2; stroke-linecap:round; stroke:rgb(0,0,200);"
    ><line y2="120" style="fill:none;" x1="100" x2="100" y1="80"
    /></g
    ><g style="fill:rgb(0,0,200); stroke-width:2; stroke-linecap:round; stroke:rgb(0,0,200);"
    ><line y2="80" style="fill:none;" x1="100" x2="140" y1="120"
      /><line y2="80" style="fill:none;" x1="140" x2="180" y1="80"
      /><line y2="160" style="fill:none;" x1="180" x2="100" y1="80"
      /><line y2="200" style="fill:none;" x1="100" x2="100" y1="160"
      /><line y2="80" style="fill:none;" x1="100" x2="220" y1="200"
      /><line y2="80" style="fill:none;" x1="220" x2="260" y1="80"
      /><line y2="240" style="fill:none;" x1="260" x2="100" y1="80"
      /><line y2="280" style="fill:none;" x1="100" x2="100" y1="240"
      /><line y2="80" style="fill:none;" x1="100" x2="300" y1="280"
      /><line y2="80" style="fill:none;" x1="300" x2="340" y1="80"
      /><line y2="320" style="fill:none;" x1="340" x2="100" y1="80"
      /><line y2="320" style="fill:none;" x1="100" x2="140" y1="320"
      /><line y2="120" style="fill:none;" x1="140" x2="340" y1="320"
      /><line y2="160" style="fill:none;" x1="340" x2="340" y1="120"
      /><line y2="320" style="fill:none;" x1="340" x2="180" y1="160"
      /><line y2="320" style="fill:none;" x1="180" x2="220" y1="320"
      /><line y2="200" style="fill:none;" x1="220" x2="340" y1="320"
      /><line y2="240" style="fill:none;" x1="340" x2="340" y1="200"
      /><line y2="320" style="fill:none;" x1="340" x2="260" y1="240"
      /><line y2="320" style="fill:none;" x1="260" x2="300" y1="320"
      /><line y2="280" style="fill:none;" x1="300" x2="340" y1="320"
      /><line y2="320" style="fill:none;" x1="340" x2="340" y1="280"
    /></g
  ></g
></svg
>

jeykech · November 4, 2019, 10:00am

this is what I did,I added a line to export my SVG from processing, and the I opened it again in illustrator.
I wrote the same script in illustrator, it only draws an ellipse on every vertex.
the added vertices did not show in illustrator !!!

script on illustrator
filename

in processing
jpg

import processing.svg.*;

PShape SVG1;


void setup() {
  smooth(8);
  size(400, 500);
  beginRecord(SVG, "export.svg");
}

void draw(){
 
 background(0);

impor();
save("jpg.jpg");
noLoop();
endRecord();
}

void impor(){
   SVG1=loadShape("Z1.svg");
  SVG1.disableStyle();

  int numChild=SVG1.getChildCount();
  println("num="+numChild);

  for (int i=0; i<numChild; i++) {
    PShape temp=SVG1.getChild(i);
    noFill();
    stroke(128);
    shape(temp);
    
      int vCount=temp.getVertexCount();
      for(int k=0;k<vCount;k++){
        PVector vert=temp.getVertex(k);
        noStroke();
        fill(255,0,0);
        ellipse(vert.x,vert.y,5,5);
        
      
      }

    }
  }

maybe there is something different in how both programs handle SVG!!
still stuck …

Tiemen · November 4, 2019, 10:12am

Seems to me like Illustrator added those extra points. You can tell by examining the triangle part of the SVG, which starts at its right bottom corner:

<path class="st0" d="
	M353.3800049,529.3249512   [ starting point ]
	h-74.2792053 [ move ~74 pixels to the left ]
	c17.5899048-17.5899353, [ make a small curve to halfway the line ]
	19.9045715-19.8983459, [ continue the line straight, to the top point ]
	37.1448975-37.1390991 [ move from the top to the start ] 
	L353.3800049,529.3249512 [ seal it with an absolute value ]
z"/>

My guess is that you didn’t put in that curve by accident, but that Illustrator added it. Perhaps you can alter the export settings. Otherwise you could tweak the source code of the SVG, but that takes quite some time for complex figures.

kll · November 4, 2019, 11:09am

yes very much likely.
so you understand that illustrator not make nice files for processing.
( but there might be options in illustrator )

? did you import my above SVG file in processing or illustrator?

but until now you not told us WHY you want to go that way?
and why use SVG
why start from other program? and not draw by processing?
( and import export SVG from there only )
why use the points ( with the circles) where just a line/vertex picture would look much alike.
as just making a jpg can not be the job / reason to use processing at all
( so would be nice to help us to understand the projects background )

jeykech · November 4, 2019, 12:46pm

well , what I am working at is an moroccan/islamic pattern that have tendency to get complicated,

I can not draw each piece by code, it will take forever to do it.

but I think I figure out where the problem is coming from, processing reconsider the control points of bezier curves as a vertex, I tried with this curve and as you can see, when I ran my sketch it draws ellipses on the control points and the vertices.
in my first exemple, the lines were bezier curves with control points heading the same direction as the lines, so the extra points are just control points.
screenshot fro illustrator :

result from processing
jpg

now I have to figure out how to tell processing to ignore the control points!
any ideas ?

jeykech · November 4, 2019, 12:58pm

I used a script in illustrator to remove all the control points and it is working fine for me now,it is working fine when I am having just straight lines but it will be a problem with curves
this is a result ,

but for future codes I would like to understand how to master the svg importation in processing !
what do you think guys ?

kll · November 4, 2019, 1:09pm

i like the Octagonal structure, what is the name / math for this?
is it this ?

good, but from the beginning, is there a script in illustrator to make that whole pattern?
or where you get it from?

jeykech · November 4, 2019, 1:34pm

the patterns are called “zellij” and there is a complex theory behind it. what you see here it is done manually. to start you can visit my behance page: https://www.behance.net/gallery/47885953/Zellij-obsession-Alphabet

but you can have similar results using the “Hankin’s pattern”, Daniel Shiffman did a tutorial on islamic star pattern, you can see it here: https://www.youtube.com/watch?v=sJ6pMLp_IaI

jeykech · November 4, 2019, 10:14pm

I think it is better to close this topic and start a new one with the correct question. thanx for all

Topic		Replies	Views
Problem with Bezier Curves when exporting SVG from illustrator, Coding Questions	4	1849	November 6, 2019
SVG from P3D: how to preserve curve continuity and vertex position? Libraries	2	690	March 18, 2021
How to deactivate polygonizer in geomerative Libraries	1	819	November 5, 2019
Imported SVG is PShape GROUP, cannot convert to ArrayList of PVector Coding Questions	2	864	July 17, 2020
SVG shape distortion when importing back in processing Coding Questions	4	854	January 26, 2020

Getting undesirable vertices when importing SVG from illustrator

Related topics