# Parse SVG file from Adobe Illustrator

**URL:** <https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226>\
**Category:** Coding Questions\
**Created:** [June 24, 2018, 9:11pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226 "2018-06-24T21:11:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 24, 2018, 9:11pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/1 "2018-06-24T21:11:58Z")

</div>

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 :

- [https://processing.org/reference/PShape\_getChild\_.html](https://processing.org/reference/PShape_getChild_.html)

and there’s an error :

```auto
Ignoring <style> tag.

```

Thanks in advance

The SVG code :

```auto
<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 :

```auto
PShape s;

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

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

```

---

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)\
**Post date:** [July 3, 2018, 6:15pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/2 "2018-07-03T18:15:35Z")

</div>

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.

```auto
<?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>

```

```auto
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.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 3, 2018, 7:29pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/3 "2018-07-03T19:29:43Z")

</div>

Thanks for your answer ! 😉

> [@WakeMeAtThree](#):
>
> so I opened your svg file in Illustrator and _cut_ it in one corner, and saved the file to svg again

Could you give more informations about that?

---

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)\
**Post date:** [July 4, 2018, 9:30am UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/4 "2018-07-04T09:30:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 4, 2018, 2:26pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/5 "2018-07-04T14:26:55Z")

</div>

Ok thanks I uderstood ! 🙂

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

```auto
<?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">

```

---

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)\
**Post date:** [July 4, 2018, 7:29pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/6 "2018-07-04T19:29:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 4, 2018, 9:27pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/7 "2018-07-04T21:27:42Z")

</div>

Ok thanks.  
I have an other error :

- `ArrayIndexOutOfBoundsException: 1`

with this svg\_file :

```auto
<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 :

```auto
PShape s;

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

void draw(){
  background(255);
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 4, 2018, 9:34pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/8 "2018-07-04T21:34:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)\
**Post date:** [July 6, 2018, 7:26am UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/9 "2018-07-06T07:26:02Z")

</div>

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

```auto
<?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.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 8, 2018, 1:41pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/10 "2018-07-08T13:41:01Z")

</div>

> [@WakeMeAtThree](#):
>
> Did you get that from Illustrator or did you tweak it a bit?

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

Thanks again.

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [September 14, 2019, 5:07pm UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/11 "2019-09-14T17:07:16Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/14f6d14edf36b6f720154915ffb52ca0ec586140.png)

---

<div class="post-metadata">

**Author:** ![stixan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stixan/32/21628_2.png) [@stixan](https://discourse.processing.org/u/stixan)\
**Post date:** [December 15, 2020, 11:31am UTC](https://discourse.processing.org/t/parse-svg-file-from-adobe-illustrator/1226/12 "2020-12-15T11:31:20Z")

</div>

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!