Parse SVG file from Adobe Illustrator

Processing Coding Questions
1

Hello there,

I’m trying to parse a SVG file exported from Adobe Illustrator by using the PShape method ps.getChild(index);.
At the end I want to extract the coordinates and the size of all the rectangles.

The problem is that I don’t understand the parameters in the documentation :

and there’s an error :

Ignoring <style> tag.

Thanks in advance

The SVG code :

<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 631 999">
    <defs>
        <style>.cls-1{fill:red;stroke:#000;stroke-miterlimit:10;}</style>
    </defs>
    <title>test</title>

    <rect class="cls-1" x="44.5" y="157.5" width="302" height="130"/>
    <rect class="cls-1" x="195.5" y="510.5" width="362" height="173"/>
    <rect class="cls-1" x="0.5" y="730.5" width="212" height="268"/>
    <rect class="cls-1" x="475.5" y="0.5" width="155" height="140"/>
</svg>

The processing code :

PShape s;

void setup(){
  size(400,400);
  
  s = loadShape("test.svg");
  
  println(s.getChildCount());
}


void draw(){
  background(0);
  
  shape(s.getChild(1),0,0);
}
2 Likes
2

Hi joseph!

When you load your svg file to processing, you have four shapes. You can get that number from any file using .getChildCount() PShape method. You can use that to loop through the PShape, and get sub-information from it, such as vertices. Your svg code right now won’t be able to store information that getVertexCount() would work for, so I opened your svg file in Illustrator and cut it in one corner, and saved the file to svg again.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<title>test</title>
<polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="531.031,287.788 228.729,287.788 228.729,157.658 
	531.031,157.658 531.031,287.788 "/>
<polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="742.242,511.011 742.242,684.185 379.88,684.185 
	379.88,511.011 742.242,511.011 "/>
<polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="396.896,731.231 396.896,999.499 184.685,999.499 
	184.685,731.231 396.896,731.231 "/>
<polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="815.315,140.641 660.16,140.641 660.16,0.5 815.315,0.5 
	815.315,140.641 "/>
</svg>

PShape s;

void setup(){
  size(400,400);
  
  s = loadShape("test.svg");
  
  //Disable style that comes with s
  s.disableStyle();
  
  //Loop through PShape
  for(int i = 0; i < s.getChildCount(); i++){
    for(int j = 0; j < s.getChild(i).getVertexCount(); j++){
      println(s.getChild(i).getVertex(j));
    }
  }
}


void draw(){
  background(0);
  
  fill(255,0,0);
  shape(s.getChild(0),0,0);
}

That way you can get the coordinates of your rectangles, and with that I’m sure you can use it to do anything else. Hope this isn’t too late of a reply, I just spotted this thread among others that had no responses.

2 Likes
3

Thanks for your answer ! :wink:

Could you give more informations about that?

4

Sure. I used the scissors tool (shortcut C) in Illustrator, and clicked on one control point of the rectangle path. This turns it from a closed path to an open path. I did the same for the other rectangles and then I saved to svg. I wanted to avoid the svg saving the shapes as because you can’t query those shapes vertices in Processing.

I think you can probably suggest this as an issue for Processing to support other <tags /> or have methods for querying information from it.

1 Like
5

Ok thanks I uderstood ! :slight_smile:

Did you add those lines ? Because when I exported to SVG in Illustrator, they weren’t there.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
6

I think Illustrator did that. I might have been messing around with the header a bit, but illustrator saves with that at the top.

7

Ok thanks.
I have an other error :

  • ArrayIndexOutOfBoundsException: 1

with this svg_file :

<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 558 790">
    <defs>
        <style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style>
    </defs>
    <title>test</title>
    <polyline class="cls-1" points="303.5 0.5 303.5 160.5 0.5 160.5 0.5 0.5 303.5 0.5"/>
    <polyline class="cls-1" points="374.5 271.5 374.5 451.5 73.5 451.5 73.5 271.5 374.5 
    271.5"/>
    <polyline class="cls-1" points="557.5 39.5 557.5 134.5 416.5 134.5 416.5 39.5 557.5 
    39.5"/>
    <polyline class="cls-1" points="374.5 626.5 374.5 789.5 149.5 789.5 149.5 626.5 374.5 
    626.5"/>
</svg>

and :

PShape s;

void setup(){
  size(400,400);
  
  s = loadShape("poly.svg");
  
  //println("Number of shapes : " + s.getChildCount());
}


void draw(){
  background(255);
}
8

Does your svg file works when you import it with loadShape() on your computer?

9

Hi Joseph!
My svg file works, but the new svg you have didn’t work for me. Did you get that from Illustrator or did you tweak it a bit? I looked at it again and realized that might have been some indentation/new line issues. This should work

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<title>test</title>
<polyline class="cls-1"  points="303.5,0.5 303.5,160.5 0.5,160.5 0.5,0.5 303.5,0.5"/>
<polyline class="cls-1"  points="374.5,271.5 374.5,451.5 73.5,451.5 73.5,271.5 374.5,271.5"/>
<polyline class="cls-1"  points="557.5,39.5 557.5,134.5 416.5,134.5 416.5,39.5 557.5,39.5"/>
<polyline class="cls-1"  points="374.5,626.5 374.5,789.5 149.5,789.5 149.5,626.5 374.5,626.5"/>
</svg>

I also fixed points where I think it should be in the format of "x,y x,y x,y … ". Just to emulate what Illustrator outputs.

10

Yes I got that from illustrator. Maybe I can change something in the export settings.

Thanks again.

11

When exporting svg from illustrator there’s a trick. In the Advanced Options/CSS Properties, it’s set as Style Elements by default, change it to Style Attributes.
There will be a style for each path.

34%20PM
Screen Shot 2019-09-14 at 2.03.34 PM.png476×643 37.8 KB

3 Likes
12

The tip suggested by @eduzal did the trick for me. I had several .svg files who stubbornly refused to be parsed correctly by Processing. Opening and resaving them in Illustrator using the CSS property “Style Attributes” got rid of all the errors. Thanks for sharing, @eduzal!

2 Likes